uni小程序实现微信登录 uni-app 微信小程序

在uni-app中实现微信登录，需要遵循以下步骤：

1、注册微信开放平台账号：

- 访问 [微信公众平台](https://mp.weixin.qq.com/) 并注册账号。

- 创建小程序并获取AppID和AppSecret。

2、配置小程序的合法域名：

- 在微信公众平台的“设置”->“开发设置”中，设置服务器的合法域名。

3、获取用户授权：

- 在小程序中需要使用微信登录时，需要引导用户进行授权。

4、前端代码实现：

- 在uni-app项目中，使用uni.login和uni.getUserInfo等API获取用户信息。

5、后端代码实现：

- 使用用户的code换取session_key。

6、存储用户信息：

- 将用户信息存储到数据库中。

7、前端发起登录请求：

- 使用uni-app的API获取用户授权。

8、后端处理登录请求：

- 后端接收前端请求，使用code换取session_key，然后生成token返回给前端。

9、前端处理登录响应：

- 前端接收后端返回的token，并进行存储。

10、使用token进行用户鉴权：

- 在后续的请求中，携带token进行用户鉴权。

具体实现步骤如下：

1. 注册微信开放平台账号

访问微信公众平台，注册账号并创建小程序，获取AppID和AppSecret。

2. 配置小程序的合法域名

在微信公众平台的“设置”->“开发设置”中，设置服务器的合法域名。

3. 获取用户授权

在小程序中需要使用微信登录时，需要引导用户进行授权。

// 前端代码
uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    // 获取用户授权信息
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        // 将用户信息发送到后端
        uni.request({
          url: 'https://your-backend.com/login',
          method: 'POST',
          data: {
            code: loginRes.code,
            rawData: infoRes.rawData,
            signature: infoRes.signature,
            encryptedData: infoRes.encryptedData,
            iv: infoRes.iv
          },
          success: function (res) {
            // 处理登录成功
            console.log('登录成功', res.data);
          },
          fail: function (err) {
            // 处理登录失败
            console.error('登录失败', err);
          }
        });
      },
      fail: function (err) {
        // 处理获取用户信息失败
        console.error('获取用户信息失败', err);
      }
    });
  },
  fail: function (err) {
    // 处理登录失败
    console.error('登录失败', err);
  }
});

4. 后端代码实现

使用用户的code换取session_key。

// Node.js 示例
const axios = require('axios');
const appID = 'your-app-id';
const appSecret = 'your-app-secret';
async function login(req, res) {
  const { code, rawData, signature, encryptedData, iv } = req.body;
  try {
    const response = await axios({
      method: 'GET',
      url: https://api.weixin.qq.com/sns/jscode2session,
      params: {
        appid: appID,
        secret: appSecret,
        js_code: code,
        grant_type: 'authorization_code'
      }
    });
    const { session_key } = response.data;
    // 根据session_key解密用户信息
    // 生成token并返回给前端
    res.json({ token: 'generated-token' });
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

5. 存储用户信息

将用户信息存储到数据库中。

6. 前端发起登录请求

使用uni-app的API获取用户授权。

7. 后端处理登录请求

后端接收前端请求，使用code换取session_key，然后生成token返回给前端。

8. 前端处理登录响应

前端接收后端返回的token，并进行存储。

9. 使用token进行用户鉴权

在后续的请求中，携带token进行用户鉴权。

// 前端代码
uni.request({
  url: 'https://your-backend.com/protected-resource',
  method: 'GET',
  header: {
    'Authorization': Bearer ${token}
  },
  success: function (res) {
    // 处理请求成功
    console.log('请求成功', res.data);
  },
  fail: function (err) {
    // 处理请求失败
    console.error('请求失败', err);
  }
});