自定义注册页面样例

样例1 支持多种账号格式，包括手机、邮箱、会员名

demo url

https://openaccount-login.aliyun.com/login/commonlogin.htm?appkey=23082328

具体实现

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

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

并添加默认样式

body{ background-color:#fff; }
#alibaba-login-iframe { margin:10px; margin-top:30px; border:3px solid #C9D7E2; padding:10px; position:absolute; overflow:hidden; }
#alibaba-login-iframe.iframe-show #alibaba-login-iframe-loading { display:none; }

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();
    //监听登录完成后的消息，resize已被监听
    miniLoginEmbedder.addEvent('onMessage', function(args) {
             if(args.action && args.action == "loginResult"){
                if(args.resultCode=='100'){
                    location.href = "https://lntcbc/login/loginSuccess.htm";//应用回跳地址 
                }
          }
    });
    miniLoginEmbedder.init({
        targetId: 'alibaba-login-iframe',//页面预留的DIV id
        appKey  : 'aliyun',//业务方在淘宝开放平台申请的appKey
        iframeUrl   :'https://openaccount-login.aliyun.com/login/mini_login.htm' ,//接入iframe框的url 登录：mini_login.htm,重置密码：mini_findpwd.htm,注册mini_register.htm
        lang:'zh_cn',//国际化语言，比如en_US，zh_CN等  
        notKeepLogin:'true',
        notLoadSsoView:'true',
        isMobile:'false|true'//是否手机上访问 默认false
       // 更多样式指定 可以参见https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
    });
</script>

Demo页面的源码，如何接入Iframe登录框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset='utf-8' />
    <style>
        body{ background-color:#fff; }
        #alibaba-login-iframe { margin:10px; margin-top:30px; border:3px solid #C9D7E2; padding:10px; position:absolute; overflow:hidden; }
        #alibaba-login-iframe.iframe-show #alibaba-login-iframe-loading { display:none; }
    </style>
</head>
<body>
    <div id="alibaba-login-iframe">
        <div id="alibaba-login-iframe-loading">
        </div>
    </div>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/aliyun/account/0.0.8/js/jQuery1.9.0.js?v=579228"></script>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/aliyun/account/0.0.8/js/login/login.js?v=579228"></script>
<script type="text/javascript" charset="utf-8" src="https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228"></script>
<script>
    var miniLoginEmbedder = new window.MiniLoginEmbedder();
    //监听登录完成后的消息，resize已被监听
    miniLoginEmbedder.addEvent('onMessage', function(args) {
             if(args.action && args.action == "loginResult"){
                if(args.resultCode=='100'){
                     location.href = "https://lntcbc/login/loginSuccess.htm";//应用回跳地址 
                }
          }
    });
    miniLoginEmbedder.init({
        targetId: 'alibaba-login-iframe',
        appKey  : 'aliyun',//业务方在淘宝开放平台申请的appKey
        iframeUrl   :'https://openaccount-login.aliyun.com/login/mini_login.htm' , 
        lang:'zh_cn',
        notKeepLogin:'true',
        notLoadSsoView:'true',
        isMobile:'false|true'
       // 更多样式指定 可以参见https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
    });
</script>
</body>
</html>

登录iframe组件定制化参数说明

indexType

含义: 登录外标类型标识, 用来覆盖服务端根据外标的格式判断外标类型的逻辑
枚举值: “”(根据格式判断外标类型), “1”(手机号码), “2”(邮箱), “3”(外部ISV账号ID), “4”(登录昵称)

loginId

1.含义: 登录框中账号输入框默认值

2.值范围: 无限制

loginIdPlaceHolder

1.含义: 登录框中账号输入框默认placeholder

2.值范围: 无限制, 但在国际化的情况下最好考虑下多语言传入

loginButtonValue

1.含义: 登录框中登录按钮的显示文案

2.值范围: 无限制, 但在国际化的情况下最好考虑下多语言传入

addSwitchUrl

1.含义: 是否增加mobile/email注册切换链接或 mobile/email找密切换链接

2.值范围: “true”, “false”, “”(默认为false)

addRegisterUrl

1.含义: 登录页面是否增加注册链接

2.值范围: “true”, “false”, “”(默认为false)

登录返回参数

action，操作名称：loginResult;

resultCode 登录结果code,100表示成功，其他为登录异常；

titleMsg 登录异常提示信息，只有异常才返回；

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

ssoToken，目前支持特定业务签发的一次性免登token，暂未对外提供验证服务；

账密登录