Js WeChat scan QR code login website technical principles

Js scan QR code login website technical principle scan QR code login website is an open platform website application interface implementation function. Open Platform web site is https://open.weixin.qq.com

Preparations

Website application logon is an OAuth2.0 authorized logon System Based on OAuth2.0 protocol standards.

Before OAuth2. performs authorized OAuth2.0 login and access, register a developer account on the open platform, have a verified website application, and obtain the corresponding AppID and AppSecret, after applying for logon and passing the review, you can start the access process.

Authorization process description

OAuth2.0 authorized logon allows users to log on to a third-party application or website using their identities. After authorized users log on to a third-party application already connected to OAuth2.0, the third party can obtain the user's interface call credential (access_token ), access_token can be used to call the open platform authorization Link Interface, so as to obtain basic user open information and help users implement basic open functions.

OAuth2.0 authorized logon currently supports the authorization_code mode, which is suitable for applications with server-side authorization. The overall process of this mode is:

1.1. A third party initiates an authorized login request. After you authorize a third-party application, the application is pulled or redirected to a third-party website with the authorization temporary ticket code parameter;

2.2. Add AppID and AppSecret to the code parameter, and exchange access_token through the API;

3.3. Use access_token to call the interface to obtain basic user data resources or help users perform basic operations.

Obtain the sequence chart of access_token:

Https://open.weixin.qq.com/connect/qrconnect? Appid = secure & redirect_uri = https % 3A % 2F % 2Fpassport.yhd.com % 2 Fwechat % 2Fcallback. do & response_type = code & scope = snsapi_login & state = Consumer # wechat_redirect

After you scan the QR code and confirm the logon, the PC will jump

Https://passport.yhd.com/wechat/callback.do? Code = CODE & state = 3d6be0a4035d839573b04816624a424e

In order to meet the more customized requirements of the website, we also provide the second method to obtain the code, which allows the website to embed the login QR code into its own page, after authorization by scanning the code, the user returns the code to the website through JS.

Main Purpose of JS Logon: the website allows users to log on to the website without having to jump to the domain to log on and return. This improves the smoothness and success rate of logon. How to log on to JS with a QR code embedded in the website:

Step 1: first introduce the following JS files (supporting https) on the page ):