微信小程序登录流程

2023-11-02 316

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序登录流程

1. 前言

登录很简单,基本都做过,但是进行总结的可能不多

今天闲来无事就总结一波

2. 登录方式

微信小程序的登录流程分为两种情况

一种是使用微信开放平台登录

一种是使用自定义登录方式

3. 使用微信开放平台登录

用户在小程序中点击登录按钮，触发登录事件。

小程序调用wx.login()方法获取临时登录凭证code。

小程序调用 wx.getUserInfo()方法获取用户的基本信息（头像、昵称等）。

小程序将code和用户信息发送给开发者的后台服务器。

开发者的后台服务器使用 AppID和 AppSecret 调用微信接口获取 session_key 和 openid。

开发者的后台服务器使用session_key对用户信息进行解密，获取用户的真实信息。

开发者的后台服务器将用户的信息存储到数据库中，并生成一个自定义登录态token并返回给小程序。

小程序保存该自定义登录态token，并在以后的请求中带上该token。

4. 相关代码

客户端授权登录

// 点击按钮触发登录事件
wx.login({
  success: res => {
    // 获取临时登录凭证
    const code = res.code;
    // 获取用户信息
    wx.getUserInfo({
      success: res => {
        const userInfo = res.userInfo;
        // 将 code 和 userInfo 发送给后台服务器
        wx.request({
          url: 'https://xx.xx.com/api/login',
          data: {
            code: code,
            userInfo: userInfo
          },
          success: res => {
            // 将服务器返回的自定义登录态 token 存储到本地
            wx.setStorageSync('token', res.data.token);
          }
        });
      }
    });
  }
});

后台服务器处理登录逻辑

const request = require('request');
const crypto = require('crypto');
const APP_ID = '你的 app id';
const APP_SECRET = '你的 app secret';
// 处理小程序端登录请求
function login(req, res) {
  const code = req.body.code;
  const userInfo = req.body.userInfo;
  // 获取 session_key 和 openid
  request(`https://api.weixin.qq.com/sns/jscode2session?appid=${APP_ID}&secret=${APP_SECRET}&js_code=${code}&grant_type=authorization_code`, function(error, response, body) {
    const result = JSON.parse(body);
    const session_key = result.session_key;
    const openid = result.openid;
    // 使用 session_key 对用户信息进行解密
    const encryptedData = userInfo.encryptedData;
    const iv = userInfo.iv;
    const decipher = crypto.createDecipheriv('aes-128-cbc', new Buffer(session_key, 'base64'), new Buffer(iv, 'base64'));
    let decoded = decipher.update(encryptedData, 'base64', 'utf8');
    decoded += decipher.final('utf8');
    const userInfoObj = JSON.parse(decoded);
    // 将用户信息存储到数据库中，生成自定义登录态 token 并返回
    const token = generateToken(userInfoObj);
    res.json({ token: token });
  });
}
// 生成自定义登录态 token
function generateToken(userInfo) {
  const secret = 'your secret key';
  const expireTime = new Date().getTime() + 24 * 3600 * 1000;
  const data = JSON.stringify({
    userInfo: userInfo,
    expireTime: expireTime
  });
  const hash = crypto.createHmac('sha256', secret).update(data).digest('hex');
  const token = `${data}.${hash}`;
  return token;
}

只是大概流程没有考虑用户退出登录、token 过期等其他情况的处理。

5. 自定义登录方式

用户在小程序中输入账号密码，点击“登录”按钮，触发登录事件。

小程序将用户输入的账号密码发送给开发者的后台服务器。

开发者的后台服务器根据账号密码验证用户的身份，并生成一个自定义登录态token并返回给小程序。

小程序保存该自定义登录态 token，并在以后的请求中带上该token。

需要注意的是，在使用自定义登录方式时，为了保障用户数据的安全，需要使用 HTTPS 协议，并对用户密码进行加密传输和存储

6. 相关代码

客户端登录逻辑

// 自定义登录函数，使用用户名和密码登录
const login = (username, password) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: 'https://xx.yzs.com/api/login',
      method: 'POST',
      data: {
        username: username,
        password: password
      },
      success: res => {
        // 将服务器返回的自定义登录态 token 存储到本地
        wx.setStorageSync('token', res.data.token);
        resolve(res.data);
      },
      fail: err => {
        reject(err);
      }
    });
  });
};
// 在登录页面中调用 login 函数进行登录
const handleLogin = () => {
  const username = '密码';
  const password = '用户名';
  login(username, password).then(res => {
    // 登录成功，跳转到首页
    wx.redirectTo({
      url: '/pages/home/index',
    });
  }).catch(err => {
    // 登录失败，提示错误信息
    wx.showToast({
      title: '登录失败，请重试！',
      icon: 'none'
    });
  });
};

后台相关逻辑

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const crypto = require('crypto');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 处理自定义登录请求
app.post('/api/login', (req, res) => {
  const username = req.body.username;
  const password = req.body.password;
  // 根据用户名和密码查询用户信息
  const user = getUserByUsernameAndPassword(username, password);
  if (!user) {
    res.status(401).json({ message: '用户名或密码错误！' });
    return;
  }
  // 将用户信息存储到数据库中，生成自定义登录态 token 并返回
  const token = generateToken(user);
  res.json({ token: token });
});
// 生成自定义登录态 token
const generateToken = user => {
  const secret = '自己的secret key';
  const expireTime = new Date().getTime() + 24 * 3600 * 1000;
  const data = JSON.stringify({
    userId: user.id,
    expireTime: expireTime
  });
  const hash = crypto.createHmac('sha256', secret).update(data).digest('hex');
  const token = `${data}.${hash}`;
  return token;
};
// 根据用户名和密码查询用户信息
const getUserByUsernameAndPassword = (username, password) => {
  // TODO: 实现根据用户名和密码查询用户信息的逻辑
  return {
    id: 123,
    username: 'testuser',
    nickname: 'Test User'
  };
};
app.listen(3000, () => {
  console.log('Server started on port 3000.');
});

7. 请求配置 token

核心代码

// 假设 token 存在于本地缓存中，缓存的键名为 'token'
const token = wx.getStorageSync('token')
wx.request({
  url: 'https://xx.com/api/some-resource',
  header: {
    'Authorization': `Bearer ${token}`
  },
  success(res) {
    console.log(res.data)
  },
  fail(err) {
    console.error(err)
  }
})

通过 wx.getStorageSync() 方法获取本地缓存中存储的 token，

然后将其添加到header对象中的 Authorization 属性中，值为 Bearer ${token}，

其中 Bearer 为固定字符串，${token}是变量，表示真正的 token 值。

最终发送的请求头会包含Authorization: Bearer ${token}，其中 ${token} 会被替换为真实的 token 值。

微信小程序登录流程

1. 前言

2. 登录方式

3. 使用微信开放平台登录

4. 相关代码

5. 自定义登录方式

6. 相关代码

7. 请求配置 token

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了`部落`的崛起;

共勉

热门文章

最新文章

相关课程

相关电子书

相关实验场景

微信小程序登录流程

1. 前言

2. 登录方式

3. 使用微信开放平台登录

4. 相关代码

5. 自定义登录方式

6. 相关代码

7. 请求配置 token

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉

热门文章

最新文章

相关课程

相关电子书

相关实验场景

如果能帮助到有缘人,非常的荣幸,一切为了`部落`的崛起;