【微信小程序 + 登录流程】微信小程序授权登录完整流程，一篇搞定！（含代码实现）

前言只要开始写一个微信小程序，必要的登录流程每次都要再理一下逻辑，记录一下思路，以便于后面自己食用。大家有什么更好的思路可以分享～后面想创建一个学习小组，有兴趣的小伙伴可以联系我。文章目录前言一、小程序微信授权登录1.登录态检查（节点 B）2.获取临时凭证 `code`（节点 D）3. 开发者服务器换用户标识（节点 F-G）4. 生成自定义登录态（节点 H）5.登录态存储与使用（节点 J-L）二、 需用户信息授权（如获取头像、昵称）三、小程序获取手机号登录1. 前置：获取临时登录凭证 code（节点 D）2. 触发手机号授权（节点 E-F）3. 获取加密手机号数据（节点 H）4. 服务器解密手机号（节点 J-L）5. 关联用户与生成登录态（节点 M）6. 登录态存储与后续使用（节点 N-P）四、具体代码实现1.需求示例2.代码实现（这里以页面上显示登录按钮为例）五、关键注意事项1.解密失败排查：2.用户拒绝授权处理：3.安全性要求：一、小程序微信授权登录1.登录态检查（节点 B）操作方：小程序前端目的：避免重复登录，提升用户体验实现：前端通过wx.getStorageSync('token')检查本地是否存储了有效的自定义登录态（如Token）。若有Token，直接携带Token请求开发者服务器验证有效性，有效则进入主页；若无Token或Token已过期，触发登录流程。2.获取临时凭证code（节点 D）操作方：小程序前端核心接口：wx.login()说明：调用后微信客户端会向微信服务器请求，返回一个 一次性、有效期 5 分钟 的code（临时登录凭证，仅能使用 1 次）；此步骤 无需用户手动授权（静默获取，不弹授权弹窗）。文档直通车： 开放接口/登录/wx.login3. 开发者服务器换用户标识（节点 F-G）操作方：开发者服务器核心接口：微信官方auth.code2Session接口（GET 请求）请求参数（必须包含）：参数名来源说明appid小程序管理后台获取小程序唯一标识secret小程序管理后台获取小程序密钥（需保密，不可暴露在前端）js_code前端传递的code临时登录凭证grant_type固定值填"authorization_code"返回结果（微信服务器返回给开发者服务器）：openid：用户在当前小程序的 唯一标识（每个用户对每个小程序的openid不同）；session_key：微信服务器与开发者服务器之间的 加密密钥（用于解密用户敏感信息，如手机号、头像昵称，需保密存储）；若code无效（如过期、重复使用），会返回错误码（如40029）。文档直通车： 小程序登录/小程序登录4. 生成自定义登录态（节点 H）操作方：开发者服务器核心目的：避免直接使用openid/session_key传输，提升安全性常见方案：用openid查询数据库，判断是否为新用户（新用户则创建用户记录，老用户则更新session_key）；生成自定义登录态（如JWT Token、随机字符串），并将Token与openid、session_key关联存储（如存入Redis、MySQL）；Token需设置有效期（如 7 天），过期后需重新登录。5.登录态存储与使用（节点 J-L）前端存储：用wx.setStorageSync('token', 开发者返回的 Token)保存到本地，下次打开小程序时可直接读取；后续请求：前端发起业务请求（如 “获取我的订单”）时，在请求头（如Authorization: Bearer Token）或参数中携带Token；服务器验证：开发者服务器接收请求后，先验证Token有效性（如检查Token是否存在、是否过期），验证通过则返回数据，否则返回 “登录失效”，前端需重新触发登录流程。二、 需用户信息授权（如获取头像、昵称）注意：微信已废弃旧的wx.getUserInfo()接口，当前需用wx.getUserProfile()且必须用户手动点击 “允许” 才能获取信息，不可静默授权。文档直通车： 开放接口 /用户信息 /wx.getUserProfile三、小程序获取手机号登录1. 前置：获取临时登录凭证 code（节点 D）操作方：小程序前端核心接口：wx.login()说明：与基础登录流程一致，静默获取 一次性、5 分钟有效期 的code，用于后续换取session_key（解密手机号的关键密钥），此步骤无需用户授权。2. 触发手机号授权（节点 E-F）文档直通车： 表单组件 /button操作方：小程序前端 + 用户核心组件：需用小程序原生button组件，且设置open-type="getPhoneNumber"（仅该类型按钮能触发手机号授权弹窗），示例代码：!-- WXML --buttonopen-type="getPhoneNumber