小程序从服务器获取用户信息,微信小程序登陆流程及解析用户openid session_key，获取用户信息...

比眉伴天荒 2022-09-03 07:20 353阅读 0赞

为优化用户体验，使用 wx.getUserInfo 接口直接弹出受权框的开发方式将逐步再也不支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将没法弹出受权询问框，默认调用失败。正式版暂不受影响。开发者可以使用如下方式获取或展现用户信息：java

UnionID 机制说明

若是开发者拥有多个移动应用、网站应用、和公众账号(包括小程序)，可经过 UnionID 来区分用户的惟一性，由于只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号(包括小程序)，用户的 UnionID 是惟一的。换句话说，同一用户，对同一个微信开放平台下的不一样应用，unionid是相同的。因此咱们有时候须要获取这个UnionID算法

![4021438d997a995e9e0273ebda76674d.png][]

这个图简单的能够看作三部分数据库

1.微信小程序客户端json

2.微信官方服务器小程序

3.第三方服务器(这个能够看作是本身的)后端

具体步骤以下;微信小程序

1. 客户端得到code，并将code传给第三方服务端api

微信小程序端调用wx.login，获取登陆凭证(code)，并调用接口，将code发送到第三方客户端服务器

2. 第三方服务端用code换session\_key和openid微信

小程序端将code传给第三方服务器端，第三方服务器端调用接口，用code换取session\_key和openid

3. 第三方服务端生成新的session(3rd\_session)

第三方服务器端拿到请求回来的session\_key和openid，先留着，不能给客户端；而后用操做系统提供的真正随机数算法生成一个新的session，叫3rd\_session

4. 第三方服务端创建对应关系，并存储

将3rd\_session做为key，微信服务端返回的session\_key和openid做为值，保存起来

5. 第三方服务端将3rd\_session发送到客户端

客户端只拿到3rd\_session就够了，大人说话小孩别插嘴，小程序不须要知道session\_key和openid

6. 正常请求

小程序每次请求都将3rd\_session放在请求头里，第三方服务端解析判断合法性，并进行正常的逻辑处理

好了，废话很少说了，直接上代码：

3 登陆

//index.js

//获取应用实例

const app = getApp()

var OPEN\_ID = ''//储存获取到openid

var SESSION\_KEY = ''//储存获取到session\_key

var AVATARURL = ''

var NICKNAME = ''

var GENDER = ''

var PROVINCE = ''

var CITY = ''

