Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how WeChat Mini Programs authorizes to obtain user details". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how WeChat Mini Programs authorizes to obtain user details" can help you solve the problem.

Mini Program gets the user's profile picture, nickname openid and so on.

The first one uses wx.getUserInfo to directly get Wechat avatar, nickname.

Wx.getUserInfo ({success: function (res) {that.setData ({nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl,}),})

The second kind

When we log in with Mini Program wx.login API, we can't get more information by using wx.getUserInfo directly, such as the openid of Wechat users.

Official prompt: you need to send the acquired code to request to the backend API of Wechat, and perform operations such as user decryption before you can obtain it.

According to the documentation, you only need to make a get request to the following address:

Https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_codeappid and secret can be seen in the backend of WeChat Mini Programs. Js_code is the code parameter data obtained when logging in using wx.login, and grant_type does not need to be changed.

Js file

Var openId = (wx.getStorageSync ('openId')) if (openId) {wx.getUserInfo ({success: function (res) {that.setData ({nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl,})}, fail: function () {/ / fail console.log ("acquisition failed!") }, complete: function () {/ / complete console.log ("get user information completed!") }})} else {wx.login ({success: function (res) {console.log (res.code) if (res.code) {wx.getUserInfo ({withCredentials: true, success: function (res_user) {wx.request ({/ / backend interface address url: 'https://....com/wx/login',) Data: {code: res.code, encryptedData: res_user.encryptedData, iv: res_user.iv}, method: 'GET', header: {' content-type': 'application/json'} Success: function (res) {/ / this.globalData.userInfo = JSON.parse (res.data) That.setData ({nickName: res.data.nickName, avatarUrl: res.data.avatarUrl,}) wx.setStorageSync ('openId', res.data.openId) }})}, fail: function () {wx.showModal ({title: 'warning Notification', content:'if you click to deny authorization, you will not be able to display your personal information properly. Click OK to re-obtain authorization.' Success: function (res) {if (res.confirm) {wx.openSetting ({success: (res) = > {if (res.authSetting ["scope.userInfo"]) {/ if the user re-agrees to the authorization login wx.login ({success: function (res_login) ) {if (res_login.code) {wx.getUserInfo ({withCredentials: true) Success: function (res_user) {wx.request ({url: 'https://....com/wx/login', data: {code: res_login.code, encryptedData: res_user.encryptedData Iv: res_user.iv}, method: 'GET', header: {' content-type': 'application/json'} Success: function (res) {that.setData ({nickName: res.data.nickName, avatarUrl: res.data.avatarUrl,}) wx.setStorageSync ('openId', res.data.openId) }}))}) }}, fail: function (res) {}})}, complete: function (res) {}})}}, globalData: {userInfo: null}

In the background, the php framework is the laravel5.4 version.

Official documents:

Https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html

Wechat officially provides sample code for various programming languages (click to download). The interface names are the same for each language type. You can refer to the example for the calling method.

After downloading, introduce into the php file:

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.