账密登录
更新时间:
自定义注册页面样例
支持多种账号格式,包括手机、邮箱、会员名
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,暂未对外提供验证服务;
umid,设备维度信息
反馈
- 本页导读 (0)
文档反馈