小程序的登录模块搭建思路，wx.api的使用

sunshine_
313 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

微信登录-流程分析

目标

了解微信登录流程

微信登录流程

  1. 直接在前端调用微信接口登录，一般需要code(api获取)，AppID(小程序ID)，AppSecret(小程序密钥)访问微信服务器，成功返回：1. openid是用户标识 2. session_key是解密用的（UnionID解密等） 不建议客户端直接调用微信接口登录（不安全）。
  2. 调用自己的服务器接口（会对接微信服务器）

名词解释:

  • code 临时登录凭证, 有效期五分钟, 通过 wx.login() 获取
  • session_key 会话密钥, 服务端通过 code2Session 获取
  • openId 用户在该小程序下的用户唯一标识, 永远不变, 服务端通过 code 获取
  • unionId 用户在同一个微信开放平台帐号(公众号, 小程序, 网站, 移动应用)下的唯一标识, 永远不变
  • appId 小程序唯一标识
  • appSecret 小程序的 app secret, 可以和 code, appId 一起换取 session_key

其他名词

  • rawData 不包括敏感信息的原始数据字符串，用于计算签名
  • encryptedData 包含敏感信息的用户信息, 是加密的
  • signature 用于校验用户信息是否无篡改
  • iv 加密算法的初始向量

扩展阅读：微信登录

微信登录-实操

目标

获取微信用户信息登录

接口：/api/public/v1/users/wxlogin

步骤

  1. 通过getUserProfile方法，获取微信用户信息
  2. 使用微信用户信息来调用ugo的接口登录，获取token
  3. 根据登录接口文档所需参数，调用接口

/packone/auth/index.vue

<view>
  <button
+    @click="getUserInfo"
     type="primary">
    微信登录
  </button>
</view>

async getUserInfo () {
  const [error, userInfo] = await uni.getUserProfile({ desc: '获取微信用户信息' })
  if (!error) {
    console.log(userInfo)
    this.login(userInfo)
  }
},

// 调用接口登录
async login(user) {
  // 登录所需参数
  const { encryptedData, iv, rawData, signature } = user;
  // 微信用户登录凭证=》code
  const [err, data] = await uni.login();
  if (!err) {
    let res = await this.request({
      url: "/api/public/v1/users/wxlogin",
      method: "post",
      data: {
        encryptedData,
        iv,
        rawData,
        signature,
        code: data.code
      }
    });
    console.log(res);
  }
}

注意⚠️：

查看调用结果是400，无效的登录凭证code

如果登录失败

登录需要的后端接口appid: wx38d8faffac4d34d2（需要该appid拥有者添加开发者权限）

调用失败，是由于当前开发者AppID和服务器端使用的不一致造成

实际工作中，开发小程序=》向公司提供自己的微信号，管理员添加开发者权限=》使用公司的

appId进行小程序的开发

需要使用和后端接口一致的 appid

微信登录-保存token

目标

微信登录成功存储token

步骤

  1. 存储token到本地
  2. 返回到上一页

/packone/auth/index.vue

  • 获取code
async onLoad () {
  const [error, data] = await uni.login()
  if (!error) {
    console.log(data)
    // code参数存储到this
    this.code = data.code
  }
},
  • 传入用户信息和code登录
// 调用接口登录·
async login (user) {
  // 登录所需参数
  const { encryptedData, iv, rawData, signature } = user
  // 微信用户登录凭证=》code
  // const [err, data] = await uni.login()
  let { msg, data } = await this.request({
    url: "/api/public/v1/users/wxlogin",
    method: "post",
    data: {
      encryptedData,
      iv,
      rawData,
      signature,
      code: this.code
    }
  })
  // 存储token，返回上次访问页面
  uni.setStorageSync("token", data.token)
  uni.navigateBack()
}

注意⚠️：如果出现Error: Illegal Buffer错误说明

导致问题的原因是：session_key没有及时更新

在调用wx.login()之前调用了wx.getUserInfo()。在调用getUserInfo()时将获取到 iv 和encryptedData 传给后台，而后调用login()，此时的session_key可能会被新的session_key覆盖，就会导致后台在对数据解密时使用新的session_key去解密旧的encryptedData，如此就会Illegal Buffer报错。

解决：提前调用uni.login()

avatar
文章
阅读
粉丝