如何為網(wǎng)站接入第三方微信登錄教程

時間：2022-08-12 08:39:01 | 來源：網(wǎng)站運營

時間：2022-08-12 08:39:01 來源：網(wǎng)站運營

Web 網(wǎng)站的用戶登錄注冊方式有用戶名密碼登錄、驗證碼登錄、OAuth 第三方授權(quán)登錄等。

常用的第三方登錄有 QQ、微信、微博、GitHub、本站等，一般用戶常用微信掃碼授權(quán)的登錄方式，今天介紹一下網(wǎng)站接入微信登錄的方法。

應(yīng)用申請

網(wǎng)站應(yīng)用中接入微信登錄是基于OAuth2.0協(xié)議標(biāo)準(zhǔn)構(gòu)建的微信OAuth2.0授權(quán)登錄系統(tǒng)。

在進行微信OAuth2.0授權(quán)登錄接入之前，需要在微信開放平臺注冊開發(fā)者帳號，并擁有一個已審核通過的網(wǎng)站應(yīng)用，并獲得相應(yīng)的AppID和AppSecret，申請微信登錄且通過審核后，才能開始接入微信登錄流程。

在管理中心-網(wǎng)站應(yīng)用-創(chuàng)建網(wǎng)站應(yīng)用中完善網(wǎng)站的基本信息，在第 2 步中完善網(wǎng)站的內(nèi)容和運營者信息，提交給微信開放平臺審核即可。

網(wǎng)站應(yīng)用審核通過后會為網(wǎng)站應(yīng)用生成 AppID 和 AppSecret，在接下來的接入流程中需要使用到 AppID 和 AppSecret。

接入微信

微信開放平臺的網(wǎng)站應(yīng)用文檔中詳細講解了如何為應(yīng)用接入微信登錄，下面我們以實際應(yīng)用的方式來詳細介紹一下如何接入微信登錄，我的小站已經(jīng)接入了微信登錄，想看效果的看官可以移步這里。

接入微信登錄需要獲取到用戶的 openid 和 unionid，簡單來說分為三步：

1. 調(diào)用開放接口獲取授權(quán)
2. 通過授權(quán)后的 code 獲取 access_token
3. 使用access_token獲取用戶信息

獲取授權(quán)

獲取授權(quán)的過程就是讓微信用戶使用手機等移動設(shè)備掃碼網(wǎng)站提供的 OAuth 標(biāo)準(zhǔn)的二維碼鏈接，然后用戶在微信中授權(quán)應(yīng)用來使用用戶的個人信息。

下圖是微信開放平臺提供的獲取 access_token 的時序圖：

接下來對圖中的步驟進行簡要的說明：

1. 請求登錄第三方應(yīng)用
   即用戶從瀏覽器中搜索網(wǎng)站關(guān)鍵字，或者輸入網(wǎng)站地址進入到我們的網(wǎng)站應(yīng)用。
   
2. 請求微信 OAuth2.0 授權(quán)登錄
   這一步，我們只需要在網(wǎng)站的登錄頁面中添加微信授權(quán)登錄的超鏈接即可，在鏈接的地址中添加上網(wǎng)站應(yīng)用在微信開放平臺中的 AppID 和授權(quán)成功后重定向的網(wǎng)站地址。
   鏈接的形式：
   

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

其中：

• appid：應(yīng)用的 AppID
  
• redirect_uri：用戶允許授權(quán)之后微信重定向回網(wǎng)站的地址，需要在微信開放平臺的網(wǎng)站應(yīng)用中配置“授權(quán)回調(diào)域”。
  比如我的網(wǎng)站應(yīng)用中的回調(diào)域配置的是網(wǎng)站的域名地址，因此回調(diào)的頁面只要在該域名下就可以：
  

• response_type：請求用戶授權(quán)的地址中這里填寫 code。
  
• scope：應(yīng)用授權(quán)作用域，擁有多個作用域用逗號（,）分隔，網(wǎng)頁應(yīng)用目前僅填寫snsapi_login即可。
  
• state：該參數(shù)可選，用于保持請求和回調(diào)的狀態(tài)，授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡單的隨機數(shù)加session進行校驗。
  

我的網(wǎng)站應(yīng)用中的鏈接地址如下：

