1. 首页
  2. Docs
  3. 需求文档 2
  4. 新增登入注册找回密码

新增登入注册找回密码

概括:需要集成8种登入方式,1:电子邮件,2:手机号码(阿里云),3:QQ,4:微信,5:微博,6:Facebook,7:Twitter,8:google。
除了1-2的电子邮件,手机号码,这2种方式是点击后切换表单的形式外,其余的3-8的QQ,微信,微博,Facebook,Twitter,google均是在社交平台确认登录信息后返回网站时即自动注册成功,另外返回网站时弹出填写详细信息的弹窗。验证后弹出自动关闭不再提示,如果不验证则在登录情况下打开任何页面都会第一时间弹出窗口要求填写详细信息。

1:手机号码的图标需要更改一下,图标在下方,svg格式。
手机号码的图标
Stockholm-icons / Devices / iPhone-XCreated with Sketch.

2:电子邮箱

选择电子邮箱方式时,切换如下图的步骤表单。

3:手机号码

选择手机号码方式时,切换如下图的步骤表单。

4:当选择邮箱或手机号码时,点击下一步判断为是新用户时。

当用户在邮箱或手机号码输入了邮箱地址或者手机号码后,点击下一步时,需要判断是否是新用户,如果不是新用户则切换填写详细信息。

5:当选择邮箱或手机号码时,点击下一步判断为不是新用户时。

当用户在邮箱或手机号码输入了邮箱地址或者手机号码后,点击下一步时,需要判断是否是新用户,如果不是新用户则切换输入密码。
点击下一步时,需要判断邮箱验证码是否正确,2次输入的密码是否一致。(密码限制为6-18位,字母数字区分大小写,支持符号。)正确即可点击下一步,不正确则提示信息提示验证码或者2次密码不一致的错误提示。

6:当选择社交登录后。返回网站后判断是新用户。

当选择第三方社交登录时,返回网站后,判断是新用户则弹出填写详细信息的弹窗。使用第三方社交登录的用户不用写昵称,获取相应社交的昵称作为网站昵称。

7:忘记密码。

当选择第三方社交登录时,返回网站后,判断是新用户则弹出填写详细信息的弹窗。
7:下面图片是判断输入的邮箱为已经注册用户时,直接切换为输入密码,用户输入密码正确后即可登录,用户登录后自动刷新页面。
8:上面的全部示例图片我是用主题的分享弹窗功能本地html修改自慰做的,方便表达。
实际修改时的样式也请按照分享功能的弹窗效果来做,列如弹窗的进入效果,关闭效果等,宽度500px等,实现风格统一。
9:社交登录的密匙填写,在外观-自定义-高级-最后一项添加一个社交登入的设置功能。打开后可以填写:手机号码,QQ,微信,微博,Facebook,Twitter,google的key。
10:打开社交登入选项卡之后,可以向下图这样填写对应的密匙和key等。(样式示例来自外观-自定义-页脚-社交)
这篇文章对您有所帮助吗? 2

需要我们的帮助?