不断创造,更快成长!这是我参加“挖金日计划·十月更新挑战”的第一天,点击查看活动详情
前言
大家好,我是疯狂小波。随着微信小程序的使用越来越广泛,小程序的应用也越来越多,我们经常会遇到小程序下登录/注册的场景,以及如何为微信体系下的多个应用(如小程序、微信公众号、App微信登录)统一账号的问题。
本文主要分享如何快速建立微信小程序下的用户体系,以及如何在微信体系下统一多个应用的多端账号。
传统登录/注册与小程序的区别 传统登录/注册
在传统应用中,用户往往需要使用两个不同的页面进行登录/注册,需要分别填写用户名、密码、手机号、手机验证码等信息,才能完成登录或注册的过程。
小程序一键登录/注册
通过小程序,基于微信提供的能力,可以轻松快捷地获取上述信息,并一键登录和注册,无需用户手动填写信息。
如下:一键获取用户微信绑定的手机号,无需用户手动输入手机号和验证码,如果用户已经注册,则直接登录,如果未注册,则注册登录,方便快捷。
可以看到,最明显的就是用户交互和流程变得更简单了,原本需要用户手动填写的手机号,现在在小程序下可以直接一键获取,而且因为是绑定微信的手机号,验证码也可以省去。
如果我们的账号体系不需要手机号信息的话,整体的流程会更简单,甚至不需要用户的点击和授权,在微信下创建一个唯一的用户账号。
下面我们分别讲解这两个场景下的登录和注册流程。
基本登录/注册流程
上面我们看到了小程序可以一键获取手机号进行登录注册的场景。除此之外,小程序下还有一个最基础的用户体系,不需要获取手机号和用户基本信息。我们先来看下这个场景的流程:
从上面的流程图我们可以看出小程序下基本的登录注册流程可以分为以下三个部分:
获取小程序登录态:获取小程序下用户唯一ID。 获取自定义登录态:通过唯一ID判断用户是否注册过,若未注册则返回,若已注册则直接登录返回。 登录态的使用:接口返回后,存放在小程序本地缓存中,调用其他接口时携带,用于验证并获取用户登录信息。 适用场景
可以看到,在这个场景下,我们在注册的时候并没有获取用户的手机号信息,但是我们也可以完成用户在微信下唯一的账号的创建。
这类用户登录操作也比较简单,可以默默进行,也可以由用户点击按钮触发,不需要用户的同意和授权,注册后可以自动生成随机的用户头像和昵称。
该基础登录适用于业务不需要用户手机号的场景。
术语定义
上面的流程图涉及到很多名词,下面我们来介绍一下它们的含义,以及每个节点的注意事项和相关文档。
,
小程序ID(唯一标识)和小程序密钥是在小程序后台获取的,在调用某些微信API服务时需要用到它们作为输入参数。
代码小程序登录状态
调用微信登录凭证验证接口,获取用户当前在小程序的登录信息。包含:、和。
获取小程序登录状态常见错误码:过期code无效
用户在微信小程序中的用户ID(唯一标识)
用户会话密钥,用于加密和解密用户数据通信的密钥。
小程序基础库 2.21.2 之前版本获取的手机号为加密数据,需要通过此字段解密。从基础库 2.21.2 版本开始,采用新的方式获取手机号,可忽略此字段。
自定义登录状态
开发者服务器在创建用户账号并登录后,生成自定义的登录态(如);用户在后续请求接口时携带。开发者服务器即可获取用户信息,完成相应验证,并返回相应业务数据。
手机号登录/注册流程
在实际的小程序开发过程中,大部分的用户系统都需要获取用户的手机号,我们来看一下通过手机号登录/注册的流程。
从上面的流程图我们可以看出,基础登录和注册的流程基本一致,除了第一步需要获取用户的唯一标识(基础登录/注册都是用 或 作为唯一标识,本场景是手机号)外,同样可以分为三个部分:
获取用户手机号:获取用户微信账号绑定的手机号。 获取自定义登录状态:以手机号作为唯一标识,判断是否登录、注册,并返回登录状态。
在上面的流程图中,还涉及到了一些新的相关术语,我们来看一下这些术语的定义和注意事项:
开发者服务器调用微信接口调用凭证,大部分微信后台接口调用都需要用到该凭证,开发者服务器通过接口获取。
获取手机号码接口
开发者服务器通过代码获取用户手机号信息,调用手机号获取接口。
小程序基础库 2.21.2 之前版本获取的手机号是加密数据,需要开发者服务器解密,流程较上面复杂,且因为容易刷新过期,解密时使用的数据与加密时不一致,导致解密失败,容错性较低。相对来说,现在的流程更简单一些,之前获取手机号的方法可以参考官方文档,如果遇到上述问题,也可以留言和我交流。
复杂场景混合使用
在某些业务中,我们在注册时需要同时获取用户的手机号和微信号。
例如,某个商家需要使用用户的手机号,同时也需要在微信开放平台统一多个账号;而由于微信手机号可以重新绑定,如果只以手机号作为唯一标识,用户更换手机号后就无法找回之前的账号,而用户的微信号是不会变的。所以有时候我们需要根据这两者来创建和判断用户。
从上面的流程图可以看出,我们可以在小程序中同时获取两个不同的code,然后通过接口传递给后端,后端再调用微信接口分别获取手机号和。在判断用户是否注册时,是否优先使用手机号或者微信号进行验证,可根据实际业务需求决定。
通过上面的流程,我们就可以同时根据手机号和微信号进行注册和登录了。只要其中任何一个能在用户表中找到对应的信息,就说明该用户已经注册过;否则就新建一个账号,并在其中维护信息;这样就完成了一键登录注册,用户就可以正常使用了。
获取基本用户信息
基于上面的流程,我们就完成了微信小程序下用户账号的创建与登录。
有时我们还需要获取用户的微信头像和昵称来补全我们的用户信息。
2022年11月8日之后发布的小程序只能通过微信头像和昵称填写功能获取该信息,即用户注册登录成功后,自行在个人中心维护,维护时直接选择微信头像和昵称即可;不再提供wx.接口获取,这里我也直接基于最新API来介绍。
为了快速补全用户信息,我们曾经在注册时通过 wx.Api 获取头像和昵称,并同步写入。但微信官方认为头像和昵称并非必要信息,注册前无需提前授权,因此移除了该能力。
新提供的头像昵称填写功能比较简单,有需要的可以直接阅读链接里的官方文档。
相关调整说明请参见本公告。
总结
本文主要介绍如何在微信小程序中注册、登录用户,以及如何获取用户头像和昵称信息来完善用户账号,快速打造小程序下的用户体系。
在登录注册方面,我们可以快速创建微信体系下的用户账号,包括微信下多个应用的账号统一(如小程序、微信公众号、App微信登录等)。
还可以利用微信一键获取手机号功能,快速获取用户手机号,并根据手机号创建用户,此外还可以和手机号结合使用,应对更加复杂的场景。
另外,在整体的实现流程中,最重要且最容易出错的就是整体流程,各个节点如何流转,以及需要注意的一些点;小程序官方文档比较零散,有些东西解释得不是很清楚,对于没有开发过这方面的人不是很友好。所以我这里主要介绍这些内容。相信大家按照上面的流程图以及关键节点的描述,在开发时参考具体的文档,应该没有什么问题。
总体流程清楚之后,代码相对来说也不复杂,参考文档就可以了,所以这里就没放相关代码了。如果在实现过程中有什么疑问,也可以留言。
在总结这篇文章的过程中,我发现官方小程序也做了一些改动,所以最终根据最新的 API 整理了一下。新的流程比以前简单很多,特别是数据解密部分,现在基本不用考虑了。如果大家在这个新版本之前还有什么疑问,也欢迎大家评论和我交流。