手机短信验证码登录

用户需求：

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、判断账号是否注册

①已注册，登录成功，进入首页

②未注册，创建用户信息存入数据库，进入首页

【验证码防盗刷】规则说明：

验证码发送后，需等待120秒才能再次发送

开发任务

前端开发任务

1、修改登录页面

2、实现防盗刷弹框和倒计时等页面控制逻辑

3、调用验证码发送接口和登录接口

后端开发任务

1、实现接口限流控制

2、提供验证码发送接口和登录接口

3、对接第三方验证码平台