全部产品
云市场

邮箱找密

更新时间:2019-10-10 23:58:07

自定义注册页面样例

1234

demo url

https://openaccount-login.aliyun.com/login/emailResetPwd.htm?iFrameUrl=emailResetPwdStep1.htm

重置密码流程

步骤1:用户输入需要找回密码的邮箱,输入校验码,判断邮箱格式是否正确格式正确进入步骤2;格式错误,显示错误提示:邮箱格式错误,请重新输入;

步骤2:判断邮箱是否注册过未注册过,提示“此账号不存在”;注册过,进入步骤3;

步骤3:输入正确的邮箱和验证码后,点击发送找密邮件

步骤4:用户登录邮箱点击找密链接

步骤5:设置登录密码密码设置规则;6-20位英文字母,数字,符号;密码输入规则错误,提示“密码设置不符合规则,请重新设置”;

步骤6:再次确认登录密码,点击完成,找密成功确认密码与设置密码不一致,提示”两次输入的密码不一致,请重新输入”;密码输入与设置密码一致,点击确定,找密成功;

具体实现

Step1.在页面加入预留的DIV区块

  1. <div id="alibaba-register-iframe">
  2. <div id="alibaba-register-iframe-loading"></div>
  3. </div>

Step2.引入Js脚本

  1. <script type="text/javascript" charset="utf-8" src="https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228"></script>

Step3.通过引入的JS,初始化配置信息、监听登录事件、获取Url就行成功后跳转

  1. <script>
  2. var miniLoginEmbedder = new window.MiniLoginEmbedder();
  3. miniLoginEmbedder.addEvent('onMessage', function(args) {
  4. //监听找密完成的消息
  5. if(args.action && args.action == "emailResetPwd" && args.resultCode=='100'){
  6. location.href = ("$callbackUrl?email=" + encodeURIComponent(args.email) + "&token=" + encodeURIComponent(args.token)) ;
  7. }
  8. });
  9. miniLoginEmbedder.init({
  10. targetId : 'alibaba-email-resetpwd-iframe',
  11. appKey : '$!appKey',//业务方在淘宝开放平台申请的appKey
  12. iframeUrl : 'https://openaccount-login.aliyun.com/login/$currUrl',
  13. notLoadSsoView:'',
  14. notKeepLogin:'true',
  15. iframeWidth:'1000px',
  16. iframeHeight:'500px',
  17. email: '$email',
  18. emailToken: '$emailToken',
  19. hostUrl: '$hostUrl'
  20. });
  21. </script>

相关参数说明

1.callbackUrl 是找密成功后的回调地址

2.currUrl 邮箱找密第二步找密链接的iFrameUrl参数邮箱找密第一步的值=emailResetPwdStep1.htm

3.email 邮箱找密第二步找密链接的email参数

4.emailToken 邮箱找密第二步找密链接的emailToken参数

5.hostUrl 邮箱找密第二步找密链接访问的url(业务方提供)

6.token,用户找密成功后,会返回token,可以添加在回跳的URL后,跳转到接入应用,应用拿到该token后去建立iot账号的登录态