⼩程序登录流程及解析⽤户openidsession_key,获取⽤
户信息
为优化⽤户体验,使⽤ wx.getUserInfo 接⼝直接弹出授权框的开发⽅式将逐步不再⽀持。从2018年4⽉30⽇开始,⼩程序与⼩游戏的体验版、开发版调⽤ wx.getUserInfo 接⼝,将⽆法弹出授权询问框,默认调⽤失败。正式版暂不受影响。开发者可使⽤以下⽅式获取或展⽰⽤户信息:
el表达式获取session中的值
UnionID 机制说明
如果开发者拥有多个移动应⽤、⽹站应⽤、和公众帐号(包括⼩程序),可通过 UnionID 来区分⽤户的唯⼀性,因为只要是同⼀个开放平台帐号下的移动应⽤、⽹站应⽤和公众帐号(包括⼩程序),⽤户的 UnionID 是唯⼀的。换句话说,同⼀⽤户,对同⼀个开放平台下的不同应⽤,unionid是相同的。所以我们有时候需要获取这个UnionID
这个图简单的可以看做三部分
1.⼩程序客户端
2.官⽅服务器
3.第三⽅服务器(这个可以看做是⾃⼰的)
具体步骤如下;
1. 客户端获得code,并将code传给第三⽅服务端
⼩程序端调⽤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放在请求头⾥,第三⽅服务端解析判断合法性,并进⾏正常的逻辑处理
好了,废话不多说了,直接上代码:
1 <!--index.wxml-->
2 <view class='content'>
3  <button open-type='getUserInfo' type='primary' size='default' bindtap="getUserInfo">登录</button>
4 </view>
//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('UserInfo'),
isHide: false,
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function () {
var that = this;
var nickName ='';
var avatarUrl =''
// 查看是否授权
success: function (res) {
if (res.authSetting['scope.userInfo']) {
success: function (res) {
// ⽤户已经授权过,不需要显⽰授权页⾯,所以不需要改变 isHide 的值
that.setData({
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.der;
PROVINCE = e.detail.userInfo.province;
CITY = e.detail.userInfo.city;
//授权成功后,通过改变 isHide 的值,让实现页⾯显⽰出来,把授权页⾯隐藏起来      wx.login({
success: res => {
// 获取到⽤户的 code 之后:de
console.log("⽤户的code:" + de)
// 可以传给后台,再经过解析获取⽤户的 openid
// 或者可以直接使⽤的提供的接⼝直接获取 openid ,⽅法如下:
url: 'api.weixin.qq/sns/jscode2session', //接⼝地址
data: {
appid: '注册的appid',
secret: '⽣成的sercret',
js_code: de,
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: '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: '返回授权',
confirmText: '返回授权',
success: function (res) {
// ⽤户没有授权成功,不需要改变 isHide 的值
if (firm) {
console.log('⽤户点击了“返回授权”');
}
}
});
}
}
})
当点击按钮之后出发getUserInfo()函数,我们在这个函数⾥⾯定义:
通过发送临时的code请求到的服务器,我们通过获取这个code再来解析⽤户的openid和session_key 请求地址url为:
api.weixin.qq/sns/jscode2session
appid为注册⼩程序时给定的,每⼀个⼩程序的appid也是唯⼀的,secret也会⽣成
当请求成功之后会从服务器返回openid和session_key,这⾥也可以写成
api.weixin.qq/sns/jscode2session?appid='⾃⼰的appid'&secret='⾃⼰的密钥'
完成之后我们来获取从服务器返回的值,如果请求成功,先打印出来,再传到⾃⼰的服务器上
OK,下⾯这个图是当点击按钮之后⾃动⽣成的code,在控制台答打印⼀下,每⼀次的都不⼀样

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。