前言
創(chuàng)新互聯(lián)專注于南海網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供南海營銷型網(wǎng)站建設(shè),南海網(wǎng)站制作、南海網(wǎng)頁設(shè)計、南海網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù),打造南海網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供南海網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
上一篇文章大概寫了一下如何搭一個微信中控服務(wù): 【thinkjs搭建微信中控服務(wù)】 。
接下來這篇,專門寫一下如何在此基礎(chǔ)上擴展出來一個比較好用的微信鑒權(quán)登陸的方案。
由于這一段的邏輯著實有點繞,所以就單獨拿出來寫了。
有時候,調(diào)用方甚至可以通過這個方案,進(jìn)行多公眾號openid的之間的關(guān)聯(lián)。
官方說明
開發(fā)文檔
微信文檔地址:傳送門
鑒權(quán)邏輯
拿到openid之后,理論上鑒權(quán)的邏輯就算完成了。
開發(fā)者可以繼續(xù)用openid和access_token去獲取用戶信息;或者進(jìn)行一些其他的業(yè)務(wù)流程。
具體的參數(shù)說明看微信的官方文檔就可以了。
中控邏輯
第一步:頁面跳轉(zhuǎn)至中控API
業(yè)務(wù)調(diào)用方會有自己的登陸邏輯,只需要獲取到當(dāng)前調(diào)用接口的用戶的openid,然后再進(jìn)行接下來的業(yè)務(wù)邏輯即可。
前端調(diào)用業(yè)務(wù)接口的時候,如果服務(wù)端發(fā)現(xiàn)當(dāng)前訪問用戶沒有登陸狀態(tài),就會告訴前端需要鑒權(quán),并且把需要跳轉(zhuǎn)的中控API鏈接響應(yīng)給前端。
然后前端就開始往中控的API鏈接跳轉(zhuǎn)。
第二步:中控重定向到微信API
相關(guān)代碼
// 接口 - 鑒權(quán)獲取code async go_authAction() { let that = this; let {back, serve = ''} = that.get(); if (think.isEmpty(back)) { return that.json({code: 1, msg: '參數(shù)不正確'}) } let newBack = encodeURIComponent(back); let redirectUri = `${baseHost}/api/open/wx/login_wechat?${encodeURIComponent(`back=${newBack}&wxid=${that.wxConfig.id}&serve=${serve}`)}`; let url = `https://open.weixin.qq.com/connect/oauth3/authorize?appid=${that.wxConfig.appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect` that.redirect(url); }
作用:
鑒權(quán)獲取code
地址:
baseHost + /open/wx/go_auth
參數(shù):
參數(shù)名 | 必選 | 說明 |
---|---|---|
wxid | 是 | 對應(yīng)配置公眾號的id,告訴中控用哪個公眾號鑒權(quán) |
back | 是 | 跳轉(zhuǎn)到鑒權(quán)鏈接之前的頁面完整url,便于鑒權(quán)完畢后重定向回之前頁面 |
serve | 是 | 調(diào)用方api回調(diào)地址,在鑒權(quán)邏輯完成后,會攜帶openid重定向回這個地址 |
描述:
我這里默認(rèn)都是靜默授權(quán)。
在這里可以看到代碼里面,中控把調(diào)用方傳過來的 wxid , back 和 serve 三個參數(shù)拼接到了微信API的回調(diào)鏈接 redirect_uri 里面。
第三步:微信回調(diào)中控API
相關(guān)代碼
async login_wechatAction() { let that = this; let {code, back, serve = ''} = that.get(); if (think.isEmpty(code) || think.isEmpty(back)) { return that.json({code: 1, msg: '參數(shù)不正確'}) } let newBack = encodeURIComponent(back); let apiWxController = that.controller('private/wx'); let openid = await that._getOpenIdByAuthCode(that.wxConfig.id, code); let backUrl = `${serve}?wxid=${that.wxConfig.id}&openid=${openid}&redirect=${newBack}`; that.redirect(backUrl); } _getOpenIdByAuthCode(wxid, code){ let that = this; let {appid, secret} = await that.controller('common').getWxConfigById(wxid); let {data} = await axios({ method: 'get', url: `https://api.weixin.qq.com/sns/oauth3/access_token?appid=${appid}&secret=${secret}&code=$[code]&grant_type=authorization_code` }) return data.openid }
作用:
通過微信回調(diào)傳回來的code,獲取openid
地址:
baseHost + /open/wx/login_wechat
參數(shù):
參數(shù)名 | 必選 | 說明 |
---|---|---|
wxid | 是 | 對應(yīng)配置公眾號的id,告訴中控用哪個公眾號鑒權(quán) |
code | 是 | 微信回傳的code |
back | 是 | 跳轉(zhuǎn)到鑒權(quán)鏈接之前的頁面完整url,便于鑒權(quán)完畢后重定向回之前頁面(上一步拼接的) |
serve | 是 | 調(diào)用方api回調(diào)地址,在鑒權(quán)邏輯完成后,會攜帶openid重定向回這個地址(上一步拼接的) |
描述:
這里中控拿到code之后,去獲取openid。 獲取完之后,重定向回 serve (業(yè)務(wù)系統(tǒng))地址,并把獲取到的 openid 和 back 作為參數(shù)傳回去
第四步:業(yè)務(wù)系統(tǒng)自行處理
接下來業(yè)務(wù)系統(tǒng)就能通過開放的回調(diào)地址(上面的 serve ),來拿到以下信息:
這時候就能用這個openid去處理自己的登陸邏輯,比如獲取用戶信息,緩存session保存登陸狀態(tài)之類的。
然后再重定向回 back 地址,也就是用戶在鑒權(quán)之前訪問的頁面。
鑒權(quán)結(jié)束
簡單說就是以下邏輯
雖然歷經(jīng)的跳轉(zhuǎn)和重定向看起來很多,但是實際用起來,其實是很快的,用戶基本上沒有什么感知。
而且對于業(yè)務(wù)調(diào)用方來說,只需要提供一個回調(diào)地址即可,然后在回調(diào)里面等著openid傳過來就好,剩下的交給中控自己去來回蹦噠吧。
結(jié)尾
需要注意的是,公眾號的后臺需要配置好以下信息。
否則是沒有權(quán)限鑒權(quán)的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁名稱:thinkjs微信中控之微信鑒權(quán)登陸的實現(xiàn)代碼
路徑分享:http://www.muchs.cn/article12/jpjpgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、企業(yè)網(wǎng)站制作、小程序開發(fā)、軟件開發(fā)、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)