想搞懂登录流程,得先明白「微信生态里的身份识别」逻辑,小程序和微信账号是打通的,但微信不会直接把用户密码给你,而是用「code + openid + session_key」这套机制来做安全验证。
简单说,openid 是用户在你这个小程序里的唯一标识(不同小程序openid不一样);session_key 是微信给的加密钥匙,用来解密用户敏感信息(比如手机号、加密的用户信息);code 是前端临时从微信服务器拿到的“凭证票”,这张票5分钟内有效,而且只能用一次。
整个登录的核心逻辑就是:前端拿code → 传给后端 → 后端拿code找微信换openid和session_key → 后端生成自己的登录态(比如token)给前端 → 后续前端用这个token证明“我是谁”。
前端(小程序端)要做哪些操作?
前端就像用户和后端之间的“传话筒”,得把微信给的临时凭证和用户授权信息传给后端,具体分三步:
用wx.login()拿临时code
用户点「登录」按钮后,前端调用 wx.login({ success(res) { /* 拿到code */ } })
,这一步微信服务器会返回一个code,相当于“临时入场券”,注意哦,code只有5分钟有效期,所以拿到后得赶紧传给后端,别存着不用~
处理用户授权(可选但常用)
如果你的小程序需要用户头像、昵称、手机号这些信息,就得让用户授权,现在微信把授权分成两种:
静默授权:比如获取openid这种基础身份,用户没感知就完成了(靠wx.login那步);
手动授权:像要用户头像、手机号,得用户主动点按钮同意,比如用
<button open-type="getUserProfile">
触发授权,用户点了之后,前端能拿到加密的用户信息(得靠后端用session_key解密)。
把code和授权信息传给后端
前端拿到code、用户授权信息(比如encryptedData、iv这些加密字段)后,通过wx.request()发给后端,相当于喊一嗓子:“后端哥,这是微信给的code,还有用户同意给的信息,帮忙处理下~”
后端(服务器端)要怎么配合?
后端是“和微信服务器对接+生成自己人身份”的关键角色,步骤更绕但核心就两件事:和微信换凭证、发自己的登录态。
拿code换openid和session_key
后端收到前端的code后,要调用微信的 auth.code2Session 接口(官方提供的API),参数得带小程序的appid、appsecret(这俩在微信公众平台后台看),还有前端传的code,调用成功后,微信会返回openid、session_key,要是用户还绑定了公众号/开放平台,可能还有unionid(打通多端身份用的)。
生成自定义登录态(比如token)
拿到openid和session_key后,后端得生成一个自己的“身份牌”(比如JWT格式的token),把这个token返回给前端,为啥要自己搞token?因为openid和session_key是微信的,咱得用自己的方式管理用户登录状态,方便后续接口验证“这个请求是不是合法用户发的”。
安全存储session_key
session_key是解密用户敏感信息的钥匙,必须安全存储!后端一般把session_key和用户的openid关联起来,存在数据库或者缓存里(比如Redis),而且传输过程中要加密,别让黑客截胡~
用户信息授权咋整合到登录里?
很多小程序登录时要同步拿用户头像、昵称,甚至手机号,这部分得和登录流程结合起来:
前端触发授权按钮
比如做个「微信快捷登录」按钮,同时加上获取用户信息的逻辑,用 <button open-type="getUserProfile">
让用户点,用户点了之后,前端能拿到 userInfo
(但现在微信返回的userInfo里头像、昵称是加密的,得后端解密),还有 encryptedData
、iv
这些加密字段。
后端解密用户信息
前端把encryptedData、iv和之前拿到的session_key传给后端,后端用session_key当钥匙,结合iv去解密encryptedData,就能拿到真实的用户头像、昵称、手机号这些信息,解密完后,后端把这些信息和用户的openid关联起来,存到自己的数据库里,这样下次用户登录,就能直接拿到这些信息啦~
登录状态保持和过期咋处理?
用户登录后,总不能每次点页面都重新登录吧?这就得靠「登录状态保持」和「过期刷新」:
前端存储token
后端返回token后,前端用 wx.setStorageSync('token', token)
把token存在本地,之后每次调用后端接口(比如获取个人信息、下单),都在请求头里带上这个token,告诉后端“我是刚才登录的那个用户”。
后端验证token有效性
后端每个需要登录的接口,都先检查请求头里的token对不对、有没有过期,如果token过期了,返回一个“登录态失效”的提示。
过期后重新登录
前端如果收到“登录态失效”的响应,就触发重新登录流程:再调用wx.login()拿新code,传给后端换新token,然后更新本地存储的token,这样用户不用手动点登录,也能默默续上登录状态~
常见坑点和解决办法
新手搞登录流程,很容易掉这些“坑”里,提前避坑能省不少头发:
code过期或重复使用
code只有5分钟有效期,而且用一次就废了,所以前端拿到code后,得立刻传给后端,别存着等半天再发,后端收到code后,也得马上调用auth.code2Session,别压着不处理~
session_key泄漏风险
session_key要是被黑客拿到,就能解密用户信息!所以传输过程中,前端和后端之间的请求得用HTTPS加密,后端存储session_key也得加密,要是用微信云开发,云函数里处理session_key会更安全,因为云开发和微信服务器之间是可信通道~
用户拒绝授权后咋引导?
用户第一次点授权按钮拒绝了,之后再点咋办?前端可以监听授权失败的回调,弹出友好提示:“亲,授权头像昵称才能用个性化功能哦~” 引导用户去小程序设置里重新打开授权开关(用wx.openSetting()跳转到设置页)。
微信小程序登录流程是「前端拿code+用户授权 → 后端换微信凭证 → 后端发自定义登录态 → 前端保登录态+后续验证」的闭环,只要把每个环节的角色(前端、后端、微信服务器)和关键凭证(code、openid、session_key、token)理清楚,再避开常见坑,新手也能把登录功能搞扎实~
网友回答文明上网理性发言已有0人参与
发表评论: