全部产品
云市场

邮箱注册

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

自定义注册页面样例

样例1样例2样例3

注册流程

步骤1:用户输入邮箱,然后滑动验证码,如果邮箱格式正确并且不存在,则发送激活邮件步骤2:提示用户已经发送激活邮件到用户输入的邮箱

步骤3:用户登录邮箱点击激活链接,设置新的登录密码,点击完成,注册成功

具体实现

1.在页面加入预留的div区块

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

2.引入js脚本

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

3.通过引入的js,初始化配置信息、监听注册完成事件

  1. <script>
  2. var miniLoginEmbedder = new window.MiniLoginEmbedder();
  3. miniLoginEmbedder.addEvent('onMessage', function(args) {
  4. //监听注册完成后的消息
  5. if(args.action && args.action == "register"&&args.resultCode=='100'){
  6. location.href = ("$callbackUrl?email=" + encodeURIComponent(args.email) + "&token=" + encodeURIComponent(args.token)) ;
  7. }
  8. });
  9. miniLoginEmbedder.init({
  10. targetId : 'alibaba-email-register-iframe',
  11. appKey : '$!appKey',//业务方在Iot平台申请的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参数邮箱注册第一步的值=emailRegisterStep1.htm

3.email 邮箱注册第二步激活链接的email参数

4.emailToken 邮箱注册第二步激活链接的emailToken参数

5.hostUrl 邮箱注册第二步激活链接访问的url(业务方提供)

6.token,用户注册成功后,会返回token,可以添加在回跳的URL后,跳转到接入应用,应用拿到该token后去建立iot账号的登录态,具体可以参考:邮箱注册最佳实践