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

2024-05-06 16:54:07

字體：大中小

來源：轉載

供稿：網友

前言

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

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

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

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

官方說明

開發文檔

微信文檔地址：傳送門

鑒權邏輯

前端跳轉到以下url，重定向或者代碼跳轉都可以：https://open.weixin.qq.com/connect/oauth2/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/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

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

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

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

中控邏輯

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

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

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

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

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

相關代碼

// 接口 - 鑒權獲取codeasync 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/oauth2/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	是	對應配置公眾號的id，告訴中控用哪個公眾號鑒權
back	是	跳轉到鑒權鏈接之前的頁面完整url，便于鑒權完畢后重定向回之前頁面
serve	是	調用方api回調地址，在鑒權邏輯完成后，會攜帶openid重定向回這個地址

描述：

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

在這里可以看到代碼里面，中控把調用方傳過來的 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/oauth2/access_token?appid=${appid}&secret=${secret}&code=$[code]&grant_type=authorization_code`  })  return data.openid}

作用：

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

地址：

baseHost + /open/wx/login_wechat

參數：

參數名	必選	說明
wxid	是	對應配置公眾號的id，告訴中控用哪個公眾號鑒權
code	是	微信回傳的code
back	是	跳轉到鑒權鏈接之前的頁面完整url，便于鑒權完畢后重定向回之前頁面(上一步拼接的)
serve	是	調用方api回調地址，在鑒權邏輯完成后，會攜帶openid重定向回這個地址(上一步拼接的)