A, in this paper,

This paper mainly introduces two points: 1. The process of website authorization of wechat open platform (non-principle) 2. How does VUE use wechat open platform to develop the function of wechat authorized login, and how to test it locally

Ii. Process of website authorization of wechat Open platform

1. General flow chart

2. How to obtain the TWO-DIMENSIONAL code

The preparatory work

First of all, before wechat OAuth2.0 authorized login access, register a developer account on wechat open platform, and have an approved website application, and obtain the corresponding AppID and AppSecret. After applying for wechat login and passing the approval, the access process can start. (The front end only needs the AppId)

The text start

There are two ways to get the TWO-DIMENSIONAL code, one is directly through the PC to open the link to get the jump page; The second is to introduce the wechat login JS file. By defining the wechat JS object, it can be obtained on this page without skipping to the page.

1. Open the link

The front open below link open.weixin.qq.com/connect/qrc…

Such as:Open.weixin.qq.com/connect/qrc…

2. By defining Js objects

Introduce the following JS file (HTTPS supported) to the page

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
Copy the code

Example the following JS object where you need to log in using wechat:

var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });
Copy the code

3. What is done after code scanning authorization

After the user grants authorization, the front end will redirect to the redirect_URI url with the code and state parameters

redirect_uri? code=CODE&state=STATECopy the code

The front-end calls the back-end interface to pass the code to the back-end, which does the following

  1. When the website background receives the code, it indicates that the wechat development platform agrees to the data request
  2. The website background requests wechat development platform to exchange access_token according to code parameters, AppID and AppSecret
  3. Wechat development platform validates the parameter and returns access_token
  4. After receiving the access_token, the website background can perform parameter analysis to obtain user account data

After processing, the back end returns the data required by the front end, and the front end decides whether to log in directly or jump back to the login page first to bind the account.

Iii. Specific implementation in VUE

This section describes how to obtain two-dimensional code by defining JS objects

SetWxerwma () {const s = document.createElement('script') s.type = 'text/javascript' s.rc = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' const wxElement = document.body.appendChild(s) const uri = '${window.location.origin}callback/wx/' // here is your callback uri wxelement. onload = () => {const obj = new WxLogin({id: Appid: this. appid, // appid wx******* scope: 'snsapi_login', // webpages default redirect_uri: Math.ceil(math.random () * 1000), // can be set to a simple random number and session to check style: 'black', // provide "black" and "white" options. Href: this.qrcodestyle // external CSS file url, requires HTTPS}) if (! obj) { console.error('wx-error') } }Copy the code

External CSS file URLS, which require HTTPS, which we don’t have, can be converted to base64 for writing

@charset "UTF-8"; .impowerBox .title {display: none; } .impowerBox .info {display: none; } .status_icon {display: none} .impowerBox .status {text-align: center; } // Base64 QRCodeStyle: 'data:text/ CSS; base64,QGNoYXJzZXQgIlVURi04IjsNCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogb m9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSANCg==`Copy the code

After the QR code is scanned and authorized, it will be called back to the uri configured, and the logic will be handled on this page by itself, depending on whether to log in directly or jump back to the login page for binding account first.

How to debug locally

Enter the wechat open platform, enter the management center, and click your application, as shown in the picture belowThe authorization callback field in the bottom development information is changed to ==localhost==

Note: After the local test, change the authorization callback field to the address on the line.

Iv. References

1. A pulse interviewer: Talk about the implementation principle behind wechat scanning code login? 2. Official documents of wechat Open platform