TapTap标注：登录及注册篇

点击⑦微信 icon：

• 若为已授权微信账号，则自动登录，并获取用户身份信息，返回之前页面，登录成功；
• 若为未授权微信账号，则跳转至微信授权登录页面，用户授权登录后，获取新用户身份信息并创建新用户账号，返回之前浏览页面，登录成功。

（详情参考微信接口文档）

点击⑧QQ icon：

• 点击进入QQ授权登录页面，点击“QQ授权登录”。若为已授权QQ账号，并获取用户身份信息，返回之前页面，登录成功。若为未授权QQ账号，用户点击“QQ授权登录“后，获取新用户身份信息并创建新用户账号，返回之前浏览页面，登录成功。
• 点击进入QQ授权登录页面。

（详情参考QQ移动应用接入要求）

⑨ 验证码悬浮框

（验证码悬浮框）

功能描述：用户输入所接收到的6位数字验证码，进行验证码的验证，验证通过则登录成功。

交互说明：

验证码悬浮框弹出时，背景暗化，视觉上突出验证码悬浮框(灯箱效果），同时在页面底部弹出数字键盘。

（注：验证码悬浮框不能遮挡LOGO）

a. 关闭

需求描述：点击，关闭验证码悬浮框，灯箱效果消失，返回至手机登录及注册页面。

b. 手机验证码输入框

需求描述：点击手机验证码输入框，在无数字键盘的情况下，可从手机底部再次弹出数字键盘。

用户在输入字符时，必须按顺序从左至右依次输入6个数字，并且会给予用户当前所输入字符的位置提示，如图所示：

用户输入完6位数字后，且有网络连接，后端校验，是否符合条件：

• a. 用户输入的验证码与所发送的验证码短信内的验证码一致
• b. 用户所输入的验证码，距离最近一次所发送的验证码时间间隔不超过15分钟。

若不满足a/b两者条件，则6个输入框边框全变红色，并以红色文字提示用户“验证码错误”，如下图所示：

若满足条件，则后台校验用户身份：

• 若为已注册用户，登录成功，获取用户信息，返回至上级页面；
• 若为未注册用户，则自动注册，录入新用户信息（头像、ID、名称）并登录，返回至上级页面。

补充说明：

• 仅可输入数字，每个文本框仅可输入1个数字；
• 断网状态下，无法进行验证码校验，提交失败，底部悬浮提示”请检查网络连接，然后重试“，悬浮3s后逐渐消失；
• 用户使用数字键盘中的清除功能时，将会清除文本框内所有数字。

c. 用户手机号码信息提示

功能描述：向用户提示短信验证码所发送的手机号码，便于用户进行手机号码的二次确认。

信息提示：

字符提示用户验证码已发送至其手机号，格式为”短信验证码已发送至xxxxx“。

示例：“短信验证码已发送至+8611111111111”。

规则限制：

其中，符号数字为用户所提交的国家/地区区号与手机号组成（后端提取）。

d. 倒计时提示

提示用户距离下次获取验证码的实时时间，不可点击，示例：

倒计时结束后文字提示变为“再次发送”，可点击，点击”再次发送“，将会再次发送一条新的验证码短信给用户，倒计时结束后：

规则限制：

假设已发送至用户的验证码短信为X条：

• 当X<=10时，向用户每发送一条短信验证码，用户需等待60s，倒计时结束之后，用户点击”再次发送“，则再次向用户发送一条新的验证码短信。
• 当X>10时，向用户每发送一条短信验证码，用户需等待(X-10)*60s+60s ， 倒计时结束之后，用户点击”再次发送“，则再次向用户发送一条新的验证码短信。

向用户发送超过10条短信的8小时之后，重置发送验证码短信的时间限制。

3.2.2.2 功能点2：邮箱登录

1）用户场景

用户在未登录状态下，需要进行邮箱登录时。

2）功能描述

用户输入邮箱地址账号及登录密码进行登录。

断网情况下，可正常跳转、查看此页面。

3）输入/前置条件

必要条件：用户为未登录状态。

点击手机号登录及注册页面中的邮箱登录，跳转至此页面。

4）需求说明

① 关闭

点击，关闭整个登录页面，并返回至之前浏览页面。

② 邮箱地址输入框

需求描述：

文本框无字符时，文本框文字提示：请输入邮箱地址，如下图所示：

点击文本框，底部弹出英文键盘。

文本框有字符时，显示“清空文本框”按钮 ,若文本框无字符时则隐藏此按钮。点击”清空文本框“按钮可清空文本框内容,如下图所示：

规则限制：邮箱地址格式要求：登录名@主机名.域名。

③ 登录密码

需求描述：点击文本框，若手机自带密码输入的安全键盘，则底部弹出安全键盘，若无则弹出英文键盘。

文本框无字符时，文本框文字提示”请输入登录密码“，如下图所示：

用户输入字符时，文字提示消失，如下图所示：

点击“或”可切换文本框内字符不可见/可见状态。

代表文本框内的字符为不可见状态，一个黑点代表一个字符，如下图所示：

代表文本框内的字符为可见状态，如下图所示：

规则限制：文本框默认为不可见状态。

④ 忘记密码

点击“忘记密码？”，底部弹出“浏览器”选择页面。

用户选择浏览器，跳转至“https://www.taptap.com/password/email”。

⑤ 邮箱登录

前端校验：

• 邮箱地址符合邮箱地址格式要求（格式要求：登录名@主机名.域名）；
• 密码文本框不为空。

符合以上要求，登录按钮亮起，即可点击。不符合以上要求，登录按钮变灰，不可点击。

不符合格式要求的登录按钮，不可点击状态：

符合格式要求的登录按钮，可点击状态：

若用户无网络连接，点击登录，底部悬浮文字提示”登录失败请检查网络连接，然后重试”，停留3s后逐渐消失，如下图所示：

若有网络链接，则提交用户所填写的邮箱地址与密码，进行后端验证：

登录成功：

若此邮箱地址存在于后端数据库并且用户所提交密码与之匹配，则登录成功，并获取用户信息，返回上级页面。

登录失败：

• 邮箱地址不存在于后端数据库；
• 邮箱地址存在于后端数据库，但用户所提交的密码与之不匹配。

则登录失败，红色文字提示”用户名或密码输入错误，请重新输入“，如下图所示：

⑥ 手机登录及注册

点击跳转至”手机登录与注册“页面。

补充说明：断网条件下，可正常显示此页面。

⑦&⑧ 第三方登录

需求描述：

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!