详解iVX中用户组件注册登录功能
用户组件用于制作应用中的基础用户登录/注册、用户管理以及用户权限设置功能。其本质是一个用户数据表,同时提供了以下主要功能性函数:1、发起登录行为(包括手机、邮箱、微信公众号、小程序等),返回是否成功及失败原因;2、获取当前用户信息;3、发起手机/邮箱注册行为,并记录注册信息;4、通过手机/邮箱重置密码;5、退出登录;6、用户访问权限控制;
工具/原料
谷歌Chrome浏览器
iVX编辑器
1.1、注册与登录(手机注册登录)-注册
1、搭建UI

2、获取图片验证码首先判断输入的手机号类型是否为手机,如果类型为手机(11位的数),则包含图片验证码的绝对定位容器可见。接下来硼讷侍逖再通过用户数据库获取图片验证码,并把图片验证码 ID 和图片验证码图片保存起来,在获取短信验证码时会用到。

3、获取短信验证码在具体应用中,考虑到验证码计算结果可能会出错的情况,可以根据返回的发送结果去执行不同的动作,如果验证码错误,则需要重新获取图片验证码。

4、手机注册通过用户数据库发起手机注册,提交用户已填写的手机号、短信验证码、昵称及密码,为保证所提交信息内容合法且非空,可以在发起手机注册前加上非空判断。

1.2、注册与登录(手机注册登录)-登录
1、通过用户数据库发起手机密码登录,这里要考虑登录成功和登录失败两种情况

1.3、注册与登录(手机注册登录)-保留登录状态
1、设置cookie用户登录成功之后,服务端会返回用户信息,同时也会向客户端设置一个cookie,用来存储当前用户的登录令牌(这个登录凭证是后台生成的一个随机字符串,对应当前用户记录,但不包含任何用户信息)。

2、读取cookie在本案例中,我们设置页面显示的时候去获取用户信息,判断用户是否为匿名用户,如果不是匿名用户,则 cookie中已存在该用户的登录令牌,直接获取用户信息发起登录即可;如果是匿名用户,则需要发起用户注册登录来获取令牌。


1.4、注册与登录(手机注册登录)-退出登录
1、退出登录只需要利用用户数据表的退出登录功能即可回到登录页。退出登录后用户下次进入网页需要重新登录。

2.1、注册与登录(邮箱注册登录)-注册
1、搭建UI

2、获取图片验证码首先判断输入的邮箱类型是否为邮箱,如果类型为邮箱,则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证洁船诼抨码,并把图片验证码 ID 和图片验证码图片存起来,在获取邮箱验证码时会用到。

3、获取邮箱验证码在具体应用中,考虑到验证码计算结果出错的情况,可以根据返回的发送结果去执行不同的动作,如果验证码错误,则需要重新获取图片验证码。图二是发送至我们邮箱的邮箱验证码。


4、邮箱注册通过用户数据库发起邮箱注册,提交用户已填写的邮箱号、 邮箱验证码、昵称及密码,为保证所需提交信息的内容合法且非空,可以在发起邮箱注册前加上非空判断。

2.2、注册与登录(邮箱注册登录)-登录
1、通过用户数据库发起邮箱登录,这里需要考虑登录成功和登录失败两种情况

3、注册与登录(手机验证码登录)
1、手机验证码登录与手机登录、邮箱登录共同点是仍然需要获取图片验证码和短信验证码;不同之处在于获取短信验证码时的类型应选为“登录验证”而不是之前的注册验证,另外最后在登录时,用户数据库应发起手机验证码登录。
2、搭建UI

3、获取图片验证码首先判断输入的手机类型是否为手机,如果类型为手机,则包含图片验证码的绝对定位容器可见。接下来再通过用户数据库获取图片验证洁船诼抨码,并把图片验证码 ID 和图片验证码图片存起来,在获取短信验证码时会用到。

4、获取短信验证码在具体应用中,考虑到验证码计算结果可能会出错的情况,可以根据返回的发送结果去执行不同的动作,如果验证码错误,则需要重新获取图片验证码。在这里要注意把获取短信验证码的类型选为登录验证。

5、手机验证码登录通过用户数据库发起手机验证码登录,提交用户已填写的手机号、短信验证码即可完成手机验证码登录。

4.1、微信登录与登录后绑定手机-微信登录
1、微信登录只需要通过用户数据库发起微信公众号登录,登录成功后即可获取到用户的openid,如果还需要获取到用户的其他信息,例如头像、昵称等,则要在配置中的授权方式一栏选择获取大权限。


4.2、微信登录与登录后绑定手机-微信登录后绑定手机
1、微信登录后绑定手机的步骤与手机注册的步骤基本相同,即获取图片验证码"获取短信验证码"绑定手机,在获取短信验证码时要注意把获取短信验证码的类型选为绑定手机验证。
2、搭建UI

3、获取图片验证码首先判断输入的手机号类型是否为手机,如果类型为手机(11位的数),则包含图片验证码的绝对定位容器可见。接下来硼讷侍逖再通过用户数据库获取图片验证码,并把图片验证码 ID 和图片验证码图片保存起来,在获取短信验证码时会用到。

4、获取短信验证码在具体应用中,考虑到验证码计算结果可能会出错的情况,可以根据返回的发送结果去执行不同的动作,如果验证码错误,则需要重新获取图片验证码。

5、绑定手机通过用户数据库绑定手机,提交用户已填写的手机号、短信验证码,即可实现微信登录后绑定手机的功能。

6、在这里要注意:微信绑定手机后,用户的主ID仍然是微信的openid。例如:我们在微信登录绑定手机后,向新建的测试数据库提交一条测试数据,提交成功后该数据库的提交用户字段依然是微信的openid,而非手机号。

