,,

web端網(wǎng)站開發(fā)接入第三方微信登錄

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年12月17日 12:54 本文熱度 934

一、微信開放平臺(tái)申請(qǐng)網(wǎng)站應(yīng)用

1、微信開放平臺(tái)^[1]中注冊(cè)開發(fā)者賬號(hào)，在管理中心選擇網(wǎng)站應(yīng)用，創(chuàng)建相關(guān)應(yīng)用。按照要求準(zhǔn)備好資料，提交審核即可，一般2天左右就會(huì)有審核結(jié)果。

注意：

基本信息-應(yīng)用官網(wǎng)：填寫公司官網(wǎng)即可；
開發(fā)信息-授權(quán)回調(diào)域：只能填寫一個(gè)回調(diào)域，無需帶上http或者h(yuǎn)ttps，這個(gè)配置十分重要，用戶掃碼成功后，會(huì)跳轉(zhuǎn)到這個(gè)回調(diào)域；

2、應(yīng)用審核通過后，會(huì)顯示相關(guān)詳情信息，在后面的接入流程中會(huì)使用；

注意：

AppSecret信息不是明文的，點(diǎn)擊重置進(jìn)行獲取，需妥善保存，一般不要放在前端項(xiàng)目中。
微信登錄的接口是已獲得的狀態(tài)，說明開發(fā)者可以使用登錄相關(guān)接口了；
開發(fā)信息-授權(quán)回調(diào)域可以直接進(jìn)行修改，無需審核；

?

二、微信登錄對(duì)接

開放平臺(tái)-微信登錄功能^[2]有相關(guān)的文檔說明，詳細(xì)地介紹了如何接入微信登錄，以下為相關(guān)拆解步驟。

整體流程：

第三方發(fā)起微信授權(quán)登錄請(qǐng)求，微信用戶允許授權(quán)第三方應(yīng)用后，微信會(huì)拉起應(yīng)用或重定向到第三方網(wǎng)站，并且?guī)鲜跈?quán)臨時(shí)票據(jù)code參數(shù)；
通過code參數(shù)加上AppID和AppSecret等，通過API換取access_token；
通過access_token進(jìn)行接口調(diào)用，獲取用戶基本數(shù)據(jù)資源或幫助用戶實(shí)現(xiàn)基本操作。

獲取access_token時(shí)序圖：

1、微信二維碼鏈接

配置鏈接參數(shù)，生成完整的微信二維碼鏈接；

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

參數(shù)說明：

appid：必填，應(yīng)用唯一標(biāo)識(shí)；

redirect_uri：必填，請(qǐng)使用urlEncode^[3]對(duì)鏈接進(jìn)行處理，建議對(duì)回調(diào)域進(jìn)行編碼處理；

response_type：必填，值為code；

scope：必填，網(wǎng)頁應(yīng)用目前僅填寫snsapi_login；

state：選填，用于保持請(qǐng)求和回調(diào)的狀態(tài)，授權(quán)請(qǐng)求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請(qǐng)求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)；

lang：選填，界面語言，支持cn（中文簡體）與en（英文），默認(rèn)為cn；

若提示“該鏈接無法訪問”，請(qǐng)檢查參數(shù)是否填寫錯(cuò)誤；

redirect_uri 參數(shù)錯(cuò)誤：

原因分析：

回調(diào)地址不能填入端口號(hào)+名稱，eg: open.weixin.qq.com:8080/index；^[4]
回調(diào)地址只能寫該域名下的地址；
回調(diào)地址必須是全路徑，最好進(jìn)行轉(zhuǎn)碼操作；

2、獲取code

用戶掃碼、授權(quán)后，會(huì)將頁面重定向到回調(diào)域（redirect_uri），并且?guī)蟘ode和state參數(shù):redirect_uri?code=CODE&state=STATE，比如：

https://open.weixin.qq.com?code=CODE&state=STATE

移動(dòng)端微信掃碼成功后，會(huì)顯示授權(quán)頁面；

授權(quán)成功后，微信會(huì)提示登錄通知；

注意：若用戶禁止授權(quán)，則不會(huì)發(fā)生重定向，可在當(dāng)前頁面重新獲取微信二維碼；

3、通過code獲取access_token、openid、unionid

該接口通過code等相關(guān)參數(shù)可獲取access_token，為了安全考慮，開發(fā)者請(qǐng)勿將access_token返回給前端，需要開發(fā)者保存在后臺(tái)，訪問微信api的請(qǐng)求由后臺(tái)發(fā)起；所以該接口是提供給后端調(diào)用的，前端調(diào)用無效。

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

參數(shù)說明：

appid：必填，應(yīng)用唯一標(biāo)識(shí)；

secret：必填，在微信開放平臺(tái)提交應(yīng)用審核通過后獲得；

code：必填，上面獲取的code參數(shù)；

grant_type：必填，值為authorization_code；

返回說明：

access_token：接口調(diào)用憑證

expires_in：access_token接口調(diào)用憑證超時(shí)時(shí)間，單位（秒）

refresh_token：用戶刷新access_token

openid：授權(quán)用戶唯一標(biāo)識(shí)

scope：用戶授權(quán)的作用域，使用逗號(hào)（,）分隔

unionid：當(dāng)且僅當(dāng)該網(wǎng)站應(yīng)用已獲得該用戶的userinfo授權(quán)時(shí)，才會(huì)出現(xiàn)該字段。

{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}