全部产品
云市场

手机找密

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

自定义注册页面样例

样例1样例2样例3

demo url

https://openaccount-login.aliyun.com/login/mini_findpwd.htm?appKey=23082328&styleType=vertical&notKeepLogin=true&emailEnabled=true&addSwitchUrl=true&rnd=0.055072577875964424

重置密码流程

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

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

步骤3:判断手机号在24小时内已经发送短信量达到20次是,错误提示:手机号注册账号次数已达上限,请在24小时后再试;否,进入步骤4;

步骤4:通过人机判断是否弹出验证码是,采集UA和UMID,调用安全图片验证码服务化接口显示图片验证码,进入步骤4;否,进入步骤6;

步骤5:判断手机号在24小时内已经发送短信量达到20次是,错误提示:此手机号发送短信量已达上限,请在24小时后再试;否,进入步骤4;

步骤6:发送验证短信,用户输入短信验证码,点击下一步按钮校验成功,进入到步骤7;校验失败,错误提示:验证码错误或失效, 提示:“校验码错误”、验证码验证错误次数超过5次,提示 “校验码错误次数过多,请重新获取”、验证码超过1小时5次,点击重新发送,提示“校验码发送过于频繁,请稍后再试”、手机号在24小时内发送超过20条短信,提示“此手机号发送短信量已达上限,请24小时后再试”;

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

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

具体实现

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 == "findpwd"&&args.resultCode=='100'){
  6. location.href = "$callbackUrl??appKey=***&phone=" +args.phone + "&token=" + encodeURIComponent(args.token);
  7. }
  8. //监听切换邮箱找密的消息
  9. if(args.action && args.action == "resetPwdSwitch"&&args.resultCode=='100'){
  10. location.href = ("$callbackUrl?iFrameUrl=emailResetPwdStep1.htm") ;
  11. }
  12. });
  13. miniLoginEmbedder.init({
  14. targetId : 'alibaba-findpwd-iframe',
  15. appKey : '$!appKey',
  16. iframeUrl : 'https://openaccount-login.aliyun.com/login/mini_findpwd.htm',
  17. lang:'$!lang',
  18. notLoadSsoView:'',
  19. notKeepLogin:'true',
  20. loginId:'',
  21. iframeWidth:'1000px',
  22. iframeHeight:'500px',
  23. addSwitchUrl: $!addSwitchUrl,
  24. autotest: $!autotest
  25. });
  26. </script>

相关参数说明

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

2.appKey IoT平台申请的应用appkey

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