专注营销系统开发11年为企业开拓营销空间!

微信小程序工具|微信小程序开发|微信小程序制作平台-龙图应用【XcxIP.com】

多年微信小程序专业开发商
中国行业十佳诚信企业、质量、服务

全国咨询热线15321026642

新闻资讯

新闻资讯
当前位置:网站首页>新闻资讯

微信小程序登录开发文档,从入门到实战全解析

发布时间:11-07来源:微信小程序工具|微信小程序开发|微信小程序制作平台-龙图应用【XcxIP.com】

打开微信开发者工具,新建一个小程序项目,第一件事往往不是写页面,而是琢磨登录。这个看似简单的功能,牵扯到前端、后端、微信服务器三方协作,稍不留神就踩坑。我见过不少新手照着文档抄代码,结果登录态一会儿就失效,或者压根拿不到用户信息,只能对着控制台里的报错干瞪眼。其实微信小程序登录的文档写得挺清楚,但问题是它太“官方”了,全是术语,没点实战经验的人根本读不进去。今天我就把这份文档掰开揉碎了讲,从最基础的流程到你可能会踩的每一个坑,全给你捋顺。

微信小程序登录开发文档,从入门到实战全解析

先看最核心的登录流程。微信官方文档画了一张时序图,从wx.login开始,到拿到code,再通过后端用code换openid和sessionkey,后端自定义登录态返回给前端。这张图我建议你截图存下来,因为整个登录体系就是围绕它转的。wx.login这个API很特别,它不需要用户授权,直接就能调,而且每次调用的code都不同,有效期只有五分钟,只能用一次。很多人误以为wx.login就是登录,其实它只是拿到了一个临时凭证,真正的身份验证发生在你的后端。记住这一点,后面很多困惑都能解开。

接下来是code换sessionkey这一步,这里藏着第一个大坑。文档里明确写着要“后端调用接口”,但很多新手图省事,直接在前端用wx.request去请求微信的接口。这绝对不行,因为请求里要带AppSecret,一旦暴露在小程序代码里,任何人用抓包工具都能看到,你的应用就彻底裸奔了。正确做法是前端把code传给自己的服务器,服务器端用这个code加上AppSecret去请求微信的https://api.weixin.sns/jscode2session接口。响应里会返回openid、sessionkey和unionid,其中openid是用户在这个小程序里的唯一标识,sessionkey是加密用户信息的密钥,unionid则是同一微信开放平台下不同应用的通用标识,没有绑定开放平台的话不会返回。

拿到sessionkey之后,很多人就迷茫了,不知道下一步该干嘛。文档里给了两个方向:一是用sessionkey解密用户手机号或用户信息,二是自己生成一个登录态。我强烈建议你走第二条路,因为sessionkey会过期,而且官方不建议直接用它做登录凭证。具体做法是:后端收到sessionkey后,生成一个自定义的token,比如用uuid或者jwt,然后把这个token和openid、sessionkey关联起来,存到数据库里,设置一个合理的过期时间,比如七天。然后把token返回给前端,前端存到storage里,之后所有需要身份验证的请求都带上这个token。这样即使sessionkey过期了,只要你的token没过期,用户依然能保持登录状态。

这里要特别提醒一下,有些教程会让你用sessionkey去解密用户信息,然后存下来当用户资料。这个思路本身没错,但前提是你得先调用wx.getUserProfile获取用户的加密信息,然后传给你的后端。这个接口在2021年之后改版过,现在只能在用户点击按钮时触发,不能再一进页面就弹窗了。而且返回的encryptedData和iv字段,需要用sessionkey通过AES算法解密。解密出来就是一个JSON字符串,包含openid、nickname、avatarUrl这些字段。但说实话,除非你的业务特别需要,否则我建议直接用openid当用户标识,昵称头像让用户自己填或者用默认的,省去解密这一堆麻烦事。

再聊聊登录态的维护,这是实战中大家问得最多的问题。前端拿到token存到storage后,每次请求都要带上,但怎么带?有人用header,有人用body,都行,关键是后端要统一校验。我在项目里习惯用header的Authorization字段,后端写个中间件,每次请求先检查这个字段,没有或者过期就直接返回401,前端收到401就跳转登录页。这里有个细节:token过期时间和前端storage里的时间要有个协调机制。比如你设置了七天过期,但用户第三天的token就失效了,你得让前端在收到401时自动重新走一遍wx.login流程,静默换token。这个逻辑可以封装在request函数里,所有请求统一处理,就不会出现某个页面突然白屏还不知道为什么的情况。

还有个容易忽略的点,就是wx.checkSession接口。这个API的作用是检查当前用户的sessionkey是否还在有效期内。文档里说,如果sessionkey失效,wx.login得到的code会不一样,后端换来的sessionkey也会变。但实际开发中,这个检查不是必须的,因为你的自定义token已经承担了登录态校验的职责。不过如果你确实用了sessionkey做解密操作,比如解密手机号,那就得在解密前调一下wx.checkSession,如果失效就重新走登录流程。我见过有项目没做这个检查,结果用户手机号解不出来,查了半天才发现是session_key过期了,白白浪费好几个小时。

说说并发和时序问题,这是文档里完全没提但实际一定会遇到的。比如用户在小程序里同时发起多个请求,而你的token刚好在请求过程中过期了,这时候每个请求都会返回401,每个都会触发重新登录,就会产生一堆重复的wx.login请求。解决方法是加一个“正在刷新token”的标记,如果已经在刷新了,其他请求就排队等待,等token更新完再重放。另外,wx.login的code只能用一次,如果后端因为网络问题请求微信接口超时了,你重试时用同一个code,微信那边会报错。所以后端得做个幂等处理,或者前端在调用wx.login时就做好防重。这些细节都是文档不会告诉你的,但都是实战里绕不过去的坎。

回头看这份微信小程序登录开发文档,其实核心内容就那么几页,但真正理解它需要你动手把流程跑通一遍。我建议你按这个顺序练手:先写个最简单的demo,用wx.login拿到code,用postman模拟后端换openid,再一步步加上自定义token和请求拦截。等这套流程跑通了,你就明白文档里那些术语到底在说什么了。记住,登录不是一次性的事,而是一套持续维护的状态管理机制。把这个想清楚,你的小程序才算真正迈过了第一道门槛。

分享到:0 用手机看
微信小程序登录开发文档,从入门到实战全解析

拍下二维码,信息随身看

试试用手机扫一扫,
在你手机上继续观看此页面。