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

This article mainly explains "how to authorize WeChat Mini Programs to log in". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "WeChat Mini Programs how to authorize login".

Wechat authorization login process

Step 1: wx.login obtains the user's temporary login credential code

Step 2: wx.getUserInfo obtains encrypted data encryptedData and decryption parameter iv

Step 3: transfer the code, encryptedData and iv in step 1 and 2 to the developer's own server

Step 3: after obtaining the code, encryptedData and iv, the server uses the get method to request the following Wechat API

Https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

Appid: Mini Program appid

Secret: Mini Program key

Js_code: temporary login credential code obtained in step 1

Grant_type:'authorization_code'

The API will return openid and session_key. Note: unionId will also be returned for platforms that have been authorized by the user. If you just need unionId, that's it.

The official document says as follows:

If you have not authorized it, use encryptedData, session_key, iv, appid and secret to decrypt it. Download the official multilingual decryption example link:

UnionId decryption example

Contains C++ php python node

Step 4: imitate the example to decrypt and get the unionId, and do whatever you want ~

The following is the authorization login front-end code:

AuthLogin () {wx.login ({success: loginRes = > {let code = loginRes.code / / get user temporary code wx.getUserInfo ({success: function (res) {let encryptedData = res.encryptedData / / get encrypted data let iv = res.iv / / decryption parameter / / send the necessary decryption data to the server wx.request ({url: 'http://localhost',) Methods: 'POST', data: {code: code, encryptedData: encryptedData, iv: iv} Succeess: res = > {/ / the server first calls Wechat API to obtain session_key / / the platform that the user has authorized will directly return unionId / / if it has not been authorized, it will be decrypted with session_key / / if the decryption is successful, the server will return custom information according to logic}})}})})}})}

The above steps are feasible, but Wechat has adjusted the way users authorize.

The new authorization needs to call getUserInfo with the button component, so wx.login cannot be called before, but if you first call to obtain user information and then call wx.login, there will be an error in the decryption process. Guess that the corresponding session_key of code does not match the encryptedData obtained by getUserInfo.

Solution:

Call wx.login during the onLoad life cycle of the page, and the acquired code is stored in data for use when needed, but the code expiration time is 5 minutes. If the user stays on the page for too long and clicks authorization to log in, the code has expired. Therefore, the function to obtain code should be called every 4 minutes or so.

Wxml button authorization:

Login on Wechat

Js:

/ / get code onLoad: function (options) {this.getCodeTimer ()}, getCodeTimer () {wx.login ({success: res = > {this.data.code = res.code setTimeout (() = > {this.getCodeTimer ()}, 4 * 60 * 1000)} / / authorized login authLogin (event) {if (event.detail.errMsg = = 'getUserInfo:ok') {wx.showLoading () let reqData = {code: this.data.code, encryptedData: event.detail.encryptedData, iv: event.detail.iv} wx.request ({url:' http://localhost:8080', methods: 'POST', data: reqData Success: (res) = > {console.log (res) / / request completion}})} else {console.log ('user refuses authorization')}} Thank you for your reading The above is the content of "how WeChat Mini Programs authorizes login". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs authorized login, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.