Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use Wechat open platform interface to achieve Wechat scan login function, the article is very detailed, has a certain reference value, interested friends must read it!

Preparatory work

The website application Wechat login is a Wechat OAuth3.0 authorization login system based on OAuth3.0 protocol standards.

Wechat OAuth3 is under way. Before the Wechat OAuth3.0 authorized login access, register a developer account in the Wechat open platform, own an approved website application, and obtain the corresponding AppID and AppSecret. After applying for Wechat login and passing the examination, you can start the access process.

Authorization process description

Wechat OAuth3.0 authorization login allows Wechat users to use Wechat identity to securely log in to third-party applications or websites. After Wechat users are authorized to log in to third-party applications that have been connected to Wechat OAuth3.0, the third party can obtain the user's API call credential (access_token), and the Wechat open platform authorization relationship API can be called through access_token. Thus, it is possible to obtain the basic open information of Wechat users and help users to achieve basic open functions.

Wechat OAuth3.0 authorization login currently supports authorization_code mode, which is suitable for applications with server authorization. The overall process of the model is:

1. After a third party initiates a Wechat authorization login request, and after Wechat users are allowed to authorize a third-party application, Wechat will pull the application or redirect to the third-party website with the authorized temporary ticket code parameter

two。 Exchange for access_token through API through code parameters plus AppID and AppSecret

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

Get the access_token sequence diagram:

Step 1: request CODE

Log in to Fangbi Studio Wechat and log in to the website application.

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

When opened, the application will generate a state parameter and jump to the following link: (please note that you have obtained the appropriate web page authorization scope (scope=snsapi_login) before logging in)

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 you are prompted that "the link cannot be accessed", please check whether the parameters are entered incorrectly, such as the domain name of redirect_uri is inconsistent with the authorized domain name entered during the audit, or scope is not Snsapi _ login.

The parameter indicates whether the parameter must indicate whether appid is the unique identification of the application that redirect_uri is the redirect address, and the need to UrlEncoderesponse_type is that codescope is the authorized scope of the application, and multiple scopes are separated by commas (,). The web application can only enter snsapi_login to keep the status of the request and callback, and bring it back to the third party as is after the authorization request. This parameter can be used to prevent csrf attacks (cross-site request forgery attacks). It is recommended for third parties to take this parameter. It can be set to a simple random number plus session for verification and return instructions.

At this point, the following QR code is displayed on the PC website

Once authorization is allowed, the user will be redirected to the URL of redirect_uri with code and state parameters

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

In order to meet the more customized needs of the website, we also provide a second way to obtain code. We support the website to embed the Wechat login QR code into their pages. Users use Wechat code scanning authorization to return the code to the website through JS.

The main purpose of JS Wechat login: the website hopes that users can log in within the site, without having to jump to the Wechat domain to log in and then return, so as to improve the fluency and success rate of Wechat login. Website embedded QR code Wechat login JS implementation method:

Step 1: first introduce the following JS file (supporting https) on the page: step 2: instance the following JS object where you need to log in using Wechat: 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:"})

Parameter description

Whether the parameter must indicate that id is the container of the third-party page displaying the QR code. Idappid is the unique identification of the application. After the application is approved and approved by the Wechat open platform, scope is the authorized scope of the application, and multiple scopes are separated by commas (,). The web application can only fill in snsapi_login and redirect_uri is the redirect address. Whether UrlEncodestate is required is used to maintain the status of requests and callbacks. Bring it back to the third party as is after the authorization request. This parameter can be used to prevent csrf attacks (cross-site request forgery attacks). It is recommended that third parties take this parameter. It can be set to a simple random number plus session to verify whether style provides optional "black" and "white". The default is black text description. For more information, please see the link whether FAQhref customizes the style at the bottom of the document. A third party can override the default style according to the actual needs. For details, see FAQ at the bottom of the document.

The complete code is as follows

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: ""})

The display effect of the page is as follows

Step 2: get access_token through code

Obtain access_token through code

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

Parameter description: whether the parameter must indicate that appid is the unique ID of the application. The secret is the application key AppSecret after the application approval is submitted by the Wechat open platform, and the code is obtained after the application approval is submitted by the Wechat open platform. Enter the code parameter grant_type obtained in the first step. Enter the authorization_code return instructions.

Correct return:

{"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"}

Parameter description

The parameter indicates that the access_token API calls the credential expires_inaccess_token API calls the credential timeout, unit (seconds) refresh_token user refreshes the access_tokenopenid authorized user uniquely identifies the scope authorized by the scope user, and uses a comma (,) to separate the unionid if and only if the website application has obtained the user's userinfo authorization.

Sample error return:

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

Refresh access_token validity period

Access_token is the calling credential for calling the authorization relationship API. Due to the short validity period of access_token (currently 2 hours), when access_token times out, you can use refresh_token to refresh. There are two access_token refresh results:

1. If the access_token has timed out, then refresh_token will get a new access_token, a new timeout

two。 If the access_token does not time out, refresh_token will not change the access_token, but the timeout will be refreshed, which is equivalent to renewing the access_token.

