這篇文章主要介紹如何使用微信開放平臺接口實現(xiàn)微信掃碼登錄的功能,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
公司主營業(yè)務(wù):成都做網(wǎng)站、網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出紅河哈尼免費做網(wǎng)站回饋大家。
網(wǎng)站應(yīng)用微信登錄是基于OAuth3.0協(xié)議標準構(gòu)建的微信OAuth3.0授權(quán)登錄系統(tǒng)。
在進行微信OAuth3.在進行微信OAuth3.0授權(quán)登錄接入之前,在微信開放平臺注冊開發(fā)者帳號,并擁有一個已審核通過的網(wǎng)站應(yīng)用,并獲得相應(yīng)的AppID和AppSecret,申請微信登錄且通過審核后,可開始接入流程。
微信OAuth3.0授權(quán)登錄讓微信用戶使用微信身份安全登錄第三方應(yīng)用或網(wǎng)站,在微信用戶授權(quán)登錄已接入微信OAuth3.0的第三方應(yīng)用后,第三方可以獲取到用戶的接口調(diào)用憑證(access_token),通過access_token可以進行微信開放平臺授權(quán)關(guān)系接口調(diào)用,從而可實現(xiàn)獲取微信用戶基本開放信息和幫助用戶實現(xiàn)基礎(chǔ)開放功能等。
微信OAuth3.0授權(quán)登錄目前支持authorization_code模式,適用于擁有server端的應(yīng)用授權(quán)。該模式整體流程為:
1. 第三方發(fā)起微信授權(quán)登錄請求,微信用戶允許授權(quán)第三方應(yīng)用后,微信會拉起應(yīng)用或重定向到第三方網(wǎng)站,并且?guī)鲜跈?quán)臨時票據(jù)code參數(shù);
2. 通過code參數(shù)加上AppID和AppSecret等,通過API換取access_token;
3. 通過access_token進行接口調(diào)用,獲取用戶基本數(shù)據(jù)資源或幫助用戶實現(xiàn)基本操作。
獲取access_token時序圖:
登錄方倍工作室微信登錄網(wǎng)站應(yīng)用
http://weixin.fangbei.org/login.php
打開后,應(yīng)用會生成state參數(shù),跳轉(zhuǎn)到以下鏈接:(登錄前請注意已獲取相應(yīng)網(wǎng)頁授權(quán)作用域(scope=snsapi_login))
https://open.weixin.qq.com/connect/qrconnect?appid=wxed782be999f86e0e&redirect_uri=http%3A%2F%2Fweixin.fangbei.org%2Flogin.php&response_type=code&scope=snsapi_login&state=123#wechat_redirect
若提示“該鏈接無法訪問”,請檢查參數(shù)是否填寫錯誤,如redirect_uri的域名與審核時填寫的授權(quán)域名不一致或scope不為snsapi_login。
參數(shù) | 是否必須 | 說明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標識 |
redirect_uri | 是 | 重定向地址,需要進行UrlEncode |
response_type | 是 | 填code |
scope | 是 | 應(yīng)用授權(quán)作用域,擁有多個作用域用逗號(,)分隔,網(wǎng)頁應(yīng)用目前僅填寫snsapi_login即可 |
state | 否 | 用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊(跨站請求偽造攻擊),建議第三方帶上該參數(shù),可設(shè)置為簡單的隨機數(shù)加session進行校驗 |
此時,PC網(wǎng)站上顯示如下二維碼
用戶允許授權(quán)后,將會重定向到redirect_uri的網(wǎng)址上,并且?guī)蟘ode和state參數(shù)
http://weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123
為了滿足網(wǎng)站更定制化的需求,我們還提供了第二種獲取code的方式,支持網(wǎng)站將微信登錄二維碼內(nèi)嵌到自己頁面中,用戶使用微信掃碼授權(quán)后通過JS將code返回給網(wǎng)站。
JS微信登錄主要用途:網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄,無需跳轉(zhuǎn)到微信域下登錄后再返回,提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實現(xiàn)辦法:
參數(shù)說明
參數(shù) | 是否必須 | 說明 |
---|---|---|
id | 是 | 第三方頁面顯示二維碼的容器id |
appid | 是 | 應(yīng)用唯一標識,在微信開放平臺提交應(yīng)用審核通過后獲得 |
scope | 是 | 應(yīng)用授權(quán)作用域,擁有多個作用域用逗號(,)分隔,網(wǎng)頁應(yīng)用目前僅填寫snsapi_login即可 |
redirect_uri | 是 | 重定向地址,需要進行UrlEncode |
state | 否 | 用于保持請求和回調(diào)的狀態(tài),授權(quán)請求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊(跨站請求偽造攻擊),建議第三方帶上該參數(shù),可設(shè)置為簡單的隨機數(shù)加session進行校驗 |
style | 否 | 提供"black"、"white"可選,默認為黑色文字描述。詳見文檔底部FAQ |
href | 否 | 自定義樣式鏈接,第三方可根據(jù)實際需求覆蓋默認樣式。詳見文檔底部FAQ |
完整代碼如下
頁面顯示效果如下
通過code獲取access_token
https://api.weixin.qq.com/sns/oauth3/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
參數(shù) | 是否必須 | 說明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標識,在微信開放平臺提交應(yīng)用審核通過后獲得 |
secret | 是 | 應(yīng)用密鑰AppSecret,在微信開放平臺提交應(yīng)用審核通過后獲得 |
code | 是 | 填寫第一步獲取的code參數(shù) |
grant_type | 是 | 填authorization_code |
正確的返回:
{ "access_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2rCAUjXEP1_9edZdJLf3MIwii2N8cnTooDfx7nYpFRmOSZyq4gb2FNdWJr__KUqPtcfVUvg6XBTucZZ4zH6v8VQ", "expires_in": 7200, "refresh_token": "OezXcEiiBSKSxW0eoylIeFy2HFC4Bxv9JvC0Sgj4Px4_8TX1ci3jF_QP_6sWjvx2lW60INlf6AK1q21rW7mJyc5yG3GZ9p1psANOKTi2EZUQXA6CnwSXxDQlJ3421tEOvCWIrJhkA8oTqjsLKYG-yg", "openid": "oJekJs2faTQ47FGjDOEIyOPMN97s", "scope": "snsapi_login", "unionid": "o4wcnw02YjFUYglZxV0LwcBkVF6Y"}
參數(shù)說明
參數(shù) | 說明 |
---|---|
access_token | 接口調(diào)用憑證 |
expires_in | access_token接口調(diào)用憑證超時時間,單位(秒) |
refresh_token | 用戶刷新access_token |
openid | 授權(quán)用戶唯一標識 |
scope | 用戶授權(quán)的作用域,使用逗號(,)分隔 |
unionid | 當且僅當該網(wǎng)站應(yīng)用已獲得該用戶的userinfo授權(quán)時,才會出現(xiàn)該字段。 |
錯誤返回樣例:
{"errcode":40029,"errmsg":"invalid code"}
access_token是調(diào)用授權(quán)關(guān)系接口的調(diào)用憑證,由于access_token有效期(目前為2個小時)較短,當access_token超時后,可以使用refresh_token進行刷新,access_token刷新結(jié)果有兩種:
1. 若access_token已超時,那么進行refresh_token會獲取一個新的access_token,新的超時時間;
2. 若access_token未超時,那么進行refresh_token不會改變access_token,但超時時間會刷新,相當于續(xù)期access_token。
refresh_token擁有較長的有效期(30天),當refresh_token失效的后,需要用戶重新授權(quán)。
獲取第一步的code后,請求以下鏈接進行refresh_token:
https://api.weixin.qq.com/sns/oauth3/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
參數(shù) | 是否必須 | 說明 |
---|---|---|
appid | 是 | 應(yīng)用唯一標識 |
grant_type | 是 | 填refresh_token |
refresh_token | 是 | 填寫通過access_token獲取到的refresh_token參數(shù) |
正確的返回:
{
"access_token":"ACCESS_TOKEN",
"expires_in":7200,
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID",
"scope":"SCOPE"
}
參數(shù) | 說明 |
---|---|
access_token | 接口調(diào)用憑證 |
expires_in | access_token接口調(diào)用憑證超時時間,單位(秒) |
refresh_token | 用戶刷新access_token |
openid | 授權(quán)用戶唯一標識 |
scope | 用戶授權(quán)的作用域,使用逗號(,)分隔 |
錯誤返回樣例:
{"errcode":40030,"errmsg":"invalid refresh_token"}
1、Appsecret 是應(yīng)用接口使用密鑰,泄漏后將可能導(dǎo)致應(yīng)用數(shù)據(jù)泄漏、應(yīng)用的用戶數(shù)據(jù)泄漏等高風(fēng)險后果;存儲在客戶端,極有可能被惡意竊?。ㄈ绶淳幾g獲取Appsecret);
2、access_token 為用戶授權(quán)第三方應(yīng)用發(fā)起接口調(diào)用的憑證(相當于用戶登錄態(tài)),存儲在客戶端,可能出現(xiàn)惡意獲取access_token 后導(dǎo)致的用戶數(shù)據(jù)泄漏、用戶微信相關(guān)接口功能被惡意發(fā)起等行為;
3、refresh_token 為用戶授權(quán)第三方應(yīng)用的長效憑證,僅用于刷新access_token,但泄漏后相當于access_token 泄漏,風(fēng)險同上。
建議將secret、用戶數(shù)據(jù)(如access_token)放在App云端服務(wù)器,由云端中轉(zhuǎn)接口調(diào)用請求。
獲取access_token后,進行接口調(diào)用,有以下前提:
1. access_token有效且未超時;
2. 微信用戶已授權(quán)給第三方應(yīng)用帳號相應(yīng)接口作用域(scope)。
對于接口作用域(scope),能調(diào)用的接口有以下:
授權(quán)作用域(scope) | 接口 | 接口說明 |
---|---|---|
snsapi_base | /sns/oauth3/access_token | 通過code換取access_token、refresh_token和已授權(quán)scope |
/sns/oauth3/refresh_token | 刷新或續(xù)期access_token使用 | |
/sns/auth | 檢查access_token有效性 | |
snsapi_userinfo | /sns/userinfo | 獲取用戶個人信息 |
其中snsapi_base屬于基礎(chǔ)接口,若應(yīng)用已擁有其它scope權(quán)限,則默認擁有snsapi_base的權(quán)限。使用snsapi_base可以讓移動端網(wǎng)頁授權(quán)繞過跳轉(zhuǎn)授權(quán)登錄頁請求用戶授權(quán)的動作,直接跳轉(zhuǎn)第三方網(wǎng)頁帶上授權(quán)臨時票據(jù)(code),但會使得用戶已授權(quán)作用域(scope)僅為snsapi_base,從而導(dǎo)致無法獲取到需要用戶授權(quán)才允許獲得的數(shù)據(jù)和基礎(chǔ)功能。
接口調(diào)用方法可查閱《微信授權(quán)關(guān)系接口調(diào)用指南》
下面是獲取用戶個人信息,并dump出來
array(10) { ["openid"]=> string(28) "oJekJs2faTQ47FGjDOEIyOPMN97s" ["nickname"]=> string(15) "方倍工作室" ["sex"]=> int(1) ["language"]=> string(5) "zh_CN" ["city"]=> string(6) "海淀" ["province"]=> string(6) "北京" ["country"]=> string(6) "中國" ["headimgurl"]=> string(139) "http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0" ["privilege"]=> array(0) { } ["unionid"]=> string(28) "o4wcnw02YjFUYglZxV0LwcBkVF6Y"}
核心代碼如下
答:第三方通過code進行獲取access_token的時候需要用到,code的超時時間為10分鐘,一個code只能成功換取一次access_token即失效。code的臨時性和一次保障了微信授權(quán)登錄的安全性。第三方可通過使用https和state參數(shù),進一步加強自身授權(quán)登錄的安全性。
答:授權(quán)作用域(scope)代表用戶授權(quán)給第三方的接口權(quán)限,第三方應(yīng)用需要向微信開放平臺申請使用相應(yīng)scope的權(quán)限后,使用文檔所述方式讓用戶進行授權(quán),經(jīng)過用戶授權(quán),獲取到相應(yīng)access_token后方可對接口進行調(diào)用。
答:第三方頁面顏色風(fēng)格可能為淺色調(diào)或者深色調(diào),若第三方頁面為淺色背景,style字段應(yīng)提供"black"值(或者不提供,black為默認值),則對應(yīng)的微信登錄文字樣式為黑色。相關(guān)效果如下:
若提供"white"值,則對應(yīng)的文字描述將顯示為白色,適合深色背景。相關(guān)效果如下:
答:如果第三方覺得微信團隊提供的默認樣式與自己的頁面樣式不匹配,可以自己提供樣式文件來覆蓋默認樣式。舉個例子,如第三方覺得默認二維碼過大,可以提供相關(guān)css樣式文件,并把鏈接地址填入href字段
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display:none}
.impowerBox .status {text-align: center;}
相關(guān)效果如下:
以上是“如何使用微信開放平臺接口實現(xiàn)微信掃碼登錄的功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!