微信小程序 wx.login解密出现乱码的问题解决办法

在微信小程序开发中，经常会用到 wx.login 方法获取用户登录凭证 code，然后将 code 发送给服务器进行解密验证。但是，在解密时可能会遇到解密出现乱码的问题，本文将详细讲解如何解决这个问题。

问题描述

当获取用户登录凭证 code 后，可以调用微信提供的 wx.getUserInfo 方法获取用户信息和 encryptedData（包括用户昵称、头像等信息）和 iv（解密算法的初始向量）。接下来，可以将这些信息发送给服务器进行解密。

以 wx.getUserInfo 返回的数据为例，其中的 encryptedData 和 iv 经过解码后还需要进行解密，否则会出现乱码的情况。示例代码：

wx.login({
  success: (res) => {
    const code = res.code;
    wx.getUserInfo({
      success: (res) => {
        const encryptedData = res.encryptedData;
        const iv = res.iv;

        wx.request({
          url: 'https://example.com/login',
          data: {
            code: code,
            encryptedData: encryptedData,
            iv: iv
          },
          success: (res) => {
            console.log(res.data);
          }
        });
      }
    });
  }
});

问题分析

出现乱码的原因是解密数据使用了错误的算法或密钥。在微信小程序中使用了 AES-128-CBC 算法解密数据，需要使用微信提供的 wx.pbkdf2 方法生成密钥和初始向量。

生成密钥和初始向量的示例代码：

const sessionKey = wx.getStorageSync('sessionKey');

wx.pbkdf2({
  algorithm: 'sha1',
  salt: 'abcd',
  iterations: 1,
  keyLen: 32,
  password: sessionKey,
  success: (res) => {
    const key = res.key;
    const iv = res.iv;
    // 使用 key 和 iv 解密数据
  }
});

解决方案

获取 session_key

在解密数据之前，需要先获取 session_key。可以在 wx.login 成功回调函数中获取 session_key 并存储到本地缓存中。

示例代码：

wx.login({
  success: (res) => {
    const code = res.code;
    wx.request({
      url: 'https://example.com/session',
      data: {
        code: code
      },
      success: (res) => {
        const sessionKey = res.data.session_key;
        wx.setStorageSync('sessionKey', sessionKey);
        // 获取 session_key 后执行解密操作
      }
    });
  }
});

生成密钥和初始向量

使用微信提供的 wx.pbkdf2 方法生成密钥和初始向量。参数包括算法、盐、迭代次数、期望输出长度和密钥材料。

示例代码：

const sessionKey = wx.getStorageSync('sessionKey');

wx.pbkdf2({
  algorithm: 'sha1',
  salt: 'abcd',
  iterations: 1,
  keyLen: 16,
  password: sessionKey,
  success: (res) => {
    const key = res.key;
    const iv = res.iv;
    // 使用 key 和 iv 解密数据
  }
});