In this WeChat public platform development tutorial, we will introduce how to use the WeChat open platform interface to implement the WeChat QR code login function.

Preparation

The website application WeChat login is a WeChat OAuth2.0 authorized login system built based on the OAuth2.0 protocol standard.

Before performing WeChat OAuth2. Before performing WeChat OAuth2.0 authorized login and access, register a developer account on the WeChat open platform, have an approved website application, and obtain the corresponding AppID and AppSecret. After applying for WeChat login and passing the review, you can start the access process.

Authorization process description

WeChat OAuth2.0 authorized login allows WeChat users to use WeChat identities to securely log in to third-party applications or websites. After the WeChat user has authorized login After accessing the third-party application of WeChat OAuth2.0, the third party can obtain the user's interface call credential (access_token). Through the access_token, the WeChat open platform authorization relationship interface can be called, thereby obtaining the basic open information of WeChat users and helping users. Implement basic open functions, etc.

WeChat OAuth2.0 authorized login currently supports authorization_code mode, which is suitable for application authorization with server side. The overall process of this model is:

1. 1. A third party initiates a WeChat authorized login request. After the WeChat user allows authorization of the third-party application, WeChat will launch the application or restart it. Direct to the third-party website and bring the authorization temporary ticket code parameter;

2. 2. Add AppID and AppSecret through the code parameter, and exchange for access_token through the API;

3. 3. Call the interface through access_token to obtain the user's basic data resources or help the user implement basic operations.

Get access_token sequence diagram:

Step 1: Request CODE

Log in to Fangbei Studio WeChat login website application

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

After opening, the application will generate state parameters, jump to the following link: (please log in before Note that the corresponding web page authorization scope (scope=snsapi_login) has been obtained)

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

If it prompts "The link cannot be accessed", please check whether the parameters are filled in Errors, such as the domain name of redirect_uri is inconsistent with the authorized domain name filled in during review or the scope is not snsapi_login.

Parameter Description

Parameter	Is it necessary	Description
appid	is the	application unique identifier
redirect_uri	is	Redirect address needs to be UrlEncode
response_type	is	fill in code
scope	is the	application authorization scope, with multiple scopes separated by commas (,), web applications currently only need to fill in snsapi_login
state	No	Used to maintain the status of the request and callback, and bring it back to the third party intact after the request is authorized. This parameter can be used to prevent CSRF attacks (cross-site request forgery attacks). It is recommended that third parties bring this parameter. It can be set to a simple random number plus session for verification

返回說明

此時，PC網站上顯示如下二維碼

?

用戶允許授權后，將會重定向到redirect_uri的網址上，并且?guī)蟘ode和state參數(shù)

http://weixin.fangbei.org/login.php?code=0317a2c31ccd5eadf1a7a8fffd4a7dbf&state=123

為了滿足網站更定制化的需求，我們還提供了第二種獲取code的方式，支持網站將微信登錄二維碼內嵌到自己頁面中，用戶使用微信掃碼授權后通過JS將code返回給網站。

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

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

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

步驟2：在需要使用微信登錄的地方實例以下JS對象：

????????<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ù)說明

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

頁面顯示效果如下?

?

第二步：通過code獲取access_token

通過code獲取access_token

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

參數(shù)說明

參數(shù)	是否必須	說明
appid	是	應用唯一標識，在微信開放平臺提交應用審核通過后獲得
secret	是	應用密鑰AppSecret，在微信開放平臺提交應用審核通過后獲得
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	接口調用憑證
expires_in	access_token接口調用憑證超時時間，單位（秒）
refresh_token	用戶刷新access_token
openid	授權用戶唯一標識
scope	用戶授權的作用域，使用逗號（,）分隔
?unionid	當且僅當該網站應用已獲得該用戶的userinfo授權時，才會出現(xiàn)該字段。

錯誤返回樣例：

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

刷新access_token有效期

access_token是調用授權關系接口的調用憑證，由于access_token有效期（目前為2個小時）較短，當access_token超時后，可以使用refresh_token進行刷新，access_token刷新結果有兩種：

1. 1. 若access_token已超時，那么進行refresh_token會獲取一個新的access_token，新的超時時間；

