cocosCreator微信小游戏 之 登录流程(三)

creator版本： 3.8.0

语言： TypeScript

环境： Mac

流程

微信小游戏在微信平台中运行，第一步操作就是登录。在登录之后才能：

• 更方便的获取微信提供的用户身份标识
• 更方便的验证数据传递的合法性

在微信平台中，登录的流程图大致如下：

步骤：

1. 客户端调用 wx.login 接口获取 临时登录凭证code(时效5分钟)
2. 客户端调用 wx.request 接口将 code 发送给服务器
3. 服务器调用 auth.code2Session 接口 通过请求参数 appId+appSecret+code 向微信后台请求
4. 微信后台将 openId + session_key + unionId 反馈给服务器， 服务器可将这些数据进行存储
5. 服务器可通过 auto.checkSessionKey 接口验证 session_key 的合法性
6. 服务器告知客户端登录状态
7. 登录成功状态下，客户端可通过wx.request向服务器请求其他数据
8. 服务器通过session_key进行数据合法性验证或其他处理后，将数据返回给客户端

appId和appSecret

---

微信小程序的唯一的ID和唯一的密钥，在微信后台处，通过开发管理 -> 开发设置可获取

出于安全考虑：appId和AppSecret 都需要保密

auth.code2Session

---

该接口主要被服务器进行登录凭证校验。 返回的参数：

errcode的类型主要有：

session_key字段主要在服务器中使用，以wx.getUserInfo为例，接口返回的字段：

• rawData 不包括敏感信息的原始数据字符串，用于计算签名
• signature 使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息
• encryptedData 包括敏感数据在内的完整用户信息的加密数据
• iv 加密算法的初始向量

客户端可以将 rawData 和 signature 字段发送给服务器，然后服务器通过相同的算法加密，获取新的 signature, 两者比对，就可以检验数据的合法性了。

示例：

---

因能力限制，最后粘贴下客户端的逻辑实现相关：

• cocosCreator的登录页面，增加登录按钮
• 脚本中逻辑处理，实现：

public clickLogin(callBack?: any) {
  const wx = window['wx'];
  let object: any = {
    timeout: 10000,         // 超时时间毫秒
    success: (res) => {
      // 用户登录凭证，有效期5分钟
      let code = res.code;        
      console.log("登录获取凭证成功, code:", code);
      if (callBack) {
        callBack(code);
      }
    },
    fail: (err) => {
      console.log(`wx.login 失败, errorCode:${err.errno}, msg:${err.errMsg}`)
    },
  };
  wx.login(object);
}

更多内容参考：微信小游戏-登录态管理

最后，祝大家学习生活愉快!