阿里巴巴&阿里云出品

在线购买
免费试用 | 客户端下载 | 登录

企业邮箱

常见问题

用户指南

服务等级协议

首页 > 企业邮箱 > 常见问题 > 邮箱使用

账密登录

作者： 浏览量：216 更新时间： 2019.11.12

自定义注册页面样例

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

demo url

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

具体实现

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

  1. <div id="alibaba-register-iframe">
  2.     <div id="alibaba-register-iframe-loading"></div>
  3. </div>

并添加默认样式

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

Step2.引入Js脚本

  1. <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就行成功后跳转

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

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

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

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

indexType

  1. 含义: 登录外标类型标识, 用来覆盖服务端根据外标的格式判断外标类型的逻辑
  2. 枚举值: “”(根据格式判断外标类型), “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,设备维度信息

上一篇：DelayPublishOsVersion
下一篇：新手引导

相关文档

©️2008-2040 阿里企业邮箱销售服务中心&阿里云企业应用服务中心 版权所有  

1v1尊享服务热线

抢 5折钜惠，豪礼相送：尊享1V1专员服务、赠送“对接钉钉”服务、赠送英文.cn/.com顶级域名

大客户解决方案咨询 QQ交谈

填写资料马上体验阿里企业邮箱

工作时间5-10分钟将由1对1顾问为您提供尊享服务

  • *公   司

    公司名称不能为空

  • *帐号数

    帐号数不能为空或输入有误

  • *电   话

    电话不能为空或输入有误

  • 联系人
  • 域名