0%

uniapp实现微信小程序登录

发表于 阅读次数： Valine：
本文字数： 3.2k 阅读时长 ≈ 3 分钟

  uniapp实现微信小程序登录。

uniapp实现微信小程序登录

1. 登录流程

  1. 调用 uni.login 获取 code
  2. 将 code 发送到后端
  3. 后端调用微信接口，获取 openid 和 session_key
  4. 后端将 openid 和 session_key 存储到数据库
  5. 后端将 openid 和 session_key 返回给前端
  6. 前端将 openid 和 session_key 存储到本地

2. 代码实现

  1. 调用 uni.login 获取 code

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    uni.login({
      provider: 'weixin', // 微信登录
      success: function (res) {
        if (res.code) {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          uni.request({
            url: 'https://你的后端接口',
            method: 'POST',
            data: {
              code: res.code,
            },
            success: function (res) {
              // 存储 openid 和 session_key 到本地
              uni.setStorageSync('openid', res.data.openid);
              uni.setStorageSync('session_key', res.data.session_key);
            }
          });
        } else {
          console.error('登录失败：' + res.errMsg);
        }
      },
      fail: function (err) {
        console.error(err);
      }
    })

  2. 后端调用微信接口，获取 openid 和 session_key

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const axios = require('axios');

    async function getOpenidAndSessionKey(code) {
      const appid = '你的小程序appid';
      const secret = '你的小程序secret';

      const res = await axios.get('https://api.weixin.qq.com/sns/jscode2session', {
        params: {
          appid,
          secret,
          js_code: code,
          grant_type: 'authorization_code',
        },
      });

      return res.data;
    }

  3. 后端将 openid 和 session_key 返回给前端

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    app.post('/login', async (req, res) => {
      const { code } = req.body;

      try {
        const { openid, session_key } = await getOpenidAndSessionKey(code);

        // 存储到数据库
        await db.saveUser({ openid, session_key });

        res.json({ openid, session_key });
      } catch (err) {
        console.error(err);
        res.status(500).send('服务器错误');
      }
    });

  4. 前端将 openid 和 session_key 存储到本地

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    uni.login({
      provider: 'weixin',
      success: function (res) {
        if (res.code) {
          uni.request({
            url: 'https://your-server.com/login', // 替换为你的服务器地址
            method: 'POST',
            data: {
              code: res.code,
              encryptedData: res.encryptedData,
              iv: res.iv,
            },
            success: function (res) {
              console.log(res);
              if (res.data.openid && res.data.session_key) {
                // 存储到本地
                uni.setStorage({
                  key: 'user',
                  data: res.data,
                });
              } else {
                console.error('登录失败');
              }
            },
          });
        } else {
          console.error('获取code失败');
        }
      },

      fail: function (err) {
        console.error(err);
      },
    });

这样，你就可以在服务器端获取到用户的 openid 和 session_key，并将其存储到数据库中。同时，前端可以将这些信息存储到本地，以便后续使用。

获取用户信息

在获取到 openid 和 session_key 后，你可以使用这些信息来获取用户的信息。具体步骤如下：

  1. 在前端调用 uni.getUserInfo 接口获取用户信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    uni.getUserInfo({
      provider: 'weixin',
      success: function (res) {
        console.log(res);
        // 将用户信息存储到本地
        uni.setStorage({
          key: 'userInfo',
          data: res.userInfo,
        });
      },
      fail: function (err) {
        console.error(err);
      },
    });

  2. 在服务器端使用 openid 和 session_key 获取用户信息

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 获取用户信息
    uni.request({
      url: 'https://api.weixin.qq.com/sns/userinfo',
      method: 'GET',
      data: {
        access_token: accessToken,
        openid: openid,
        lang: 'zh_CN',
      },
      success: function (res) {
        console.log(res);
        // 将用户信息存储到本地
        uni.setStorage({
          key: 'userInfo',
          data: res.data,
        });
      },
      fail: function (err) {
        console.error(err);
      },
      });
赏包辣条吃吧