Refresh_token has a long validity period (30 days). When the refresh_token expires, the user needs to re-authorize it.

Request method

After obtaining the code of the first step, request the following link to refresh_token:

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

Parameter description whether the parameter must indicate that appid is the unique identification of the application. "grant_type": enter "refresh_tokenrefresh_token". Enter the return description of the refresh_token parameter obtained through access_token.

Correct return:

{

"access_token": "ACCESS_TOKEN"

"expires_in": 7200

"refresh_token": "REFRESH_TOKEN"

"openid": "OPENID"

"scope": "SCOPE"

}

Parameter indicates that access_token API calls credential expires_inaccess_token API calls credential timeout, unit (seconds) refresh_token user refreshes access_tokenopenid authorized user uniquely identifies the scope authorized by scope user, separated by comma (,)

Sample error return:

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

Note:

1. Appsecret is the key used by the application interface, which may lead to high-risk consequences such as application data leakage, application user data leakage and so on. When stored in the client, it is very likely to be maliciously stolen (such as decompilation to obtain Appsecret)

2. The credentials that access_token authorizes the third-party application to initiate API calls (equivalent to the user's login status) are stored on the client, which may lead to user data leakage after malicious acquisition of access_token and malicious initiation of user Wechat-related interface functions.

3. Refresh_token authorizes the long-term credentials of third-party applications for users, which is only used to refresh access_token, but the leakage is equivalent to access_token leakage, and the risk is the same as above.

It is recommended to put secret and user data (such as access_token) on the App cloud server, where the request is called by the cloud transfer API.

Step 3: call the interface through access_token

After the access_token is obtained, the API is called with the following prerequisites:

1. Access_token is valid and does not time out

two。 Wechat users have been authorized to the corresponding interface scope (scope) of the third-party application account.

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

Authorized scope (scope) API indicates that snsapi_base/sns/oauth3/access_token exchanges access_token, refresh_token and authorized scope/sns/oauth3/refresh_token for refresh or renewal through code. Access_token uses / sns/auth to check access_token validity snsapi_userinfo/sns/userinfo to obtain user's personal information.

Snsapi_base belongs to the basic API. If the application already has other scope permissions, it has the snsapi_base permission by default. Using snsapi_base allows mobile web page authorization to bypass the action of jumping authorization login page to request user authorization, and directly jump to third-party web pages with authorized temporary ticket (code), but it will make the authorized scope (scope) of the user only snsapi_base, resulting in the inability to obtain data and basic functions that require user authorization.

The API calling method can be found in the Wechat Authorization relationship API call Guide.

The following is to obtain the user's personal information and dump it out.

Array (10) {["openid"] = > string (28) "oJekJs2faTQ47FGjDOEIyOPMN97s" ["nickname"] = > string (15) "Fang Bei Studio" ["sex"] = > int (1) ["language"] = > string (5) "zh_CN" ["city"] = > string (6) "Haidian" ["province"] = > string (6) "Beijing" ["country"] = > string (6) "China" ["headimgurl" "] = > string (139)" http://wx.qlogo.cn/mmopen/Q3auHgzwzM7zdkiaZFdM5qrwk1iaEESVjfhWVHNg22teOnfKSPpKDE0l2yfQm1hM9AeT8pO1BKElntEBZ7DxibzdteBp3H3yXESwPYUkhibNObs/0" ["privilege"] = > array (0) {} ["unionid"] = > string (28) "o4wcnw02YjFUYglZxV0LwcBkVF6Y"}

The core code is as follows

F.A.Q1. What is an authorized interim note (code)?

A: it is necessary for a third party to obtain access_token through code. The timeout of code is 10 minutes, and a code can only be successfully exchanged for access_token once. The temporary and one-time code ensures the security of Wechat authorized login. Third parties can further enhance the security of their authorized login by using https and state parameters.

two。 What is authorized scope (scope)?

A: authorization scope (scope) represents the interface permission authorized by the user to a third party. Third-party applications need to apply to the Wechat open platform for the permission to use the corresponding scope, and then use the method described in the document to allow the user to authorize the API. After the user authorization, the appropriate access_token can be obtained before calling the API.

3. Website embedded QR code Wechat login JS code in the role of style field?

Answer: the color style of third-party pages may be light or dark. If the third-party page has a light background, the style field should provide a "black" value (or not, black is the default), then the corresponding Wechat login text style is black. The related effects are as follows:

If a "white" value is provided, the corresponding text description will be displayed in white, suitable for a dark background. The related effects are as follows:

4. Website embedded QR code Wechat login JS code in the role of href field?

A: if a third party feels that the default style provided by the Wechat team does not match its own page style, it can provide its own style file to override the default style. For example, if a third party thinks that the default QR code is too large, you can provide the relevant css style file and fill in the link address in the href field.

.impowerBox .qrcode {width: 200px;}

.impowerBox .title {display: none;}

.impowerBox .info {width: 200px;}

.status _ icon {display:none}

.impowerBox .status {text-align: center;}

The related effects are as follows:

The above is all the contents of this article entitled "how to use Wechat Open platform Interface to achieve Wechat Code scan login function". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.