https://open.weixin.qq.com/connect/qrconnect?appid=wxb6a3d3490ab4c2cd&redirect_uri=https://zi.pongj.com/oauth/wechat/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect
然后在登錄的頁面中將鏈接地址添加超鏈接：

<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wxb6a3d3490ab4c2cd&redirect_uri=https://zi.pongj.com/oauth/wechat/login&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect"> <img title="微信" alt="微信" src="//sf6-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/wechat.e0ff124.svg" class="oauth-btn" /></a>

1. 請求用戶確認
   在登錄頁面中添加了微信登錄的超鏈接，用戶點擊微信登錄的按鈕之后就進入到了微信的域中，頁面中會出現(xiàn)網(wǎng)站應(yīng)用的基本信息和授權(quán)的二維碼請求用戶進行掃碼授權(quán)。
   

可以從頁面中看到，地址欄中的地址信息包含了我們配置的地址信息，頁面中的二維碼將我們的網(wǎng)站應(yīng)用的名稱顯示在二維碼的下方。
此時用戶掃描二維碼之后，該二維碼會同步顯示用戶的授權(quán)狀態(tài)：


同時在微信客戶端中，我們也看到了應(yīng)用的名稱和 Logo 的基本信息：

1. 用戶確認
   用戶在手機中“同意”授權(quán)之后，網(wǎng)站應(yīng)用中的微信登錄頁面會跳轉(zhuǎn)到我們在鏈接地址中配置的 redirect_url 的頁面
   
2. 拉起第三方應(yīng)用或重定向到第三方，帶上授權(quán)的臨時票據(jù)（code）
   用戶同意授權(quán)之后，微信登錄頁面在重定向到 redirect_uri 的頁面時，會在 redirect_uri 地址后添加上臨時的 code，我們在開發(fā) redirect_uri 頁面的時候可以判斷地址中是否包含 code 來確定用戶是否授權(quán)。
   比如我的網(wǎng)站回調(diào)頁面就會變成：
   https://zi.pongj.com/oauth/login/wechat?code=code&state=state
   
   
3. 通過 code 加上 AppID 和 AppSecret 來獲取 access_token
   我們在 redirect_uri 的頁面中檢查到地址中包含了 code 的參數(shù)，并且用戶已授權(quán)，然后我們就可以使用 code 來獲取 access_token。
   需要注意的是，由于 AppSecret 在應(yīng)用中屬于私密數(shù)據(jù)，所以此處獲取 access_token 需要在服務(wù)器中調(diào)用，千萬不要在瀏覽器端調(diào)用而導(dǎo)致 AppSecret 泄露。
   

獲取用戶信息

下面是我作為開發(fā)者在微信開放平臺的時序圖的基礎(chǔ)上補充了網(wǎng)站應(yīng)用的前后端數(shù)據(jù)交互過程：

在獲取到用戶授權(quán)，也就是獲取到 code 之后，接下來網(wǎng)站應(yīng)用的步驟就是從上圖中的 5-11 步驟所示，之前的步驟在上面已經(jīng)介紹過了，接下來詳細的介紹一下 5-11 步驟操作：

第 5 步：

在網(wǎng)站應(yīng)用的 redirect_uri 頁面中添加路經(jīng)檢測邏輯，檢查是否帶有 code 參數(shù)：如果帶有 code 參數(shù)，表明用戶已同意授權(quán)；如果未帶有 code 參數(shù)，則說明用戶拒絕或關(guān)閉了授權(quán)頁面，此時需要重定向到登錄頁面，并提醒用戶登錄失敗。

下面是我的 Nuxt.js 項目中的校驗代碼塊：

const { code } = this.$route.queryif (!code) { this.$notify.warning('請重新登錄') return this.$router.push('/login')}第 6 步：

獲取到了 code 參數(shù)，然后就需要獲取授權(quán)的 access_token ，獲取 access_token 需要使用 AppID 和 AppSecret，由于涉及到 AppSecret 的安全性，因此我們將請求發(fā)送到后端進行操作。

第 7 步：

通過傳到后端的 code 參數(shù)，以及保存在環(huán)境變量或者配置文件中的 AppSecret 來獲取 access_token。

