乐趣区

微信小程序获取用户的 OpenId (附前端代码)

OpenId 是什么?openid 是表示用户在你的当前应用中的唯一标识, 比如小程序,微信公众号等,这些都算是一个应用,如果你有多个应用,同一个用户的 openId 可能并不相同
** 下图是获取 OpenId 的过程微信的官方文档和时序图 **

** 小程序登录的时序图 **

思路:

首先调用 wx.login({}) 获取登录凭证(code)
调用接口前,需要把微信小程序的 appid 和 secret 告知后端
用拿到的 code 换取 openid

实例:
App({
onLaunch: function() {
var self = this;
// 展示本地存储能力
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)

/** 重点来了 ****************
|
|
|
|
*********/
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
var Params = {
code: res.code, // 临时登录凭证
key: self.globalData.MD5Key
};
// 生成加密 key
Params.key = self.MD5(Params.code + “&” + self.getNowTime() + “&” + Params.key);
wx.request({
url: ‘https://testurl/api/test/GetOpenId’, // 此处填写第三方的接口地址
data: ‘=’ + JSON.stringify(Params),
header: {
‘content-type’: ‘application/json’
},
method: ‘POST’, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function(res) {
var openid = res.data.RntData.openid // 返回 openid
self.globalData.openid = openid;
console.log(openid);
}
})
}
})
/** 重点结束
|
|
|
|
********************************/
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting[‘scope.userInfo’]) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo

// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
}
})
是不是很好奇,为什么会多了一步,用第三方服务器去访问微信接口的过程呢?
如果 appid 和 secret 存在本地或者前端直接去获取,很容易被抓包从而导致用户信息泄露,因此,用第三方服务器去请求微信接口,能确保 openID 的安全性

退出移动版