自定义注册页面样例

demo url

https://openaccount-login.aliyun.com/login/emailResetPwd.htm?iFrameUrl=emailResetPwdStep1.htm

重置密码流程

步骤1：用户输入需要找回密码的邮箱，输入校验码，判断邮箱格式是否正确格式正确进入步骤2；格式错误，显示错误提示：邮箱格式错误，请重新输入；

步骤2：判断邮箱是否注册过未注册过，提示“此账号不存在”；注册过，进入步骤3；

步骤3：输入正确的邮箱和验证码后，点击发送找密邮件

步骤4：用户登录邮箱点击找密链接

步骤5：设置登录密码密码设置规则；6-20位英文字母，数字，符号；密码输入规则错误，提示“密码设置不符合规则，请重新设置”；

步骤6：再次确认登录密码，点击完成，找密成功确认密码与设置密码不一致，提示”两次输入的密码不一致，请重新输入”；密码输入与设置密码一致，点击确定，找密成功；

具体实现

Step1.在页面加入预留的DIV区块

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

Step2.引入Js脚本

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

Step3.通过引入的JS,初始化配置信息、监听登录事件、获取Url就行成功后跳转

<script>
var miniLoginEmbedder = new window.MiniLoginEmbedder();
    miniLoginEmbedder.addEvent('onMessage', function(args) {
        //监听找密完成的消息
        if(args.action && args.action == "emailResetPwd" && args.resultCode=='100'){
            location.href = ("$callbackUrl?email=" + encodeURIComponent(args.email) + "&token=" + encodeURIComponent(args.token)) ;
        }
    });
miniLoginEmbedder.init({
        targetId    : 'alibaba-email-resetpwd-iframe',
        appKey : '$!appKey',//业务方在淘宝开放平台申请的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参数邮箱找密第一步的值=emailResetPwdStep1.htm

3.email 邮箱找密第二步找密链接的email参数

4.emailToken 邮箱找密第二步找密链接的emailToken参数

5.hostUrl 邮箱找密第二步找密链接访问的url（业务方提供）

6.token，用户找密成功后，会返回token，可以添加在回跳的URL后，跳转到接入应用，应用拿到该token后去建立iot账号的登录态