简介
为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。
- 小程序使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
- 调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）。
看效果
微信授权.gif
获取openId.jpg
第一步：调用微信wx.login获取登录凭证code
wx.login(Object object)
调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。
请求参数
Object object
属性 类型 默认值 是否必填 说明 支持版本
timeout number 否 超时时间，单位ms >= 1.9.90
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功、失败都会执行）
返回结果
Object res
属性 类型 说明 支持版本
code string 用户登录凭证（有效期五分钟）。开发者需要在开发者服务器后台调用 code2Session，使用 code 换取 openid 和 session_key 等信息
代码示例
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://test.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
第二步：通过code 获取 openid 和 session_key
开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输。
接口地址：
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
请求参数
参数 必填 说明
appid 是 小程序唯一标识
secret 是 小程序的 app secret
js_code 是 登录时获取的 code
grant_type 是 填写为 authorization_code
返回参数
参数 说明
openid 用户唯一标识
session_key 会话密钥
expires_in 过期时长（默认7200）
第三步：实现源码
getOpenId.wxml
{{userInfo.nickName}}
getOpenId.js
var app = getApp()
var userInfo = null;
Page({
globalData: {
appid: 'wx416xxxx16a0a1',//appid需自己提供，此处的appid我随机编写
secret: '5498fcab2xxxx5df26bf854ba89',//secret需自己提供，此处的secret我随机编写
},
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function () {
var that = this;
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
//登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
wx.login({
success: function (res) {
if (res.code) {
console.log("res.code:" + res.code);
var d = that.globalData;//这里存储了appid、secret、token串
var l = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + d.appid + '&secret=' + d.secret + '&js_code=' + res.code + '&grant_type=authorization_code';
wx.request({
url: l,
data: {},
method: 'GET',
success: function (res) {
var obj = {};
obj.openid = res.data.openid;
console.log("openid:" + obj.openid);
console.log("session_key:" + res.data.session_key);
obj.expires_in = Date.now() + res.data.expires_in;
wx.setStorageSync('user', obj);//存储openid
}
});
} else {
console.log('获取用户登录态失败！' + res.errMsg)
}
}
});
}
,
getUserInfo: function (e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
getOpenId.wxml
{
"navigationBarTitleText": "微信授权并获取OpenId"
}
getOpenId.wxml
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
background: #f0145a;
width: 100%;
height: 300rpx;
}
.userinfo-btn{
margin-top: 50rpx;
background: none !important;
color: #fff !important;
font-size: 40rpx;
}
.userinfo-avatar {
width: 108rpx;
height: 108rpx;
margin: 40rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #fff;
}
贡献者
- IT实战联盟-Line
- IT实战联盟-咖啡
更多精彩内容可以关注“IT实战联盟”公众号哦~~~
image