Creator+微信小游戏:(3)微信openID获取(https、wss问题)

左丘涵畅
2023-12-01

在本次踩坑系列(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了!

 类似资料: