在本次踩坑系列(1)中,你已经成功获取到了微信的昵称和头像。
现在问题来了。你要把微信用户存入自己的数据库。主码是什么?
用昵称?太多重复了。用头像url?长的逆天!且用户头像是可以换的!
所以你去查官方文档,发现一个词,openid。这个是唯一的。
兴奋过后,你就该进坑了。因为openid不open,想要拿到手还真不容易。
1、window.wx.login
使用标准的授权代码。注意,这里和之前获取昵称相比区别在于:
1、使用window.wx.login登录。注意这个登录其实目的只有1个:获取code。这个code将用于后续与腾旭服务器的的对话。
2、使用window.wx.getSetting确定用户已经主动授权。如果没有,则是之前教程(1)讲过的弹出按钮。如果授权了,则可以获取到昵称了,然后进行后续的操作。
3、注意getSetting返回的res结构里的iv、signature、encryptedData,后续都要送到。
4、window.wx.createUserInfoButton创建了一个全屏大小的按钮。为什么要这样呢?因为微信要求这个授权必须是用户主动点击按钮发起。因此,你在设计UI的时候要注意,加载第一个界面的时候就要执行TestLogin,然后再设计一个“登录”按钮,用户点击这个按钮的时候,其实点击的是createUserInfoButton这个全屏按钮,开始授权了!
注意所有请求都是异步的。成功后调用回调函数进行后续处理。
TestLogin() {
let sysInfo = window.wx.getSystemInfoSync();
let width = sysInfo.screenWidth;//获取微信界面大小
let height = sysInfo.screenHeight;
window.wx.login({
success: (res) => {
if (res.code) {
//console.log("res.code=====", res.code);
myglobal.wx.code = res.code;//向服务端传递code用于获取微信小游戏的用户唯一标识
window.wx.getSetting({
success(res) {
console.log(res.authSetting);
if (res.authSetting["scope.userInfo"]) {
console.log("用户已授权");
window.wx.getUserInfo({
success(res) {
//console.log("res ======" + JSON.stringify(res));
myglobal.wx.session = res;
//此时可进行登录操作
myglobal.loginNode.emit('wx_login_ready')
}
});
} else {
console.log("用户未授权");
let button = window.wx.createUserInfoButton({
type: 'text',
text: '',
style: {
left: 0,
top: 0,
width: width,
height: height,
backgroundColor: '#00000000',//最后两位为透明度
color: '#ffffff',
fontSize: 20,
textAlign: "center",
lineHeight: height,
}
});
button.onTap((res) => {
if (res.userInfo) {
console.log("用户授权:", res);
myglobal.wx.userInfo = res.userInfo;
//此时可进行登录操作
myglobal.loginNode.emit('wx_login_ready')
button.destroy();
} else {
console.log("用户拒绝授权:", res);
}
});
}
}
})
} else {//if (res.code)
console.log('登录失败!' + res.errMsg)
}
},
});//window.wx.login
},
2、auth.code2Session
现在你拿到code了。下一步是调用 auth.code2Session 接口,换取 用户唯一标识 OpenID和会话密钥 session_key。
官网文档只有一句话:
GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
意思就是让你自己去填空构造一个get请求,成功后就把OpenID和session_key给你。
主要填写这3个地方:
APPID、SECRET:在公众号开发者平台可以获取到。
JSCODE:就是前面拿到的code。
官方要求是让服务器来完成验证。因此正确的做法是自己再做一个服务器,小游戏客户端把code发送给服务器,让服务器发送get请求。
我这里是使用node做服务器,代码大致如下:
exports.getWXOpenID = function(data, cb){
var wxUrl = "https://api.weixin.qq.com/sns/jscode2session?appid=" +
defines.appid + "&secret=" +
defines.secret + "&js_code=" +
data.code + "&grant_type=authorization_code";
console.log(wxUrl)
request(wxUrl, (err, res, body)=>{
if (!err && res.statusCode == 200) {
console.log(err + ': ' + JSON.stringify(body));
body = JSON.parse(body)
var session_key = body.session_key
var openid = body.openid
cb(openid)
}else{
cb(null)
}
})
}
服务器get请求
服务器用node来写的话如下:
const request = require('request')
const defines = require("./defines.js")
exports.getWXOpenID = function(data, cb){
var wxUrl = "https://api.weixin.qq.com/sns/jscode2session?appid=" +
defines.appid + "&secret=" +
defines.secret + "&js_code=" +
data.code + "&grant_type=authorization_code";
console.log(wxUrl)
request(wxUrl, (err, res, body)=>{
if (!err && res.statusCode == 200) {
console.log(err + ': ' + JSON.stringify(body));
body = JSON.parse(body)
var session_key = body.session_key
var openid = body.openid
cb(openid)
}else{
cb(null)
}
})
}
这样,终于获取到了openID了!