JS micro-letter scanning two-dimensional Code login site technical Principles _javascript Skills

Micro-letter scanning two-dimensional code login site is a micro-trust platform for the application of the Web site to implement a function of the interface. Micro-letter Open platform URL is https://open.weixin.qq.com

Preparatory work

Web application micro-letter login is based on the OAUTH2.0 protocol to build a micro-letter OAuth2.0 Authorization Login system.

In the micro-letter OAuth2. Before the OAuth2.0 authorized login access, register the developer account in the micro-credit open platform, and have an approved website application, and obtain the corresponding AppID and Appsecret, apply for the micro-letter login and through the audit, you can start the access process.

Authorization Process Description

Micro-letter OAuth2.0 authorized login to allow micro-users to use micro-letter identity Security Login to the Third-party application or Web site, in the micro-trust users authorized to log on to the OAuth2.0 of the third party application, the third party can obtain the user's interface call credentials (Access_token), through the Access_ Token can be used to invoke the authorization interface of the micro-trust platform, which can realize the basic open information of the micro-user and help the user realize the basic open function.

The OAuth2.0 authorization login currently supports the Authorization_code mode and is suitable for application authorization with server side. The overall process for this pattern is:

1.1. When a third party initiates a micro-letter authorization login request, the micro-trust user authorizes the third party to apply, the micro-letter will pull up the application or redirect to the third party website, and with the authorization temporary bill code parameter;

2.2. Through the code parameters plus AppID and Appsecret, through the API to exchange for Access_token;

3.3. Interface calls through Access_token to obtain user basic data resources or to help users achieve basic operations.

Get Access_token sequence diagram:

First Step: Request code

Before a third party uses a Web site application authorization login Notice that the appropriate page authorization scope (Scope=snsapi_login) has been obtained, you can open the following link on the PC side: Https://open.weixin.qq.com/connect/qrconnect ? appid=appid&redirect_uri=redirect_uri&response_type=code&scope=scope&state=state#wechat_ redirect

If you are prompted to "this link is not accessible", please check the parameters are filled in error, such as Redirect_uri domain name and audit when the authorized domain name is not inconsistent or scope is not snsapi_login.

Parameter description

Parameters	whether you must	Description
AppID	Is	Apply Unique identification
Redirect_uri	Is	redirect address, needs to be UrlEncode
Response_type	Is	Fill in the Code
Scope	Is	Apply an authorization scope, with multiple scopes separated by commas (,), Web application currently fills in Snsapi_login only
State	Whether	Used to keep the state of the request and callback, and the authorization request is brought back to the third party as is. This parameter can be used to prevent CSRF attacks (cross-station request forgery attacks), it is recommended that a third party with this parameter, can be set to a simple random number plus session for verification

Return description

Once the user allows authorization, it will be redirected to the Redirect_uri URL with the code and State parameters

Redirect_uri?code=code&state=state

If the user forbids authorization, then redirects will not take the code parameter, will only take the state parameter

Redirect_uri?state=state

Request sample

Login to a store website application

Https://passport.yhd.com/wechat/login.do

When opened, a store will generate the state parameter and jump to
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F% 2fpassport.yhd.com%2fwechat%2fcallback.do&response_type=code&scope=snsapi_login&state= 3d6be0a4035d839573b04816624a415e#wechat_redirect

Micro-trust users use micro-mail scan two-dimensional code and confirm login, the PC side will jump to

https://passport.yhd.com/wechat/callback.do?code=CODE&state=3d6be0a4035d839573b04816624a415e

In order to meet the needs of more customized web site, we also provide a second way to get code, supporting the Web site will be micro-letter login two-dimensional code embedded in their own pages, users use micro-credit scanning code to authorize the code back to the site through JS.

JS micro-Letter Login Main Purpose: The site wants users to be able to complete the login within the site, without jumping to the micro-domain login after the return, improve the fluency of micro-letter login and success rate. Web site embedded two-dimensional code micro-letter Login JS Implementation method:

Step 1: In the page, first introduce the following JS file (support HTTPS):

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

Step 2: In the need to use the micro-letter login to the local instance of the following JS objects:

