全部产品
云市场

手机注册

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

自定义注册页面样例

样例1样例2

demo url

https://openaccount-login.aliyun.com/login/register.htm

注册流程

  1. 步骤1:用户输入手机号,如果手机号格式正确并且未注册,则进入填写账号信息步骤
  2. 步骤2:获取短信验证码,设置登录密码
  3. 步骤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?phone=" + encodeURIComponent(args.phone) + "&token=" + encodeURIComponent(args.token)) ;
  7. }
  8. //监听切换邮箱注册的消息
  9. if(args.action && args.action == "registerSwitch"&&args.resultCode=='100'){
  10. location.href = ("$openaccountLoginPath/emailRegister.htm?iFrameUrl=emailRegisterStep1.htm") ;
  11. }
  12. });
  13. miniLoginEmbedder.init({
  14. targetId : 'alibaba-register-iframe',
  15. appKey : '$!appKey',
  16. iframeUrl : 'https://openaccount-login.aliyun.com/login/mini_register.htm',
  17. lang:'$!lang',
  18. notLoadSsoView:'',
  19. notKeepLogin:'true',
  20. loginId:'',
  21. iframeWidth:'$!iframeWidth',
  22. iframeHeight:'990',
  23. addSwitchUrl: $!addSwitchUrl,
  24. autotest: $!autotest
  25. });
  26. </script>

相关参数说明

1.callbackUrl 是注册成功后的回调地址

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

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