全部产品

手机注册

自定义注册页面样例

样例1样例2

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账号的登录态