在這篇微信公眾平臺(tái)開發(fā)教學(xué)中，我們將介紹如何使用微信開放平臺(tái)介面實(shí)現(xiàn)微信掃碼登入的功能。?

準(zhǔn)備工作

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

在進(jìn)行微信OAuth2.在進(jìn)行微信OAuth2.0授權(quán)登入存取之前，在微信開放平臺(tái)註冊(cè)開發(fā)者帳號(hào)，並擁有一個(gè)已審核通過(guò)的網(wǎng)站應(yīng)用，並獲得相應(yīng)的AppID和AppSecret，申請(qǐng)微信登入且通過(guò)審核後，可開始接取流程。

授權(quán)流程說(shuō)明

微信OAuth2.0授權(quán)登入讓微信使用者使用微信身分安全登入第三方應(yīng)用程式或網(wǎng)站，在微信使用者授權(quán)登入已在接入微信OAuth2.0的第三方應(yīng)用後，第三方可以獲取到用戶的接口調(diào)用憑證（access_token），透過(guò)access_token可以進(jìn)行微信開放平臺(tái)授權(quán)關(guān)係接口調(diào)用，從而可實(shí)現(xiàn)獲取微信用戶基本開放信息和幫助用戶實(shí)現(xiàn)基礎(chǔ)開放功能等。

微信OAuth2.0授權(quán)登入目前支援a(chǎn)uthorization_code模式，適用於擁有server端的應(yīng)用程式授權(quán)。此模式整體流程為：

1. 1. 第三方發(fā)起微信授權(quán)登入要求，微信使用者允許授權(quán)第三方應(yīng)用程式後，微信會(huì)拉起應(yīng)用程式或重導(dǎo)向至第三方網(wǎng)站，並帶上授權(quán)臨時(shí)票據(jù)code參數(shù)；

2. 2. 透過(guò)code參數(shù)加上AppID和AppSecret等，透過(guò)API換取access_token;

3. #3. 透過(guò)access_token進(jìn)行介面調(diào)用，取得使用者基本資料資源或協(xié)助使用者實(shí)現(xiàn)基本操作。

取得access_token時(shí)序圖：

第一步：請(qǐng)求CODE

登入方倍工作室微信登入網(wǎng)站應(yīng)用程式

http://weixin.fangbei.org/login.php

開啟後，應(yīng)用程式會(huì)產(chǎn)生state參數(shù)，跳到以下連結(jié)：（登入前請(qǐng)注意已取得對(duì)應(yīng)網(wǎng)頁(yè)授權(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

若提示“該連結(jié)無(wú)法存取”，請(qǐng)檢查參數(shù)是否已填寫錯(cuò)誤，如redirect_uri的網(wǎng)域名稱與審核時(shí)填寫的授權(quán)網(wǎng)域不一致或scope不為snsapi_login。

參數(shù)說(shuō)明

##說(shuō)明appid是應(yīng)用唯一識(shí)別#redirect_uri是

參數(shù)	是否必須

##########################重定向地址，需要進(jìn)行UrlEncode############response_type#######是######填寫code###########scope## ####是######應(yīng)用授權(quán)作用域，擁有多個(gè)作用域以逗號(hào)（,）分隔，網(wǎng)頁(yè)應(yīng)用程式目前只填入snsapi_login即可############state# #####否######用於保持請(qǐng)求和回呼的狀態(tài)，授權(quán)請(qǐng)求後原樣帶回給第三方。此參數(shù)可用於防止csrf攻擊（跨站請(qǐng)求偽造攻擊），建議第三方帶上此參數(shù)，可設(shè)定為簡(jiǎn)單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)#############

返回說(shuō)明

此時(shí)，PC網(wǎng)站上顯示如下二維碼

?

用戶允許授權(quán)后，將會(huì)重定向到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)嵌到自己頁(yè)面中，用戶使用微信掃碼授權(quán)后通過(guò)JS將code返回給網(wǎng)站。

JS微信登錄主要用途：網(wǎng)站希望用戶在網(wǎng)站內(nèi)就能完成登錄，無(wú)需跳轉(zhuǎn)到微信域下登錄后再返回，提升微信登錄的流暢性與成功率。 網(wǎng)站內(nèi)嵌二維碼微信登錄JS實(shí)現(xiàn)辦法：

步驟1：在頁(yè)面中先引入如下JS文件（支持https）：

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

步驟2：在需要使用微信登錄的地方實(shí)例以下JS對(duì)象：

????????<script>
????????????var?obj?=?new?WxLogin({
??????????????id:?"login_container",
??????????????appid:?"wxed782be999f86e0e",
??????????????scope:?"snsapi_login",
??????????????redirect_uri:?encodeURIComponent("http://"?+?window.location.host?+?"/login.php"),
??????????????state:?Math.ceil(Math.random()*1000),
??????????????style:?"black",
??????????????href:?""});????????</script>

參數(shù)說(shuō)明

參數(shù)	是否必須	說(shuō)明
id	是	第三方頁(yè)面顯示二維碼的容器id
appid	是	應(yīng)用唯一標(biāo)識(shí)，在微信開放平臺(tái)提交應(yīng)用審核通過(guò)后獲得
scope	是	應(yīng)用授權(quán)作用域，擁有多個(gè)作用域用逗號(hào)（,）分隔，網(wǎng)頁(yè)應(yīng)用目前僅填寫snsapi_login即可
redirect_uri	是	重定向地址，需要進(jìn)行UrlEncode
state	否	用于保持請(qǐng)求和回調(diào)的狀態(tài)，授權(quán)請(qǐng)求后原樣帶回給第三方。該參數(shù)可用于防止csrf攻擊（跨站請(qǐng)求偽造攻擊），建議第三方帶上該參數(shù)，可設(shè)置為簡(jiǎn)單的隨機(jī)數(shù)加session進(jìn)行校驗(yàn)
style	否	提供"black"、"white"可選，默認(rèn)為黑色文字描述。詳見(jiàn)文檔底部FAQ
href	否	自定義樣式鏈接，第三方可根據(jù)實(shí)際需求覆蓋默認(rèn)樣式。詳見(jiàn)文檔底部FAQ

完整代碼如下

????
????????
????
????
????????
????????<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
????????<script>
????????????var?obj?=?new?WxLogin({
??????????????id:?"login_container",
??????????????appid:?"wxed782be999f86e0e",
??????????????scope:?"snsapi_login",
??????????????redirect_uri:?encodeURIComponent("http://"?+?window.location.host?+?"/login.php"),
??????????????state:?Math.ceil(Math.random()*1000),
??????????????style:?"black",
??????????????href:?""});????????</script>
????

頁(yè)面顯示效果如下?

?

第二步：通過(guò)code獲取access_token

通過(guò)code獲取access_token

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

參數(shù)說(shuō)明

參數(shù)	是否必須	說(shuō)明
appid	是	應(yīng)用唯一標(biāo)識(shí)，在微信開放平臺(tái)提交應(yīng)用審核通過(guò)后獲得
secret	是	應(yīng)用密鑰AppSecret，在微信開放平臺(tái)提交應(yīng)用審核通過(guò)后獲得
code	是	填寫第一步獲取的code參數(shù)
grant_type	是	填authorization_code

返回說(shuō)明

正確的返回：

{????"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ù)說(shuō)明

參數(shù)	說(shuō)明
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)該字段。

錯(cuò)誤返回樣例：

{"errcode":40029,"errmsg":"invalid code"}

刷新access_token有效期

access_token是調(diào)用授權(quán)關(guān)系接口的調(diào)用憑證，由于access_token有效期（目前為2個(gè)小時(shí)）較短，當(dāng)access_token超時(shí)后，可以使用refresh_token進(jìn)行刷新，access_token刷新結(jié)果有兩種：

1. 1. 若access_token已超時(shí)，那么進(jìn)行refresh_token會(huì)獲取一個(gè)新的access_token，新的超時(shí)時(shí)間；

2. 2. 若access_token未超時(shí)，那么進(jìn)行refresh_token不會(huì)改變access_token，但超時(shí)時(shí)間會(huì)刷新，相當(dāng)于續(xù)期access_token。

refresh_token擁有較長(zhǎng)的有效期（30天），當(dāng)refresh_token失效的后，需要用戶重新授權(quán)。

請(qǐng)求方法

獲取第一步的code后，請(qǐng)求以下鏈接進(jìn)行refresh_token：

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

參數(shù)說(shuō)明

參數(shù)	是否必須	說(shuō)明
appid	是	應(yīng)用唯一標(biāo)識(shí)
grant_type	是	填refresh_token
refresh_token	是	填寫通過(guò)access_token獲取到的refresh_token參數(shù)

返回說(shuō)明

正確的返回：

{?<br>"access_token":"ACCESS_TOKEN",?<br>"expires_in":7200,?<br>"refresh_token":"REFRESH_TOKEN",?<br>"openid":"OPENID",?<br>"scope":"SCOPE"?<br>}

參數(shù)	說(shuō)明
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)（,）分隔

錯(cuò)誤回傳範(fàn)例：

{"errcode":40030,"errmsg":"invalid refresh_token"}

#注意：

1、Appsecret 是應(yīng)用程式介面使用金鑰，洩漏後將可能導(dǎo)致應(yīng)用程式資料外洩、應(yīng)用程式的使用者資料外洩等高風(fēng)險(xiǎn)後果；儲(chǔ)存在客戶端，極有可能被惡意竊?。ㄈ绶淳幾g取得Appsecret）；

2、access_token 為使用者授權(quán)第三方應(yīng)用程式發(fā)起介面呼叫的憑證（相當(dāng)於使用者登入態(tài)），儲(chǔ)存在客戶端，可能出現(xiàn)惡意取得access_token 後導(dǎo)致的使用者資料外洩、使用者微信相關(guān)介面功能被惡意發(fā)起等行為；

