ivx基础教程 最全面讲解ivx中用户注册登录功能

  • A+
所属分类:ivx图文教程

注册与登录(手机注册登录)

·注册

第一步 搭建UI

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

·登录
通过用户数据库发起手机密码登录,这里要考虑登录成功和登录失败两种情况

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

ivx基础教程 最全面讲解ivx中用户注册登录功能

·退出登录
退出登录只需要利用用户数据表的退出登录功能即可回到登录页。退出登录后用户下次进入网页需要重新登录。

ivx基础教程 最全面讲解ivx中用户注册登录功能

注册与登录(邮箱注册登录)
预览地址:https://v4pre.h5sys.cn/play/DVp4Gt7P?email=1
邮箱注册的步骤与手机注册的步骤基本相同,即获取图片验证码-->获取邮箱验证码-->注册
·注册
第一步 搭建UI

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

下图是发送至我们邮箱的邮箱验证码。

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

·登录
通过用户数据库发起邮箱登录,这里需要考虑登录成功和登录失败两种情况

ivx基础教程 最全面讲解ivx中用户注册登录功能

注册与登录(手机验证码登录)
预览地址:https://v4pre.h5sys.cn/play/DVp4Gt7P?code=1
手机验证码登录与手机登录、邮箱登录共同点是仍然需要获取图片验证码和短信验证码;不同之处在于获取短信验证码时的类型应选为“登录验证”而不是之前的注册验证,另外最后在登录时,用户数据库应发起手机验证码登录。
第一步 搭建UI

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

微信登录与登录后绑定手机
预览地址:https://v4pre.h5sys.cn/play/DVp4Gt7P?wechat=1
·微信登录
微信登录只需要通过用户数据库发起微信公众号登录,登录成功后即可获取到用户的openid,如果还需要获取到用户的其他信息,例如头像、昵称等,则要在配置中的授权方式一栏选择获取大权限。

ivx基础教程 最全面讲解ivx中用户注册登录功能

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能

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

ivx基础教程 最全面讲解ivx中用户注册登录功能ivx基础教程 最全面讲解ivx中用户注册登录功能 ivx基础教程 最全面讲解ivx中用户注册登录功能

注意:微信登录、登录后绑定手机均需要在微信中操作。

【附】案例下载链接:https://latest.ivx.cn/ih5/app/template/download?id=100

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: