前言

上一篇文章大概寫了一下如何搭一個(gè)微信中控服務(wù)： 【thinkjs搭建微信中控服務(wù)】 。

接下來這篇，專門寫一下如何在此基礎(chǔ)上擴(kuò)展出來一個(gè)比較好用的微信鑒權(quán)登陸的方案。

由于這一段的邏輯著實(shí)有點(diǎn)繞，所以就單獨(dú)拿出來寫了。

有時(shí)候，調(diào)用方甚至可以通過這個(gè)方案，進(jìn)行多公眾號(hào)openid的之間的關(guān)聯(lián)。

官方說明

開發(fā)文檔

微信文檔地址：傳送門

鑒權(quán)邏輯

• 前端跳轉(zhuǎn)到以下url，重定向或者代碼跳轉(zhuǎn)都可以：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  
• 彈出是否同意授權(quán)的框，用戶同意授權(quán)(如果是靜默授權(quán)，就不會(huì)彈出同意框)，然后頁面會(huì)重定向到上面鏈接的redirect_uri地址(一般是開發(fā)者處理下一步鑒權(quán)邏輯的服務(wù)端API)，并且會(huì)帶上code參數(shù)。
  
• 服務(wù)端拿到code之后，調(diào)用以下api來獲取網(wǎng)頁授權(quán)的access_token和用戶的openid：https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

拿到openid之后，理論上鑒權(quán)的邏輯就算完成了。

開發(fā)者可以繼續(xù)用openid和access_token去獲取用戶信息；或者進(jìn)行一些其他的業(yè)務(wù)流程。

具體的參數(shù)說明看微信的官方文檔就可以了。

中控邏輯

第一步：頁面跳轉(zhuǎn)至中控API

業(yè)務(wù)調(diào)用方會(huì)有自己的登陸邏輯，只需要獲取到當(dāng)前調(diào)用接口的用戶的openid，然后再進(jìn)行接下來的業(yè)務(wù)邏輯即可。

前端調(diào)用業(yè)務(wù)接口的時(shí)候，如果服務(wù)端發(fā)現(xiàn)當(dāng)前訪問用戶沒有登陸狀態(tài)，就會(huì)告訴前端需要鑒權(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/oauth2/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ù)：

描述：

我這里默認(rèn)都是靜默授權(quán)。

在這里可以看到代碼里面，中控把調(diào)用方傳過來的 wxid , back 和 serve 三個(gè)參數(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/oauth2/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ù)：

描述：

這里中控拿到code之后，去獲取openid。 獲取完之后，重定向回 serve (業(yè)務(wù)系統(tǒng))地址，并把獲取到的 openid 和 back 作為參數(shù)傳回去

第四步：業(yè)務(wù)系統(tǒng)自行處理

接下來業(yè)務(wù)系統(tǒng)就能通過開放的回調(diào)地址(上面的 serve )，來拿到以下信息：

• openid (微信ID)，
• redirect (上面的 back ，最初用戶在前端調(diào)用接口的頁面地址)

這時(shí)候就能用這個(gè)openid去處理自己的登陸邏輯，比如獲取用戶信息，緩存session保存登陸狀態(tài)之類的。

然后再重定向回 back 地址，也就是用戶在鑒權(quán)之前訪問的頁面。

鑒權(quán)結(jié)束

簡單說就是以下邏輯

• 前端 調(diào)用 業(yè)務(wù)接口 發(fā)現(xiàn)沒有登陸狀態(tài)，告訴前端往中控跳！
• 前端 跳轉(zhuǎn)至 中控API 拼接接下來要回調(diào)的參數(shù)
• 中控 重定向至 微信API 獲取code
• 微信 重定向至 中控API 獲取openid
• 中控 重定向回 業(yè)務(wù)回調(diào)API 拿到openid，保存用戶登陸狀態(tài)
• 業(yè)務(wù) 重定向回 前端
• 前端 調(diào)用 業(yè)務(wù)接口 發(fā)現(xiàn)有登陸狀態(tài)了，完事兒

雖然歷經(jīng)的跳轉(zhuǎn)和重定向看起來很多，但是實(shí)際用起來，其實(shí)是很快的，用戶基本上沒有什么感知。

而且對于業(yè)務(wù)調(diào)用方來說，只需要提供一個(gè)回調(diào)地址即可，然后在回調(diào)里面等著openid傳過來就好，剩下的交給中控自己去來回蹦噠吧。

結(jié)尾

需要注意的是，公眾號(hào)的后臺(tái)需要配置好以下信息。

1. JS接口安全域名：就是前端的訪問域名。
2. 網(wǎng)頁授權(quán)域名：中控API域名。
3. ip白名單：中控的ip地址。

否則是沒有權(quán)限鑒權(quán)的。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論