用户需求:
1、用户使用手机号和短信验证码登录系统
2、未注册过的手机号再登录时实现自动注册
3、新注册的账号只有7天的使用时间,过期后不允许进行登录
功能需求:
登录页面设计
图1.手机号登录
【验证码登录】规则说明:
1、手机号输入框,默认提示文案:请输入手机号。
2、验证码输入框,默认提示文案:请输入验证码。
3、获取验证码按钮默认置灰。
4、隐私政策复选框,默认未选中。
5、点击协议、政策,新开页面,进入对应页面。
6、登录按钮默认置灰。手机号和验证码输入满足条件时,按钮点亮。
7、点击注册,当前页面打开,进入注册页面。
【发送验证码】规则说明:
1、手机号满足输入条件,发送验证码按钮点亮
2、点击发送验证码,弹出防盗刷验证弹框,防盗刷使用第三方服务,具体逻辑参考服务提供方的接口文档。
3、通过弹框验证,发送验证码按钮文案改为120秒倒计时。倒计时期间不允许点击。
4、倒计时完成,按钮改为重新发送。点击重新发送,再次弹出防盗刷验证。
5、验证码有效期为180秒,重新发送后,上个验证码自动失效。
6、验证码接口根据IP地址限流,每个IP地址在120秒内可以调用两次发送接口。
7、接口限流后提示文案:操作过频繁请稍后再试
8、发送验证码前判断手机号是否已注册账号并且账号过期。若账号已过期则提示:账号已过期
图2.放到刷验证弹框
【手机号格式】判断规则:
1、判断时间:输入框有输入数据,失去焦点时判断手机号格式
2、手机号格式:国内已1开头的11位数字。若是国外手机号则不判断格式
3、错误提示:手机号格式不正确。样式参考页面原型
【验证码格式】判断规则:
1、判断时间:输入框有输入数据,失去焦点时。
2、验证码格式:6位数字
3、错误提示:验证码为6位数字。样式参考页面原型
【点击登录】规则说明:
点击登录按钮
1、为勾选同意协议,弹出同意协议气泡提示。
2、已勾选协议,判断验证码是否正确。
①不正确,显示错误提示:验证码错误,请重新输入。
②正确,判断账号是否注册
3、判断账号是否注册
①已注册,登录成功,进入首页
②未注册,创建用户信息存入数据库,进入首页
【验证码防盗刷】规则说明:
开发任务
前端开发任务
1、修改登录页面
2、实现防盗刷弹框和倒计时等页面控制逻辑
3、调用验证码发送接口和登录接口
后端开发任务
1、实现接口限流控制
2、提供验证码发送接口和登录接口
3、对接第三方验证码平台