全部产品
云市场

手机短信验证码登录

更新时间:2019-11-12 11:45:52

自定义注册页面样例

样例

demo url

https://openaccount-login.aliyun.com/login/register.htm

具体实现

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();
  3. //监听登录完成后的消息,resize已被监听
  4. miniLoginEmbedder.addEvent('onMessage', function(args) {
  5. if(args.action && args.action == "loginResult"){
  6. if(args.resultCode=='100'){
  7. location.href = "https://lntcbc/login/loginSuccess.htm";//应用回跳地址
  8. }
  9. }
  10. });
  11. miniLoginEmbedder.init({
  12. targetId: 'alibaba-login-iframe',//页面预留的DIV id
  13. appKey : 'aliyun',//业务方在IoT平台申请的appKey
  14. iframeUrl :'https://openaccount-login.aliyun.com/login/phoneCode.htm' ,//接入iframe框的url 登录:mini_login.htm,重置密码:mini_findpwd.htm,注册mini_register.htm
  15. lang:'zh_cn',//国际化语言,比如en_US,zh_CN等
  16. notKeepLogin:'true',
  17. notLoadSsoView:'true',
  18. isMobile:'false|true'//是否手机上访问 默认false
  19. // 更多样式指定 可以参见https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
  20. });
  21. </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>
  12. <div id="alibaba-login-iframe">
  13. <div id="alibaba-login-iframe-loading">
  14. </div>
  15. </div>
  16. <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>
  17. <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/aliyun/account/0.0.8/js/login/login.js?v=579228"></script>
  18. <script type="text/javascript" charset="utf-8" src="https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228"></script>
  19. <script>
  20. var miniLoginEmbedder = new window.MiniLoginEmbedder();
  21. //监听登录完成后的消息,resize已被监听
  22. miniLoginEmbedder.addEvent('onMessage', function(args) {
  23. if(args.action && args.action == "loginResult"){
  24. if(args.resultCode=='100'){
  25. location.href = "https://lntcbc/login/loginSuccess.htm";//应用回跳地址
  26. }
  27. }
  28. });
  29. miniLoginEmbedder.init({
  30. targetId: 'alibaba-login-iframe',
  31. appKey : 'aliyun',//业务方在淘宝开放平台申请的appKey
  32. iframeUrl :'https://openaccount-login.aliyun.com/login/phoneCode.htm' ,
  33. lang:'zh_cn',
  34. notKeepLogin:'true',
  35. notLoadSsoView:'true',
  36. isMobile:'false|true'
  37. // 更多样式指定 可以参见https://openaccount-login.aliyun.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
  38. });
  39. </script>
  40. </body>
  41. </html>

登陆返回参数

action,操作名称:loginResult;

resultCode 登陆结果code,100表示成功,其他为登陆异常;

titleMsg 登陆异常提示信息,只有异常才返回;

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

ssoToken,目前支持特定业务签发的一次性免登token,暂未对外提供验证服务;umid,设备维度信息