var obj = new Wxlogin ({
ID: "Login_container", 
AppID: "", 
Scope: ", 
Redirect_uri:
" ", State:" ",
style: "",
href: ""

Parameter description

Parameters	whether you must	Description
Id	Is	Third-party page displays the container ID of the two-dimensional code
AppID	Is	Application of unique identification, after the micro-credit open platform submitted application audit to obtain
Scope	Is	Apply an authorization scope, with multiple scopes separated by commas (,), Web application currently fills in Snsapi_login only
Redirect_uri	Is	redirect address, needs to be UrlEncode
State	Whether	Used to keep the state of the request and callback, and the authorization request is brought back to the third party as is. This parameter can be used to prevent CSRF attacks (cross-station request forgery attacks), it is recommended that a third party with this parameter, can be set to a simple random number plus session for verification
Style	Whether	"Black" and "white" are available, and the default is a description of dark text. See the FAQ at the bottom of the document
Href	Whether	Custom style links, and third parties can override default styles based on actual requirements. See the FAQ at the bottom of the document

Step two: Get Access_token by code

Get Access_token by code

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

Parameter description

Parameters	whether you must	Description
AppID	Is	Application of unique identification, after the micro-credit open platform submitted application audit to obtain
Secret	Is	Application of key Appsecret, after the implementation of the micro-trust platform submitted application audit to obtain
Code	Is	Fill in the first step to get the code parameter
Grant_type	Is	Fill Authorization_code

Return description

The correct return:

{" 
Access_token": "Access_token", " 
expires_in": 7200, 
"Refresh_token": "Refresh_token",
"OpenID": "OPENID", 
"scope": "Scope" 
}

Parameters	Description
Access_token	Interface Call Credentials
Expires_in	Access_token interface Call voucher timeout time, in seconds
Refresh_token	User Refresh Access_token
Openid	Authorized User Unique identification
Scope	User-authorized scope, separated by commas (,)

Error return Sample:

{"Errcode": 40029, "errmsg": "Invalid Code"}

Refresh Access_token Expiration

Access_token is the invocation voucher that invokes the authorization relationship interface, because Access_token is short for a period of time (currently 2 hours), and can be refreshed using Refresh_token after the Access_token timeout, Access_ There are two types of token refresh results:

1.1. If the Access_token has timed out, then the Refresh_token will get a new access_token, the new timeout time;
2.2. If the Access_token does not time out, then the Refresh_token will not change the Access_token, but the timeout will be refreshed, equivalent to the renewal of Access_token.

Refresh_token has a longer period of validity (30 days), and when the Refresh_token expires, users need to be authorized again.

Request method

After you get the code for the first step, request the following link for Refresh_token:

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

Parameter description

Parameters	whether you must	Description
AppID	Is	Apply Unique identification
Grant_type	Is	Fill Refresh_token
Refresh_token	Is	Fill in the Refresh_token parameters obtained through Access_token

Return description

The correct return:

{" 
Access_token": "Access_token", " 
expires_in": 7200, 
"Refresh_token": "Refresh_token", 
"OpenID": "OPENID", 
"scope": "Scope" 
}

Parameters	Description
Access_token	Interface Call Credentials
Expires_in	Access_token interface Call voucher timeout time, in seconds
Refresh_token	User Refresh Access_token
Openid	Authorized User Unique identification
Scope	User-authorized scope, separated by commas (,)

Error return Sample:

{"Errcode": 40030, "errmsg": "Invalid Refresh_token"}

Step three: Call the interface via Access_token

After the Access_token is obtained, an interface call is made, with the following prerequisites:

1.1. Access_token valid and not timed out;

2.2. Micro-credit users have been authorized to use the corresponding interface scope (scope) of the third party application account.

For an interface scope (scope), the interface that can be invoked has the following:

Authorization Scope (SCOPE)	Interface	Interface Description
Snsapi_base	/sns/oauth2/access_token	Code in exchange for Access_token, Refresh_token and authorized scope
	/sns/oauth2/refresh_token	Refresh or renew Access_token use
	/sns/auth	Check Access_token validity
Snsapi_userinfo	/sns/userinfo	Get user's personal information

Where Snsapi_base belongs to the underlying interface, if the application already has other scope permissions, then the default has Snsapi_base permissions. With Snsapi_base, you can allow the mobile Web page authorization to bypass the Jump authorization login page to request a user-authorized action, jump directly to a third party Web page with an authorized temporary bill (code), but make the user authorized scope (scope) only for Snsapi_base, This results in the inability to acquire the data and underlying functionality that is required for user authorization.

Interface invocation method to access the micro-trust Interface invocation Guide

F.a.q

1. What is an authorized temporary bill (code)?

A: Third party through the code to obtain Access_token need to use, the code timeout is 10 minutes, a code can only be successful in exchange for a access_token that is invalid. The code's temporary and one-time guarantees the security of the micro-letter authorization login. Third parties can further enhance the security of their own authorized logins by using HTTPS and state parameters.

2. What is an authorization scope (scope)?

A: The authorization scope (scope) on behalf of the user authorized to the third party interface permissions, Third-party applications need to open to the micro-trust platform for the use of the appropriate scope, the use of the document described in the way to allow users to authorize, after the user authorization, access to the corresponding Access_token can be invoked before the

3. Web site embedded two-dimensional code micro-letter Login JS code in the Style field role?

A: The third party page color style may be light or deep tone, if the third party page is a light background, the style field should provide a "black" value (or do not provide a default value, then the corresponding micro-letter login text style is dark.) Related effects are as follows:

If you provide a "white" value, the corresponding text description will be displayed as a black color, suitable for dark backgrounds. Related effects are as follows:

4. Web site embedded two-dimensional code micro-letter Login JS code in the Role of href field?

A: If a third party feels that the default style provided by the micro-trust team does not match its own page style, you can provide a style file to override the default style. For example, if a third party feels that the default two-dimensional code is too large, you can provide the relevant CSS style file and fill the link address into the href field

• Impowerbox. qrcode {width:200px;}
• Impowerbox. Title {Display:none}
• Impowerbox. info {width:200px;}
• Status_icon {Display:none}
• Impowerbox. Status {text-align:center}

Related effects are as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.