thinkjs微信中控之微信鑒權登陸的實現代碼

前言

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

接下來這篇，專門寫一下如何在此基礎上擴展出來一個比較好用的微信鑒權登陸的方案。

由于這一段的邏輯著實有點繞，所以就單獨拿出來寫了。

有時候，調用方甚至可以通過這個方案，進行多公眾號openid的之間的關聯。

官方說明

開發文檔

微信文檔地址：傳送門

鑒權邏輯

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

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

開發者可以繼續用openid和access_token去獲取用戶信息；或者進行一些其他的業務流程。

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

中控邏輯

第一步：頁面跳轉至中控API

業務調用方會有自己的登陸邏輯，只需要獲取到當前調用接口的用戶的openid，然后再進行接下來的業務邏輯即可。

前端調用業務接口的時候，如果服務端發現當前訪問用戶沒有登陸狀態，就會告訴前端需要鑒權，并且把需要跳轉的中控API鏈接響應給前端。

然后前端就開始往中控的API鏈接跳轉。

第二步：中控重定向到微信API

相關代碼

// 接口 - 鑒權獲取code
async go_authAction() {
  let that = this;
  let {back, serve = ''} = that.get();
  if (think.isEmpty(back)) {
    return that.json({code: 1, msg: '參數不正確'})
  }
  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);
}

作用：

鑒權獲取code

地址：

baseHost + /open/wx/go_auth

參數：

描述：

我這里默認都是靜默授權。

在這里可以看到代碼里面，中控把調用方傳過來的 wxid , back 和 serve 三個參數拼接到了微信API的回調鏈接 redirect_uri 里面。

第三步：微信回調中控API

相關代碼

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: '參數不正確'})
  }
  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
}

作用：

通過微信回調傳回來的code，獲取openid

地址：

baseHost + /open/wx/login_wechat

參數：

描述：

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

第四步：業務系統自行處理

接下來業務系統就能通過開放的回調地址(上面的 serve )，來拿到以下信息：

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

這時候就能用這個openid去處理自己的登陸邏輯，比如獲取用戶信息，緩存session保存登陸狀態之類的。

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

鑒權結束

簡單說就是以下邏輯

• 前端 調用 業務接口 發現沒有登陸狀態，告訴前端往中控跳！
• 前端 跳轉至 中控API 拼接接下來要回調的參數
• 中控 重定向至 微信API 獲取code
• 微信 重定向至 中控API 獲取openid
• 中控 重定向回 業務回調API 拿到openid，保存用戶登陸狀態
• 業務 重定向回 前端
• 前端 調用 業務接口 發現有登陸狀態了，完事兒

雖然歷經的跳轉和重定向看起來很多，但是實際用起來，其實是很快的，用戶基本上沒有什么感知。

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

結尾

需要注意的是，公眾號的后臺需要配置好以下信息。

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

否則是沒有權限鑒權的。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。