环境
- 微信开发者工具 Stable 1.06.2306020
- 云开发控制台 v1.5.47
- 调试基础库 2.32.2
需求
微信小程序的用户天然就是微信用户。但是,在此基础上,小程序可以有自己的用户管理,管理的是业务用户。比如说,A用他的手机,打开某个微信小程序,他可以登录自己的小程序账号(身份是教师),也可以登录B的小程序账号(身份是学生)。虽然在同一个微信账号下,但是小程序的账号是不同的。相应的,就需要有一套用户管理机制,在小程序里可以注册用户、登录、退出登录。
此外,小程序还应提供“微信一键登录”的功能,这样用户就不必记忆用户名和密码,可以直接通过微信账号登录小程序。当然,用户也可以使用账号密码的方式登录,二者的效果是一样的。
不管使用哪种登录方式,登录成功后,需将登录状态缓存在前端,这样,即使关闭了小程序,下次再打开时,就不用重新登录了。当然,用户可以显式退出登录。
分析
普通方式
如果不考虑微信环境,那么注册用户、登录、退出登录等功能,和其它平台相比,没有任何特殊之处:用户注册后,将信息持久化在后台数据库,下次用户登录时,后台验证用户名和密码,然后返回成功或者失败的消息。
微信方式
用户选择“微信一键登录”时,后台需要查看是否已经绑定用户名和openid(openid可以理解为微信用户针对小程序的唯一ID)。
- 如果已经绑定,则后台无需再验证用户名和密码,直接返回登录成功的消息(以及用户信息)。
- 如果尚未绑定,则后台返回“尚未注册”的消息,前端跳转到注册页面,注册功能和普通方式相同,唯一区别是持久化时,将用户信息和openid绑定。
设计
页面
有4个页面:
- 主页面(
myMain
):业务相关,和注册登录关系不大(提供“退出登录”功能) - 登录页面(
myLogin
):提供微信一键登录、账号密码登录、用户注册功能 - 账号密码登录页面(
myLoginById
):用户在此页面输入账号密码 - 注册页面(
myRegister
):用户在此页面注册账号
页面之间的跳转关系以及对应的登录状态:
- 打开小程序,进入主页面。查看本地缓存的登录状态,如果尚未登录,则显示“登录”按钮;如果已经登录,则显示“退出登录”按钮。
- 点击“登录”按钮,跳转到登录页面。
- 点击“退出登录”按钮,退出登录状态。
- 登录页面提供微信一键登录、账号密码登录、用户注册3个按钮。
- 点击“微信一键登录”按钮,如果登录成功,则跳转到主页面,并在本地缓存登录状态;如果登录失败(尚未绑定用户),则跳转到注册页面。
- 点击“账号密码登录”按钮,跳转到账号密码登录页面。
- 点击“用户注册”按钮,跳转到注册页面。
- 在账号密码登录页面,用户输入账号和密码,点击“登录”按钮。如果登录成功,则跳转到主页面,并在本地缓存登录状态;如果登录失败(用户名或密码有误),则仍留在本页面。
- 在注册页面,用户输入账号和密码,点击“注册”按钮。如果注册成功,则跳转到主页面,并在本地缓存登录状态;如果注册失败(用户名已存在),则仍留在本页面。
注意:有两种方式可以跳转到注册页面,“微信一键登录”和“账号密码登录”,这两种方式的不同之处在于,注册成功之后,前者需要和openid做绑定,后者不需要。
云函数
有3个云函数:
myLoginById()
:接收账号密码,验证其正确性,返回登录结果。myLoginByWeixin()
:查询openid是否已绑定某个账号。如果已经绑定,则返回成功,并返回用户信息;如果尚未绑定,则返回失败(严格说也不算失败,只是接下来用户需要补充注册信息)。myRegister()
:接收账号密码,查询账号是否已存在。如果账号不存在,则持久化用户信息,并返回成功;如果账号已存在,则返回失败。
代码
https://git.weixin.qq.com/wx_wxb6b7b29f5024c210/demoLogin
注:本例是为了演示注册登录的功能,只做了一个非常简单的原型,请聚焦在功能性上,忽略其它不足之处:
- 外观:没有使用CSS美化页面
- 逻辑:没有数据校验,比如ID和密码是否为空,密码长度和复杂度
- 安全性:基本没有安全措施,本地缓存登录状态,也只是简单的记录了一下用户ID
运行的注意事项
- 在云开发数据库中,确保已创建表
table0614
- 选中该表,然后点击“数据权限”页,选择“所有用户可读,仅创建者可读写”
- 本项目中,云函数没有上传部署,如果想要运行小程序,请在开发者工具中,右键单击“cloudfunctions”,选择“开启云函数本地调试”。在打开的窗口中,依次点击每个云函数,勾选右边的“开启本地调试”选项
- 注意:即使没有打开云函数本地调试,调用云函数也不会报错,而且会有返回内容。本例只是简单demo,并没有检查返回内容,一律当作是云函数返回的。所以,如果没有打开本地云函数,将导致逻辑有误,且并不报错(比如myOpenid会是“undefined”)。因此,切记要打开云函数本地调试(或者上传云函数)
测试案例
测试1
在未登录状态下打开小程序,进入“未登录的主页面”。
测试2
在已登录状态下打开小程序,进入“已登录的主页面”。
测试3
在已登录主页面,点击“退出登录”按钮,退出登录,显示未登录的主页面。
测试4
在未登录主页面,点击“登录”按钮,进入登录页面。
测试5
在登录页面,点击“微信一键登录”按钮(openid已绑定),进入已登录主页面。
测试6
在登录页面,点击“微信一键登录”按钮(openid未绑定),进入注册页面。
测试7
通过“微信一键登录”进入的注册页面,填写ID和密码,注册成功,进入已登录的主页面。
如果ID已存在,则注册失败。
测试8
在登录页面(参见测试4)点击“用户注册”按钮,进入用户注册页面。
填写ID和密码,注册成功,进入已登录的主页面。
如果ID已存在,则注册失败。
测试9
在登录页面(参见测试4)点击“账号密码登录”按钮,进入账号密码登录页面。
填写用户名和密码,登录成功,跳转到已登录主页面。
注意两种账号都需要测试一下:
- 普通注册的账号
- 通过微信一键登录注册的账号
填写错误的用户名和密码,登录失败。
参考
https://developers.weixin.qq.com/miniprogram/dev/framework