微信小程序读取用户openid
场景
小程序中需要加入一个“收藏”功能。用户可以点击“我的收藏”看到自己收藏的文章。
在这个需求中,我们需要得到一个关联用户的唯一标示,那就是openid,在小程序中怎么获取用户的openid呢?
登录凭证(code)
首先我们调用wx.login(object)接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)。用户数据的加解密通讯需要依赖会话密钥完成。
onReady: function (options) {
const that = this;
wx.login({
// 获取code
success: function (res) {
var code = res.code; // 返回code
}
})
},
复制代码
获取openid和session_key
微信提供接口:https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
将APPID和SECRET换成自己小程序的。再将上面login接口返回的code传入JSCODE来调用接口;
这是一个 HTTPS 接口,开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。
onReady: function (options) {
const that = this;
wx.login({
// 获取code
success: function (res) {
var code = res.code; // 返回code
var APPID = ''; // 换成自己的APPID
var SECRET = '' // 换成自己的SECRET
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + APPID + '&secret=' + SECRET + '&js_code=' + code + '&grant_type=authorization_code';
wx.request({
url,
data: {},
headers: {
"content-type": "application/json",
},
success: function(res){
that.setData({
openid: res.openid
});
}
})
}
})
},
复制代码
在这段代码就完成了读取用户openid的操作,但是你会发现这段代码只能在微信开发者工具中调用成功【当然是在你勾选了不校验HTTPS合法域名】的情况下,勾选这个的好处就是我们在开发的时候可以使用本地服务,而不用HTTPS域名。
因为小程序的前端接口调用必须使用HTTPS,而且那么这段代码使用手机体验会出现什么问题呢?
接口报错:
request:fail url not in domain list
复制代码
报错提示说请求的url不在域名列表里,应该是还没有配置服务器域名;
没有配置那我们就进入小程序进行配置嘛。
登陆小程序 - 开发 - 开发中心 - 服务器域名【添加https://api.weixin.qq.com】这个域名
但是你会发现提示错误信息。
了解详情,可以看到这一大段说明;
这个说明为了安全性着想。我们读取用户的openid是不能放入前端来写的。我们必须把appid和Secret放在后端进行,然后通过接口的形式返回给前端。
后端读取openid
笔者用的是node写后端哈。使用request模块来发起url请求
// 获取openid
router.get('/getopenid', function(req,res, next){
var appId = ''; // 换成自己的APPID
var secret = ''; // 换成自己的secret
var params = URL.parse(req.url, true).query;
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' + params.code + '&grant_type=authorization_code';
request(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
console.log(body)
}
res.send(body);
})
})
复制代码
前端读取getopenid接口
修改前面读取openid的方法
onReady: function (options) {
const that = this;
wx.login({
//获取code
success: function (res) {
var code = res.code; //返回code
wx.request({
url: `${BASE_URL}/apis/getopenid`,
method: 'get',
data: {
code: code,
},
success: function (res) {
that.setData({
openid: res.data.openid
})
}
})
}
})
},
复制代码
这样就完美的实现了读取用户的openid。
记住不要把自己的appid和secret放在前端代码中。
如果有什么好的建议或者意见请关注公众号