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

Editor to share with you how to achieve uni-app WeChat Mini Programs authorization login, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. AppID related application and configuration 1. Appid acquisition method

Log in to Wechat public platform

Official website link: https://mp.weixin.qq.com/

For the first time, you need to click the registration button to register. If you have an account, you can directly scan and log in.

Official website Mini Program link:

2. AppID configuration

Enter WeChat Mini Programs id of the application in manifest.json

Second, access to basic user data

Here we will show you two kinds of api.

2.1. Get user information

You can use uni.getUserProfile to request user authorization to obtain user information, or you can use uni.getUserInfo to obtain user information

The user information obtained after successful authorization is in userInfo:

Page section:

Wechat users log in with one click

Js section:

Methods: {getUserInfo () {uni.getUserInfo ({provider: 'weixin', success: (res) = > {console.log (' getUserInfo', res);},});},}

Basic user data obtained (no openid= "unique identity of Wechat user)

2.2. Get user Information 2

You can use uni.getUserInfo to request user authorization to obtain user information

The page is the same as the js section:

GetUserInfo () {uni.getUserProfile ({desc: 'data can be synchronized after login', lang: 'zh_CN', success: (res) = > {console.log (' getUserProfile', res);},});}

Basic user data obtained (no openid= "unique identity of Wechat user)

Summary: uni.getUserProfile and uni.getUserInfo two api access to user data is basically the same, there is no openid= "Wechat user unique identity."

Third, call login api3.1. Log in to api

Using the uni.login method, the provider parameter enters the return value of 'weixin', success' if errMsg= "login:ok" represents success

WeChat Mini Programs will return a code string

3.2. Case code uni.login ({provider: 'weixin', success: (res) = > {console.log (' res-login', res); this.code = res.code; console.log ('code', res.code)) If (res.errMsg = = 'login:ok') {/ / TODO get code call backend interface with code parameter} 4. Get unique identification information 4.1. Official website document

Official website document

Use the acquired code to request Wechat login API to obtain openid and session_key

4.2. Brief description of interface

Request method: GET

APPID: the unique logo of Mini Program, which shows how to obtain it.

SECRET: the secret key of Mini Program's unique identity. For more information on how to obtain it with APPID above, it's just below him.

JSCODE: this front end calls uni.login to get

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

Fifth, bind users to log in

After getting the unique id of Wechat users, I can bind to users in my own system. What I do is add the weixinId field to the user table, jump to my own user binding interface, and update the weixinId of the user data of that line if the user chooses to bind Wechat. The next time a user logs in using Wechat, if a piece of user data can be queried through openId, indicating that it is already bound, log in to the user

5.1. Code case (not encapsulated)

Front end:

/ * * get user information * / getUserInfo () {/ / Show load box uni.showLoading ({title: 'loading',}); uni.getUserProfile ({desc: 'data can be synchronized after login', success: async (obj) = > {console.log ('obj', obj)) / / call action and request login API / / await this.login (obj); uni.login ({provider: 'weixin', success: (res) = > {console.log (' res-login', res); this.code = res.code; console.log ('code', res.code)) If (res.errMsg = = 'login:ok') {uni .request ({url:' http://127.0.0.1:8080/wxh6/wx/user/' + 'wx55822xxxx75e422' +' / login/' Data: {code: this.code,},}) .then (res) = > {/ / after obtaining openid and session_k Your own logical console.log ('authorization login', res [1] .data) Console.log (res [1] .data.openid); console.log (res [1] .data.session _ key); / / DoSomeThing. }); console.log ('res', res);}},});}, fail: () = > {uni.showToast ({title:' authorization cancelled', icon: 'error', mask: true,}) }, complete: () = > {/ / hide loading uni.hideLoading ();},});}

Back end part

@ GetMapping ("/ login") public String login (@ PathVariable String appid, String code) {if (StringUtils.isBlank (code)) {return "empty jscode";} final WxMaService wxService = WxMaConfiguration.getMaService (appid); try {WxMaJscode2SessionResult session = wxService.getUserService () .getSessionInfo (code); this.logger.info (session.getSessionKey ()) This.logger.info (session.getOpenid ()); / / TODO can add its own logic to associate business-related data return JsonUtils.toJson (session);} catch (WxErrorException e) {this.logger.error (e.getMessage (), e); return e.toString ();}} 5.2. Code case (encapsulation) / * * get user information * / getUserInfo () {/ / Show load box uni.showLoading ({title: 'loading',}); uni.getUserProfile ({desc: 'data can be synchronized after login', success: async (obj) = > {/ / this.userInfo = obj.userInfo / / call action to request login interface uni.login ({provider: 'weixin', success: async (res) = > {this.code = res.code; / / console.log (' login to get code', res.code)) If (res.errMsg = = 'login:ok') {await this.loginAuth ({userProfile: obj, appid:' wx558xxxxxxxxxxxxxxx2', code: this.code,});},}) }, fail: () = > {uni.showToast ({title: 'authorization revoked', icon: 'error', mask: true,});}, complete: () = > {/ / hide loading uni.hideLoading ();},});},}

User.js

/ * * Wechat user is authorized to log in with appid and code parameters, and call the backend API to obtain Openid * / export function loginAuth (data) {return request ({url:'/ wx/user/' + data.appid +'/ login/', data: {code: data.code,},});}

Vuex user module (user.js)

/ Wechat user is authorized to log in with appid and code parameters, and call the backend API to obtain Openid async loginAuth (context, data) {console.log ('data', data); const userInfo = data.userProfile; const {content: res} = await loginAuth ({appid: data.appid, code: data.code,}) / / parse the json object const userAuthInfo = JSON.parse (res) passed from the backend; const openid = userAuthInfo.openid; / / console.log ('sessionKey', userAuthInfo.sessionKey); console.log (' openid', openid); / / save it to vuex through commit this.commit ('user/setOpenid', userAuthInfo.openid); this.commit (' user/setUserInfo', JSON.parse (userInfo.rawData));}

The above is all the contents of the article "how to achieve the authorized login of uni-app WeChat Mini Programs". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.