2. 2. 若access_token未超時，那么進行refresh_token不會改變access_token，但超時時間會刷新，相當于續(xù)期access_token。

refresh_token擁有較長的有效期（30天），當refresh_token失效的后，需要用戶重新授權。

請求方法

獲取第一步的code后，請求以下鏈接進行refresh_token：

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

參數(shù)說明

參數(shù)	是否必須	說明
appid	是	應用唯一標識
grant_type	是	填refresh_token
refresh_token	是	填寫通過access_token獲取到的refresh_token參數(shù)

返回說明

正確的返回：

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

參數(shù)	說明
access_token	接口調用憑證
expires_in	access_token接口調用憑證超時時間，單位（秒）
refresh_token	用戶刷新access_token
openid	授權用戶唯一標識
scope	用戶授權的作用域，使用逗號（,）分隔

Error return example:

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

Note:

1. Appsecret is the key used by the application interface. If leaked, it may lead to application data leakage, application user data leakage and other high-risk consequences; it is stored in the client terminal, it is very likely to be maliciously stolen (such as decompiling to obtain Appsecret);

2. access_token is the credential for users to authorize third-party applications to initiate interface calls (equivalent to user login status), stored on the client, and may Behaviors such as user data leakage caused by malicious acquisition of access_token and user WeChat-related interface functions being maliciously initiated;

3. refresh_token is a long-term credential for users to authorize third-party applications. It is only used to refresh access_token, but it is leaked. The latter is equivalent to access_token leakage, the risk is the same as above.

It is recommended that the secret and user data (such as access_token) be placed on the App cloud server, and the cloud transfer interface calls the request.

Step 3: Call the interface through access_token

After obtaining the access_token, make the interface call with the following prerequisites:

1. 1. The access_token is valid and has not expired;

2. 2. The WeChat user has authorized the corresponding interface scope (scope) of the third-party application account.

For interface scope (scope), the interfaces that can be called are the following:

Authorization function Domain(scope)InterfaceInterface Description##snsapi_base/sns/oauth2/refresh_token/sns/authsnsapi_userinfo

其中snsapi_base屬于基礎接口，若應用已擁有其它scope權限，則默認擁有snsapi_base的權限。使用snsapi_base可以讓移動端網頁授權繞過跳轉授權登錄頁請求用戶授權的動作，直接跳轉第三方網頁帶上授權臨時票據(jù)（code），但會使得用戶已授權作用域（scope）僅為snsapi_base，從而導致無法獲取到需要用戶授權才允許獲得的數(shù)據(jù)和基礎功能。

接口調用方法可查閱《微信授權關系接口調用指南》

?

下面是獲取用戶個人信息，并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"}

?

核心代碼如下

?

F.A.Q

1. 什么是授權臨時票據(jù)（code）？

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

2. 什么是授權作用域（scope）？

答：授權作用域（scope）代表用戶授權給第三方的接口權限，第三方應用需要向微信開放平臺申請使用相應scope的權限后，使用文檔所述方式讓用戶進行授權，經過用戶授權，獲取到相應access_token后方可對接口進行調用。

3. 網站內嵌二維碼微信登錄JS代碼中style字段作用？

答：第三方頁面顏色風格可能為淺色調或者深色調，若第三方頁面為淺色背景，style字段應提供"black"值（或者不提供，black為默認值），則對應的微信登錄文字樣式為黑色。相關效果如下：

?

若提供"white"值，則對應的文字描述將顯示為白色，適合深色背景。相關效果如下：

?

4.網站內嵌二維碼微信登錄JS代碼中href字段作用？

答：如果第三方覺得微信團隊提供的默認樣式與自己的頁面樣式不匹配，可以自己提供樣式文件來覆蓋默認樣式。舉個例子，如第三方覺得默認二維碼過大，可以提供相關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>

相關效果如下：

?

?

?

/sns/oauth2/access_token	Exchange access_token, refresh_token and authorized scope through code
	Refresh or renew access_token usage
	Check access_token validity
/sns/userinfo	Get user personal information

The above is the detailed content of Introduction to WeChat login for website applications developed by WeChat open platform. For more information, please follow other related articles on the PHP Chinese website!