持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第1天,点击查看活动详情
前言
大家好,我是疯狂的小波。随着微信小程序的使用越来越广泛,小程序的应用也越来越多。我们经常会遇到小程序下登录/注册的场景,以及微信体系下的多种应用(如小程序、微信公众号,App微信登录)如何实现帐号统一的问题。
本文主要就是分享如何快速建立微信小程序下的用户体系,以及微信体系下的多个应用如何做到多端帐号统一。
传统登录/注册与小程序区别
传统登录/注册
传统的应用下,用户登录/注册,往往要使用2个不同的页面,需要填写表单,如用户名、密码、手机号、手机验证码等信息,分别进行登录或注册流程。
小程序一键登录/注册
而在小程序下,基于微信提供的能力,可以方便快速的获取以上这些信息,一键实现登录和注册,而不需要用户手动填写。
如下:一键获取用户微信绑定的手机号,不需要用户手动输入手机号以及验证码,如果用户已经注册过了则直接登录,未注册则注册并登录,方便快捷。
可以看到,最明显的就是用户交互和流程更加简单了,原来需要用户手动填写的手机号,在小程序下可以直接一键获取,并且由于是获取微信绑定手机号,所以验证码也可以省略了。
如果我们的帐号体系不需要手机号信息,那整体的流程会更简单,甚至都不需要用户的点击操作和授权,就能够创建微信下的用户唯一帐号。
下面我们分别通过这2种场景下的登录注册流程分别进行说明。
- 基础登录/注册流程
- 手机号登录/注册流程
基础登录/注册流程
上面我们看到了小程序下一键获取手机号进行登录注册的场景。除了这种,还有一种最基础的小程序下的用户体系,不需要获取手机号、用户基础信息的。我们先来看看这种场景下的流程:
从上面的流程图中我们可以看到,小程序下基础的登录注册流程可以分为以下3个部分:
- 小程序登录态获取:获取用户在该小程序下的唯一标识
openId
或unionId
。 - 自定义登录态获取:通过唯一标识判断用户是否注册,未注册则注册并返回
token
,已注册则直接登录并返回token
。 - 登录态的使用:接口返回
token
后,存储在小程序本地缓存中,在其他接口调用时再携带token
,就可以校验和获取用户登录信息了。
适用场景
可以看到,这种场景下,我们注册时并未获取用户的手机号信息,也可以完成微信下用户唯一帐号的创建。
这种登录用户的操作也比较简单,可以做静默登录注册,也可以用户点击按钮触发,不需要用户同意授权。注册后可以自动生成用户随机的头像、昵称。
这种基础登录适用于业务上不需要用户手机号的场景。
名词释义
在上面的流程图中涉及到了很多名词,我们分别来介绍下表示的是什么意思,以及各个节点的注意事项、相关文档。
appId、appSecret
小程序ID(唯一标识)及小程序秘钥,在小程序后台获取。调用部分微信接口服务时需要作为入参。
code
- 小程序
wx.login()
方法返回值,用户临时登录凭证。开发者服务器使用code
、appId
、appSecret
调用 登录凭证校验接口 获取 小程序登录态信息(openid
、unionid
和session_key
) - 一个
code
只能使用一次(向微信服务器请求登录态信息); - 有效期五分钟。
小程序登录态
调用微信登录凭证校验接口获取的用户本次在小程序登录的信息。包含:openid
、unionid
和 session_key
。
小程序登录态获取时常见错误
- code已使用
- 程序中多次调用使用了相同的
code
(如:小程序触发事件时未防重,导致触发多次获取登录态方法,同一code
被使用多次);
- 程序中多次调用使用了相同的
- code过期
- 小程序获取
code
到code
被使用,时间超过5分钟;
- 小程序获取
- code无效
- 小程序调用
wx.login
获取code
的小程序主体,与开发服务器调用登录凭证校验接口参数中小程序appId
不一致。
- 小程序调用
openId
用户在该微信小程序下的用户ID(唯一标识)
unionId
- 用户在微信开放平台帐号下的唯一标识。
- 同一个用户在同一个微信开放平台账号下的多个应用中(如移动应用、网站应用、公众帐号、小程序),unionid是相同的。
- 常用来做同一主体下多应用间的账号互通,多端账号统一。
- 需要注意区分
openId
和unionId
。如果只做小程序下的用户帐号,openId
就可以了;如果要做微信下多端帐号的打通,就需要使用unionId
;要获取unionId
,需要在微信开放平台下将多个端的应用添加到同一帐号下。- 微信体系下的其他应用,也有
openId
(如公众号),但是不同应用下的openId
值是不同的。
session_key
用户会话秘钥,用户数据加解密通讯的秘钥。
在小程序基础库
2.21.2
之前版本获取的手机号是加密数据,需要通过该字段进行解密;从基础库2.21.2
版本开始,使用新方式获取手机号,可以忽略该字段。
自定义登录态
开发者服务器创建用户帐号并登录后,生成自定义登录态(如token
);用户后续请求接口时携带,开发者服务器可以通过token
获取用户信息,再完成的相应的校验及返回对应业务数据。
手机号登录/注册流程
在小程序的实际开发过程中,用户体系大部分都是需要获取用户手机号的。我们接下来来看看通过手机号进行登录/注册的流程是什么样子的。
从上面的流程图中我们可以看到,和基础的登录注册流程大体是相同的,主要是在第一步获取用户唯一标识时不同(基础登录/注册以openid
或unionId
作为唯一标识,而这个场景下是手机号),也可以分为3个部分:
- 用户手机号获取:获取用户微信绑定的手机号。
- 自定义登录态获取:通过手机号作为唯一标识判断是否登录注册,并返回登录态。
- 登录态的使用
名词释义
在上面的流程图中,也涉及到一些新的相关名词,我们来看看释义及注意事项:
code
- 通过点击 获取手机号的button组件,用户授权同意后,事件回调返回的换取手机号的动态令牌。
- 有效期为5分钟,且只能消费一次。
- 与
wx.login
返回的code
作用是不一样的,不能混用。
access_token
开发者服务器调用微信接口调用凭据,大多数微信后台接口调用时都需使用 access_token
。开发者服务器通过 getAccessToken接口 获取。
获取手机号接口
开发者服务器通过code
、access_token
调用 获取手机号接口 获取用户手机号信息。
在小程序基础库
2.21.2
之前版本获取的手机号是加密数据,需要开发者服务器进行解密,流程比上面更复杂,并且由于session_key
容易被刷新过期,导致解密时使用的session_key
和加密时不一致,出现解密失败的场景,容错性更低。相对来说,现在的流程更简洁。之前获取手机号的方式可以参考官方文档。如果有遇到上面说的这种问题的,也可以留言评论和我交流。
复杂场景的混合使用
在部分业务中,我们注册时既需要获取用户的手机号,又需要获取微信的openid
、unionid
。
比如业务需要使用用户的手机号,又需要微信开放平台下多端的帐号统一;并且由于微信的手机号可以换绑,如果只通过手机号来作为唯一标识,那用户换绑手机号之后,之前的帐号就无法找回了,而用户的微信ID是不会变的。所以有时我们就需要同时基于这2者来进行用户的创建及判断。
从上面流程图中可以看到,我们在小程序可以同时拿到2个不同的code
,再通过接口传递给后端,后端再调用微信接口分别获取手机号
和openId
、unionid
。在判断用户是否已注册时,优先以手机号还是优先以微信ID作为校验,可以根据实际的业务需要来判断。
通过上面的这个流程,我们就可以同时基于手机号和微信ID,来进行注册和登录了,只要有任意一个能在用户表中找到对应信息,就说明用户已经注册过了;否则就创建一个新帐号并把这些信息维护进去;这样就完成了一键登录注册,用户就可以正常使用了。
获取用户基础信息
基于上面的流程,我们完成了在微信小程序下的用户帐号的创建以及登录。
有时我们还需要获取用户的微信头像以及昵称来完善我们的用户信息。
在2022年11月8日
之后发布的小程序只能通过微信的 头像昵称填写能力 来获取用户的这个信息,也就是在用户注册登录成功之后,在个人中心自行维护,维护时可以直接选择微信的头像、昵称;不再提供 wx.getUserProfile 接口来获取。这里我也是直接基于最新的API来进行介绍的。
在之前我们为了快速完善用户信息,往往也是在注册时通过 wx.getUserProfile
Api 获取头像、昵称,在注册时同步写入。但是微信官方认为,头像、昵称并不是必要信息,并不需要在注册前提前授权获取,所以移除了这个能力。
新提供的 头像昵称填写能力 相对比较简单,大家有需要的话直接看链接中的官方文档就可以了。
相关的调整说明可以参考 这条公告。
总结
本文主要介绍了如何在微信小程序下,进行用户的注册、登录,以及获取用户头像、昵称信息来完善用户帐号,快速创建小程序下的用户体系。
在登录注册上,我们可以通过openId
和unionId
快速创建微信体系下的用户帐号,包括实现微信下多端应用的帐号统一(如小程序、微信公众号,App微信登录)。
也可以借助微信一键获取手机号的能力,快速获取用户手机号,基于手机号来创建用户。还有openId
、unionId
和手机号的结合使用,来应对更多更复杂的场景。
另外,在整体的实现过程中,最重要以及容易出错的是整体的流程环节,各个节点如何流转,以及一些需要注意的点;小程序官方的文档比较分散,并且有些东西讲的并不是很清楚,对没有开发过这一块的人来说不是很友好。所以我这里主要介绍这些内容,相信大家根据上面流程图以及关键节点的说明,开发时再对照具体文档,应该就没有什么问题了。
整体流程清晰后,代码相对来说不是很复杂,对照文档就行,所以这里我没有放上相关的代码。如果在实现过程中有问题,也可以评论留言。
在总结这篇文章的过程中,发现小程序官方也有了一些改动,所以最终还是基于最新的API来整理的,新的流程比之前要简洁很多,特别是数据解密的那一块,现在基本不用考虑了。如果大家有在这新版本之前的问题,也欢迎评论留言和我交流。