自定义注册页面样例

注册流程

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

步骤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?email=" + encodeURIComponent(args.email) + "&token=" + encodeURIComponent(args.token)) ;
        }
    });
miniLoginEmbedder.init({
        targetId    : 'alibaba-email-register-iframe',
        appKey : '$!appKey',//业务方在Iot平台申请的appKey
        iframeUrl   : 'https://openaccount-login.aliyun.com/login/$currUrl',
        notLoadSsoView:'',
        notKeepLogin:'true',
        iframeWidth:'1000px',
        iframeHeight:'500px',
        email: '$email',
        emailToken: '$emailToken',
        hostUrl: '$hostUrl'
    });
</script>

相关参数说明

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

2.currUrl 邮箱注册第二步激活链接的iFrameUrl参数邮箱注册第一步的值=emailRegisterStep1.htm

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

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

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

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