獲取 access_token 的請求地址格式如下：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code其中：

• appid：應(yīng)用唯一標(biāo)識，在微信開放平臺提交應(yīng)用審核通過后獲得
• secret：應(yīng)用密鑰AppSecret，在微信開放平臺提交應(yīng)用審核通過后獲得
• code：填寫獲取到的code參數(shù)
• grant_type：填authorization_code

在 Node.js 中使用 request 或者 got 等模塊向微信開發(fā)平臺發(fā)送 GET 請求。

第 8 步：

請求發(fā)送成功之后，微信開放平臺會返回包含有 access_token 的返回值。

返回結(jié)果：

{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}其中，access_token是調(diào)用授權(quán)關(guān)系接口的調(diào)用憑證，由于access_token有效期（目前為2個小時）較短，當(dāng)access_token超時后，可以使用refresh_token進行刷新，刷新的操作只需要加上 refresh_token 并調(diào)用接口即可，詳細的操作可以查看官方文檔

可以看到返回的結(jié)果中包含了用戶的 openid 和 unionid，這兩個字段用戶對于網(wǎng)站應(yīng)用是固定不變的，因此我們可以在此處通過 openid 和 unionid 來判斷該微信用戶是否在我們的網(wǎng)站中已經(jīng)注冊過，如果注冊過，直接生成合法的 token 值返回到前端頁面即可；如果用戶未在網(wǎng)站中注冊，那么我們需要先獲取到用戶的個人信息，然后再生成 token

第 9 步：

獲取到 access_token 之后，并判斷用戶未在網(wǎng)站應(yīng)用中注冊，我們就需要獲取用戶信息，來保存用戶的授權(quán)登錄信息。

獲取用戶信息，需要調(diào)用下面的 API 接口：

https://api.weixin.qq.com/sns/userinfo?access_token=access_token&openid=openid其中：

• access_token：填寫我們獲取到的 access_token
• openid：用戶的個人信息 openid，在上一步中的返回結(jié)果中包含了 openid

第 10 步：

微信開放平臺請求校驗通過后會返回用戶的基本個人信息，包括昵稱、頭像、性別等。

返回結(jié)果：

{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", "privilege":[ "PRIVILEGE1", "PRIVILEGE2" ], "unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}到這一步，我們已經(jīng)獲取到了用戶的個人信息，下面我們就需要將用戶的信息保存在我們的數(shù)據(jù)庫中，在下一次用戶掃碼微信登錄的時候，可以直接返回用戶的登錄 token，而不需要再從微信平臺中獲取個人信息了。

如果網(wǎng)站應(yīng)用還需要用戶補充其他的個人信息，那么我們可以在此步驟中先將用戶的微信信息存儲起來，然后將請求重定向到補充信息的頁面中，提示用戶補充額外的信息。

由于我的網(wǎng)站中需要使用用戶的郵箱地址和手機號信息來通知，因此我在回調(diào)的地址中添加了補充信息的頁面，想看效果的的同學(xué)可以嘗試一下。

第 11 步：

數(shù)據(jù)庫中已經(jīng)生成了用戶的登錄授權(quán)信息，系統(tǒng)生成合法的 token 值返回給前端頁面，前端頁面來標(biāo)識用戶已登錄成功，并跳轉(zhuǎn)到網(wǎng)站的首頁。

if (result.token) { await this.$store.dispatch('user/oauth', result.token) this.$notify.success('登陸成功') setTimeout(() => { this.$router.push('/') }, 3000) return}this.$notify.success('請重新登錄')setTimeout(() => { this.$router.push('/login')}, 3000)

參考

• 微信開放平臺網(wǎng)站應(yīng)用官方文檔地址

更多內(nèi)容

前端開發(fā)轉(zhuǎn)全棧，目前的技術(shù)棧是 Node.js、Python，日常研究 C 和 Rust，孜孜啃食系統(tǒng)開發(fā)和網(wǎng)絡(luò)設(shè)計中~

更多的內(nèi)容請移步GitHub@ruxf，本站@孟太白，掘金，或者關(guān)注我的公眾號@全棧開發(fā)師，歡迎來撩~

學(xué)到老，寫到老，生命不停，編程不止~

加油，打工人~