Page(\{

/\*\*

\* 页面的初始数据

\*/

data: \{

//判断小程序的API，回调，参数，组件等是否在当前版本可用。

canIUse: wx.canIUse('button.open-type.getUserInfo'),

isHide: false,

\},

/\*\*

\* 生命周期函数--监听页面加载

\*/

onLoad: function () \{

var that = this;

var nickName ='';

var avatarUrl =''

// 查看是否受权

wx.getSetting(\{

success: function (res) \{

if (res.authSetting\['scope.userInfo'\]) \{

wx.getUserInfo(\{

success: function (res) \{

// 用户已经受权过,不须要显示受权页面,因此不须要改变 isHide 的值

that.setData(\{

nickName:res.userInfo.nickName,

avatarUrl:res.userInfo.avatarUrl

\})

\});

\} else \{

// 用户没有受权

// 改变 isHide 的值，显示受权页面

that.setData(\{

isHide: true,

\});

\},

/\*\*

\* 生命周期函数--监听页面初次渲染完成

\*/

onReady: function () \{

\},

/\*\*

\* 生命周期函数--监听页面显示

\*/

onShow: function () \{

\},

/\*\*

\* 生命周期函数--监听页面隐藏

\*/

onHide: function () \{

\},

/\*\*

\* 生命周期函数--监听页面卸载

\*/

onUnload: function () \{

\},

/\*\*

\* 页面相关事件处理函数--监听用户下拉动做

\*/

onPullDownRefresh: function () \{

\},

/\*\*

\* 页面上拉触底事件的处理函数

\*/

onReachBottom: function () \{

\},

/\*\*

\* 用户点击右上角分享

\*/

onShareAppMessage: function () \{

\},

bindGetUserInfo: function (e) \{

if (e.detail.userInfo) \{

//用户按了容许受权按钮

var that = this;

// 获取到用户的信息了，打印到控制台上看下

console.log("用户的信息以下：");

console.log(e.detail.userInfo);

NICKNAME = e.detail.userInfo.nickname;

GENDER = e.detail.userInfo.gender;

PROVINCE = e.detail.userInfo.province;

CITY = e.detail.userInfo.city;

//受权成功后,经过改变 isHide 的值，让实现页面显示出来，把受权页面隐藏起来

wx.login(\{

success: res => \{

// 获取到用户的 code 以后：res.code

console.log("用户的code：" + res.code)

// 能够传给后台，再通过解析获取用户的 openid

// 或者能够直接使用微信的提供的接口直接获取 openid ，方法以下：

wx.request(\{

url: 'https://api.weixin.qq.com/sns/jscode2session', //接口地址

data: \{

appid: '注册的appid',

secret: '生成的sercret',

js\_code: res.code,

grant\_type: 'authorization\_code'

\},

header: \{

'content-type': 'application/json' //默认值

\},

success: function (res) \{

console.log(res.data)

OPEN\_ID = res.data.openid;//获取到的openid

SESSION\_KEY = res.data.session\_key;//获取到session\_key

console.log(OPEN\_ID)

console.log(SESSION\_KEY)

//若是返回成功，则将OPEN\_ID和SESSION\_KEY提交请求给本地服务器

wx.request(\{

url: 'http://127.0.0.1:8080/wxapplogin/login.jsp',

data: \{

open\_id: OPEN\_ID,

session\_key: SESSION\_KEY,

gender: GENDER,

province: PROVINCE,

city: CITY

\},

header: \{

'content-type': 'application/json' //默认值

\},

method: 'GET'

\})

\});

that.setData(\{

isHide: false,

\});

\} else \{

//用户按了拒绝按钮

wx.showModal(\{

title: '警告',

content: '您点击了拒绝受权，将没法进入小程序，请受权以后再进入!!!',

showCancel: false,

confirmText: '返回受权',

success: function (res) \{

// 用户没有受权成功，不须要改变 isHide 的值

if (res.confirm) \{

console.log('用户点击了“返回受权”');

\});

\})

当点击按钮以后出发getUserInfo()函数，咱们在这个函数里面定义：

![a088e78ed694ed949fcc16777a9da6ea.png][]

经过发送临时的code请求到微信的服务器，咱们经过获取这个code再来解析用户的openid和session\_key

请求地址url为：

https://api.weixin.qq.com/sns/jscode2session

appid为注册小程序时给定的，每个微信小程序的appid也是惟一的，secret也会生成

当请求成功以后会从服务器返回openid和session\_key,这里也能够写成

https://api.weixin.qq.com/sns/jscode2session?appid='本身的appid'&secret='本身的密钥'

完成以后咱们来获取从服务器返回的值，若是请求成功，先打印出来，再传到本身的服务器上

![9b5c49ba5fcd5e2b398ba5e05842594a.png][]

OK,下面这个图是当点击按钮以后自动生成的code,在控制台答打印一下，每一次的都不同

![53b1c7c2863a649f7bb32ecd9124190a.png][]

![2cc547fa43d2b4823740101cc57f2a21.png][]

能够从控制台看到返回的数据，下面我们再把这个数据放到本身的服务器上保留之后用

![4a49f9fedb9d0d0ee20511ae9361ce34.png][]

这个url是本身的服务器地址，为了方便测试，咱们先用本地主机试一下，代码后续若是所有完成，再部署到服务器

这个地方有个主意事项，若是在开发者工具控制台出现如下错误：

![89b5384879376fefb57d144500a6dfc4.png][]

显示。。。不在request合法域名列表中，能够在微信公众后台添加该域名，也能够在开发者工具里面临时测验：点击不校验域名就OK了

![467d3477972590948a4f1fd697384f2f.png][]

因此若是点击index.wxml后控制台打印code并请求微信服务器，接着请求本身的服务器，就是这么个流程：

咱们后端用java接受一下：

![122ad88e85944423db5add50be6080d0.png][]

先打印到控制台，OK了，能够啊看到值传过去了，下面能够啊将值传到数据库里面，我就不用多写了，呀呀呀，有啥问题能够随时评论留言讨论

[4021438d997a995e9e0273ebda76674d.png]: /images/20220829/8c53207e2261459984f7e73434318ce3.png
[a088e78ed694ed949fcc16777a9da6ea.png]: /images/20220829/5c0fea202e6047bab827a5ecd86b4ac3.png
[9b5c49ba5fcd5e2b398ba5e05842594a.png]: /images/20220829/16ddb7e357514261ae71690554c99c08.png
[53b1c7c2863a649f7bb32ecd9124190a.png]: /images/20220829/356c369d15264e309cc7e4380f3259c2.png
[2cc547fa43d2b4823740101cc57f2a21.png]: /images/20220829/52e15d267b4f4f50ad623a42aa681d86.png
[4a49f9fedb9d0d0ee20511ae9361ce34.png]: /images/20220829/0910a93515b147c99ef822c5d20bd76c.png
[89b5384879376fefb57d144500a6dfc4.png]: /images/20220829/299fb64e5425435e9e758190faa5e96c.png
[467d3477972590948a4f1fd697384f2f.png]: /images/20220829/3cdd82ea7ab342278f23dc7a7699f3b0.png
[122ad88e85944423db5add50be6080d0.png]: /images/20220829/d1e72e5947b64336adf2c47d5737877a.png