微信小游戏登录流程

转载

思月行云 2023-01-05 11:04:18

微信小游戏登录流程【转】

花了好几天时间，总算解决了微信小游戏的登录。本来微信登录就比较复杂，再加上前前后后改了些接口，更是痛苦。网上找到的资料总是些零零散散有新有旧，微信自己的文档大致有一个流程，但一些要点和注意事项又语焉不详。今天就从头到尾整理一遍登录过程吧，算是造福一下本就很苦鳖的程序猿，顺便给自己也留个记录。

首先介绍下这个流程的背景，这样的话各位读者就可以判断，这对自己是不是有用了。当然，我相信在大多数情况下都是有用的。

一、这个流程是按照强联网游戏来设计的，客户端跟服务器通信用的是WebSocket，服务器端是Node.js。（如果你的服务器是PHP，那么流程可能更简化一些）

二、玩家以纯粹的新人身份进入游戏。（也就是，不假设玩家提前关注了相关公众号之类的）

三、最终目的是获取unionId。（如果你只想要openId，甚至连openId都不要，只要昵称头像，那可以更简单。关于unionId和openId的区别，这里就不啰嗦了，相信大家都很清楚。）

登录过程中比较麻烦的是用户信息授权按钮的处理，我没有找到合适的办法把它融合到流程中间，所以干脆就放最前面。在操作体验上，就是玩家第一次进入游戏时，需要先点一个【微信登录】的按钮，授权游戏获取用户信息，然后再开始游戏。当然，以后再进游戏的话，因为已经授权过，所以就不会再有这个按钮了。

那么下面就开始介绍流程了。

1、在客户端，调用wx.getSetting检查是否获得授权。如果已经授权，进入下一步；否则，调用wx.createUserInfoButton显示授权按钮。

这一步通常会在游戏的登录界面上，这个时候不会有【开始游戏】、【选择服务器】之类的，而是一个【微信登录】按钮。点击【微信登录】，微信会提示用户是否允许游戏访问他的信息。允许之后，【微信登录】消失，界面上会出现【开始游戏】或者【选择服务器】的画面。

如果用户拒绝的话，最好也给一个弹窗，解释为什么需要授权。

wx.getSetting({
  success(res)
  {
    // 已授权
    if (res.authSetting["scope.userInfo"])
    {
      // 进入下一步，比如【选择服务器】
    }
    // 显示授权按钮
    else
    {
      let sysInfo = wx.getSystemInfoSync();
      let button = wx.createUserInfoButton({
        type: "text",
        text: "微信登录",
        style: {
          left: sysInfo.windowWidth / 2 - 50,
          top: sysInfo.windowHeight / 2 - 30,
          width: 100,
          height: 60,
          backgroundColor: "#c7a976",
          color: "#5c5941",
          borderColor: "#5c5941",
          textAlign: "center",
          fontSize: 16,
          borderWidth: 4,
          borderRadius: 4,
          lineHeight: 60,
        }
      });
      button.onTap(function(res)
      {
        if (res.userInfo)
        {
          button.destroy();
          // 进入下一步，比如【选择服务器】
        }
        else
        {
          wx.showModal({
            title: "温馨提示",
            content: "《XXX》是一款在线对战游戏，需要您的用户信息登录游戏。",
            showCancel: false,
          });
        }
      });
      button.show();
    }
  }
});

2、对于需要分区跨服的游戏，显示【选择服务器】的界面。

    如果不需要分区，那么可以显示一个【开始游戏】的界面（你也许觉得这一步可以省掉，但是为了结构清晰，我建议还是留着）。

    这一步是游戏自己处理，跟微信无关，所以就没代码了。

3、连接游戏服务器；

在连接成功的回调里，调用wx.login，获得code；

再调用wx.getUserInfo，获得encryptedData和iv；

最后将code、encryptedData、iv发送给服务器。

因为用的是WebSocket，需要连接服务器的步骤，就在这里了。如果是PHP，可以省掉连接服务器，直接开始调用wx.login。

这一步获得的参数很重要：code将被用来获取sessionKey；而sessionKey、encryptedData、iv三者一起解出用户的敏感数据（包括unionId等）。

// 连接游戏服务器成功的回调。如果服务器用的是PHP，这里直接调用wx.login
onConnected: function()
{
    wx.login({
        success: function(res)
        {
            // res中包含code
            
            // 获取用户信息
            wx.getUserInfo({
                withCredentials: true,      // 必须在wx.login之后，这里才能为true
                success: function(result)
                {
                    // result中包含encryptedData和iv
                    
                    // 将res.code、result.encryptedData、result.iv发送到服务器
                },
                fail: function(result)
                {
                    // 错误处理
                },
            });
        },
        fail: function(res)
        {
            // 错误处理
        },
    });
 
},

4、在服务器上收到数据后，首先调用微信的接口 https://api.weixin.qq.com/sns/jscode2session
这一步需要code，以及你的小游戏AppID和AppSecret，这两个可以在微信公众平台管理后台拿到。

值得一提的是，在微信后台上，AppSecret只能查看一次，然后你需要自己把它保存在某个隐秘的地方。如果你忘了保存，那么只能再重新生成一个AppSecret。

调用成功之后，可以拿到sessionKey。（同时还有openId）

然后，用sessionKey以及之前客户端传来的encryptedData、iv，解密得到unionId、openId、昵称、头像等等。有了这些数据，就可以开始游戏里的登录了。

需要注意的是，小游戏要绑定了公众号才有unionId。

// 服务器端的代码
let https = require("https");
let iconv = require("iconv-lite");
// WXBizDataCrypt是微信提供的模块，用来执行解密
// 可以在https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/signature.html找到下载链接
let WXBizDataCrypt = require("../lib/WXBizDataCrypt.js");
 
// WX_APP_ID是小游戏AppID，WX_APP_SECRET是小游戏AppSecret，code由客户端发送上来
let url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + WX_APP_ID + "&secret=" + WX_APP_SECRET + "&js_code=" + code + "&grant_type=authorization_code";
let req = https.get(url, function(res)
{
    let datas = [];
    let size = 0;
    res.on("data", function(data)
    {
        datas.push(data);
        size += data.length;
    });  
    res.on("end", function()
    {
        let buff = Buffer.concat(datas, size);
        let result = iconv.decode(buff, "utf8");
        
        try
        {
            let d = JSON.parse(result);
            if (d.session_key)
            {
                try
                {
                    let wxCrypt = new WXBizDataCrypt(WX_APP_ID, d.session_key);
 
                    // encryptedData和iv都是客户端传递的数据
                    let res = wxCrypt.decryptData(encryptedData, iv);
 
                    // res中包含了openId、unionId、nickName、avatarUrl等等信息
                    // 注意，如果你的小游戏没有绑定微信公众号，这里可能也不会有unionId
                    // 微信登录完成，可以开始进入游戏了
                }
                catch (error)
                {
                    // 错误处理
                }
            }
            else
            {
                // 错误处理
            }
        }
        catch (error)
        {
            // 错误处理
        }
    });
});
req.on("error", function(err)
{
    // 错误处理
});

整个微信小游戏登录过程，大致就是这样了。最后顺便提一下，调用https://api.weixin.qq.com/sns/jscode2session这一步，因为是https请求，所以你可能会觉得，也可以直接在客户端调用。毕竟code就在客户端，AppID和AppSecret也是固定的。但微信并不建议这么做（想想看，微信甚至不会替你保存AppSecret，你愿意把它放客户端里吗？）
————————————————