使用ivx注册手机账号的经验总结

在一些案例中，我们需要用户注册并登陆才能正常使用功能或者浏览信息，之前有用过添加微信公众号组件的方式，让用户在微信环境下打开案例发起微信公众号登录，或者将案例的类型选择为小程序采用微信小程序登录。除了这两种方式以外，ivx也提供了手机号注册登录的方法，今天我们就说一说手机注册登录的具体操作。

一.用户组件
手机注册登录同样需要使用到用户组件，我们可以看到其中默认字段包含手机号、openID、unionID和邮箱四个字段，它们分别是用户组件几种注册登录方式的登录凭证，用户表中每条用户信息之只能对应一种登录方式且不能修改，但可以同时获取用户的其它信息作为附属信息。另外我们也可以自己添加一些额外字段适用于不同案例。


二.注册流程
下面就是手机注册的流程示意图，可以看出完成一次注册操作需要进行两次验证。首先是图片验证，这一步骤中图片ID作为唯一标识，服务端会通过用户返回的图片ID去数据库中查找正确答案，判断验证是否成功。同时用户还需在返回信息中加入自己的手机号，这样验证成功后服务端就可以直接发送手机验证码。最后，用户是将手机验证码和注册信息一起提交到服务端，手机验证码无误即可将注册信息写入用户组件完成注册。

三.登录
手机和邮箱类型的登录中，用户注册账号后可以手动填写用户名（手机号或者邮箱）和密码发起登录。另外，用户登录过一次之后，后台会通过http only 的cookie（即后台服务设置的cookie）将当前用户的登录令牌存储在客户端浏览器，我们可以在应用初始化的时候，通过此登录令牌去获取当前用户的信息。因此，用户只要不手动清除cookie，就可以在应用初始化时自动登录，无需再次输入用户名密码。


四.案例模型
1.初始化自动登录
在案例中我们添加一个空白的页面组件作为首页。当此页面显示时，让用户组件获取当前用户的信息，如果获取结果中当前用户是否匿名为否且登录类型为0（即手机号登录），则说明自动登录成功就直接跳转到个人页面，否则就跳转到登录/注册页让用户手动登录。

2.登录与注册页
登录和注册模块是分别使用两个横幅组件搭建的，通过if容器和文本变量“登录/注册”选择展示哪一模块，用户点击“暂无账号，前往注册”或者注册按钮并注册成功后都会更改文本变量的值。

3.登录
点击登录按钮会调用登录动作组，首先判断密码和手机号两个输入框的内容是否为空，若为空就对用户进行一个提示，非空则令用户组件发起手机密码登录，登录成功后会将用户信息保存到前台变量中并跳转到个人页面，失败则返回失败原因，例如账号不存在，密码错误等。


4.注册
若用户没有账号则需要进行注册，在点击“暂无账号，前往注册”时会先调用获取图片验证动作组，令用户组件发送图片和图片ID并保存在前台的变量中，然后让登陆模块隐藏，切换到注册模块。这时用户输入完昵称、手机号、密码和图片验证码的计算结果就可以点击获取短信验证码的按钮了。


点击后系统会将之前保存的图片ID和用户的计算结果一同提交给用户组件，如果提交失败我们需要返回失败原因进行提示，并且如果失败原因为图片验证码错误则直接重新获取一份图片验证码；如果提交成功并且后台确认计算结果无误则将短信验证码发送到刚刚提交的手机号中。

收到短信验证码后，我们就可以提交我们的短信验证码和注册信息令用户组件发起手机注册了，注册成功后可以直接跳转显示登录界面将刚刚注册的手机号填入登录框，让用户进行登录；如果用户信息不全或者注册失败则对用户进行相应提示。

以上就是手机号注册登录的具体操作步骤，其本身流程并不复杂，大家也可以自己尝试一下制作一个邮箱注册的模型。其实这类功能模块中最重要的是当用户在某一步骤出错时给出明确的错误原因，引导用户完成操作流程。

标签：手机号,登录,账号,用户,验证码,注册,组件,ivx,经验总结
来源： https://blog.51cto.com/14556317/2489728