自定义注册页面样例

demo url

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

注册流程

1. 步骤1：用户输入手机号，如果手机号格式正确并且未注册，则进入填写账号信息步骤
2. 步骤2：获取短信验证码，设置登录密码
3. 步骤3：点击完成，注册成功

具体实现

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

<div id="alibaba-register-iframe">
    <div id="alibaba-register-iframe-loading"></div>
</div>

2.引入js脚本

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

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

<script>
    var miniLoginEmbedder = new window.MiniLoginEmbedder();
        miniLoginEmbedder.addEvent('onMessage', function(args) {
          //监听注册完成后的消息
          if(args.action && args.action == "register"&&args.resultCode=='100'){
              location.href = ("$callbackUrl?phone=" + encodeURIComponent(args.phone) + "&token=" + encodeURIComponent(args.token)) ;
            }
            //监听切换邮箱注册的消息
            if(args.action && args.action == "registerSwitch"&&args.resultCode=='100'){
                location.href = ("$openaccountLoginPath/emailRegister.htm?iFrameUrl=emailRegisterStep1.htm") ;
            }
        });
      miniLoginEmbedder.init({
            targetId    : 'alibaba-register-iframe',
            appKey : '$!appKey',
            iframeUrl   : 'https://openaccount-login.aliyun.com/login/mini_register.htm',
            lang:'$!lang',
            notLoadSsoView:'',
            notKeepLogin:'true',
            loginId:'',
            iframeWidth:'$!iframeWidth',
            iframeHeight:'990',
            addSwitchUrl: $!addSwitchUrl,
            autotest: $!autotest
        });
  </script>

相关参数说明

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

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

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