1. 概述

微信授权登录是小程序用户登录的常见方式，利用微信提供的 wx.login 和 wx.getUserProfile 方法，获取用户的基本信息和唯一标识 openid 及 session_key。结合后端存储及业务逻辑，可以实现用户的身份管理。

2. 流程图

用户授权登录的流程图

微信公众平台配置流程图

3. 实现步骤

3.1 前置条件

• 已注册并认证的微信小程序。
• 具备小程序管理员权限，能访问微信公众平台。
• 了解前后端基础开发，后端需支持 HTTPS。

3.2 微信公众平台配置

1. 登录微信公众平台

• 打开 微信公众平台。
• 使用小程序管理员账号登录。

2. 配置开发设置

1. 点击 开发管理 > 开发设置。
2. 在 服务器域名 中，配置以下内容：
   • request合法域名：后端接口地址（需支持 HTTPS）。
   • socket合法域名：如果用到 WebSocket，配置对应的域名。
   • upload合法域名：文件上传域名（如果需要）。
   • download合法域名：文件下载域名。

3. 开启登录功能

1. 在 用户身份 > 登录方式 中，勾选 微信登录。
2. 确保 登录校验 开启。

3.3 代码实现

1. 前端代码：登录功能实现

pages/login/login.js

Page({
  data: {
    userInfo: null,
    hasUserInfo: false,
  },
 
  onLoad() {
    // 检查是否已有登录信息
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({ userInfo, hasUserInfo: true });
    }
  },
 
  // 获取用户信息
  async handleLogin() {
    try {
      // 调用 wx.login 获取临时登录凭证
      const { code } = await wx.login();
      if (!code) throw new Error('登录失败');
 
      // 调用后端接口，完成登录
      const response = await wx.request({
        url: 'https://your-backend-api.com/login',
        method: 'POST',
        data: { code },
      });
 
      if (response.statusCode === 200) {
        const { userInfo } = response.data;
        this.setData({ userInfo, hasUserInfo: true });
        wx.setStorageSync('userInfo', userInfo);
      } else {
        throw new Error('登录失败');
      }
    } catch (error) {
      console.error('登录出错:', error);
      wx.showToast({ title: '登录失败，请重试', icon: 'none' });
    }
  },
});

2. 后端代码：处理登录请求

示例：Node.js + Express

const express = require('express');
const axios = require('axios');
const app = express();
 
app.use(express.json());
 
// 微信小程序登录接口
app.post('/login', async (req, res) => {
  const { code } = req.body;
 
  try {
    // 请求微信服务器，获取 openid 和 session_key
    const wechatResponse = await axios.get(
      `https://api.weixin.qq.com/sns/jscode2session`,
      {
        params: {
          appid: 'your-app-id',
          secret: 'your-app-secret',
          js_code: code,
          grant_type: 'authorization_code',
        },
      }
    );
 
    const { openid, session_key } = wechatResponse.data;
 
    // 根据 openid 查找或创建用户
    const user = findOrCreateUser(openid);
 
    res.json({ success: true, userInfo: user });
  } catch (error) {
    console.error('登录失败:', error);
    res.status(500).json({ success: false, message: '登录失败' });
  }
});
 
// 模拟用户查找/创建方法
function findOrCreateUser(openid) {
  // 这里可以查询数据库，或者创建新用户
  return { openid, nickname: '新用户' };
}
 
app.listen(3000, () => console.log('Server running on port 3000'));

4. 完整流程详解

1. 前端调用 wx.login

• 调用后获得临时登录凭证 code，此凭证用于后端获取用户身份信息。

2. 后端调用微信服务器接口

• 接口地址：https://api.weixin.qq.com/sns/jscode2session
• 参数：
  • appid：小程序的 AppID。
  • secret：小程序的 AppSecret。
  • js_code：前端传递的 code。
  • grant_type：固定为 authorization_code。

3. 微信服务器返回数据

• openid：用户的唯一标识。
• session_key：用于后续数据解密。

4. 后端处理逻辑

• 根据 openid 在数据库中查找用户。
• 如果不存在用户信息，可以自动创建用户。

5. 前端存储用户信息

• 将后端返回的用户信息存储到本地（wx.setStorageSync），用于后续展示或操作。

5. 注意事项

1. 确保后端接口使用 HTTPS：

   • 微信小程序要求所有请求必须通过 HTTPS。

2. 保护用户隐私：

   • 不要将 session_key 和敏感数据暴露给前端。
   • 在后端做好数据加密和存储。

3. 登录态的管理：

   • 使用 openid 作为用户的唯一标识。
   • 建议实现 Token 机制，用户登录后返回 Token，减少频繁登录请求。

4. AppSecret 安全性：

   • AppSecret 应该存储在服务器端，切勿暴露给客户端。