【微信小程序 + 登录流程】微信小程序授权登录完整流程,一篇搞定!(含代码实现)
前言只要开始写一个微信小程序,必要的登录流程每次都要再理一下逻辑,记录一下思路,以便于后面自己食用。大家有什么更好的思路可以分享~后面想创建一个学习小组,有兴趣的小伙伴可以联系我。文章目录前言一、小程序微信授权登录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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2419717.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!