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_keyconst 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 应该存储在服务器端，切勿暴露给客户端。