3、refresh_token 為使用者授權(quán)第三方應(yīng)用的長(zhǎng)效憑證，僅用於刷新access_token，但洩漏後相當(dāng)於access_token 洩漏，風(fēng)險(xiǎn)同上。

?

建議將secret、用戶資料（如access_token）放在App雲(yún)端伺服器，由雲(yún)端中轉(zhuǎn)介面呼叫請(qǐng)求。

?

第三步：透過(guò)access_token調(diào)用介面

取得access_token後，進(jìn)行介面調(diào)用，有以下前提：

1. 1. access_token有效且未逾時(shí)；

2. 2. 微信使用者已授權(quán)給第三方應(yīng)用帳號(hào)對(duì)應(yīng)介面作用域（scope）。

對(duì)於介面作用域（scope），能呼叫的介面有以下：

授權(quán)作用網(wǎng)域（scope）	介面	介面說(shuō)明
snsapi_base	/sns/oauth2/access_token	透過(guò)code換取access_token、refresh_token和已授權(quán)scope
	/sns/oauth2/refresh_token	#刷新或續(xù)期access_token使用
	/sns/auth	檢查access_token效度
snsapi_userinfo	/sns/userinfo	取得使用者個(gè)人資訊

#

其中snsapi_base屬于基礎(chǔ)接口，若應(yīng)用已擁有其它scope權(quán)限，則默認(rèn)擁有snsapi_base的權(quán)限。使用snsapi_base可以讓移動(dòng)端網(wǎng)頁(yè)授權(quán)繞過(guò)跳轉(zhuǎn)授權(quán)登錄頁(yè)請(qǐng)求用戶授權(quán)的動(dòng)作，直接跳轉(zhuǎn)第三方網(wǎng)頁(yè)帶上授權(quán)臨時(shí)票據(jù)（code），但會(huì)使得用戶已授權(quán)作用域（scope）僅為snsapi_base，從而導(dǎo)致無(wú)法獲取到需要用戶授權(quán)才允許獲得的數(shù)據(jù)和基礎(chǔ)功能。

接口調(diào)用方法可查閱《微信授權(quán)關(guān)系接口調(diào)用指南》

?

下面是獲取用戶個(gè)人信息，并dump出來(lái)

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)?"中國(guó)"
??["headimgurl"]=>
??string(139)?"http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0"
??["privilege"]=>
??array(0)?{
??}
??["unionid"]=>
??string(28)?"o4wcnw02YjFUYglZxV0LwcBkVF6Y"}

?

核心代碼如下

?

F.A.Q

1. 什么是授權(quán)臨時(shí)票據(jù)（code）？

答：第三方通過(guò)code進(jìn)行獲取access_token的時(shí)候需要用到，code的超時(shí)時(shí)間為10分鐘，一個(gè)code只能成功換取一次access_token即失效。code的臨時(shí)性和一次保障了微信授權(quán)登錄的安全性。第三方可通過(guò)使用https和state參數(shù)，進(jìn)一步加強(qiáng)自身授權(quán)登錄的安全性。

2. 什么是授權(quán)作用域（scope）？

答：授權(quán)作用域（scope）代表用戶授權(quán)給第三方的接口權(quán)限，第三方應(yīng)用需要向微信開放平臺(tái)申請(qǐng)使用相應(yīng)scope的權(quán)限后，使用文檔所述方式讓用戶進(jìn)行授權(quán)，經(jīng)過(guò)用戶授權(quán)，獲取到相應(yīng)access_token后方可對(duì)接口進(jìn)行調(diào)用。

3. 網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中style字段作用？

答：第三方頁(yè)面顏色風(fēng)格可能為淺色調(diào)或者深色調(diào)，若第三方頁(yè)面為淺色背景，style字段應(yīng)提供"black"值（或者不提供，black為默認(rèn)值），則對(duì)應(yīng)的微信登錄文字樣式為黑色。相關(guān)效果如下：

?

若提供"white"值，則對(duì)應(yīng)的文字描述將顯示為白色，適合深色背景。相關(guān)效果如下：

?

4.網(wǎng)站內(nèi)嵌二維碼微信登錄JS代碼中href字段作用？

答：如果第三方覺(jué)得微信團(tuán)隊(duì)提供的默認(rèn)樣式與自己的頁(yè)面樣式不匹配，可以自己提供樣式文件來(lái)覆蓋默認(rèn)樣式。舉個(gè)例子，如第三方覺(jué)得默認(rèn)二維碼過(guò)大，可以提供相關(guān)css樣式文件，并把鏈接地址填入href字段

.impowerBox .qrcode {width: 200px;}<br>.impowerBox .title {display: none;}<br>.impowerBox .info {width: 200px;}<br>.status_icon {display：none}<br>.impowerBox .status {text-align: center;}?<br>

相關(guān)效果如下：

?

?

?

以上是微信開放平臺(tái)開發(fā)之網(wǎng)站應(yīng)用微信登入介紹的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！