文档中心 > 云账号和分享服务

客户端集成(PC)

更新时间：2016/01/19 访问次数：25822

登录

自定义登录页面

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

实现

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

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

并添加默认样式

1
2
3
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脚本

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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://login-openaccount.taobao.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://login-openaccount.taobao.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
    });
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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://login-openaccount.taobao.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://login-openaccount.taobao.com/login/mini_login.htm' ,
        lang:'zh_cn',
        notKeepLogin:'true',
        notLoadSsoView:'true',
        isMobile:'false|true'
       // 更多样式指定 可以参见https://login-openaccount.taobao.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
    });
</script>
</body>
</html>

登陆返回参数：

  • action，操作名称：loginResult;
  • resultCode 登陆结果code,100表示成功，其他为登陆异常；
  • titleMsg 登陆异常提示信息，只有异常才返回；
  • loginId 本次登陆账号（用户输入的账号名）
  • token，用户登陆成功后，会返回token，可以添加在回跳的URL后，跳转到接入应用，应用拿到该token，ISV的服务端需要使用taobao.open.account.validate进行Token的校验，获得当前的用户的账号。拿到本次登陆用户的ID信息，然后建立应用的登录态 (见服务端集成介绍）
  • ssoToken，目前支持特定业务签发的一次性免登token，暂未对外提供验证服务；
  • umid,设备维度信息

注册

自定义注册页面

注册流程：

  • 步骤1：用户输入手机号，点击获取短信校验码，判断手机号格式是否正确
    格式正确进入步骤2；
    格式错误，显示错误提示：手机号格式错误，请重新输入；

  • 步骤2：判断手机号是否注册过
    未注册过，进入步骤3；
    注册过，提示“此手机号已经注册过，请更换手机号”；

  • 步骤3：判断手机号在24小时内已经发送短信量达到20次
    是，错误提示：此手机号发送短信量已达上限，请在24小时后再试；
    否，进入步骤4；

  • 步骤4：通过人机判断是否弹出验证码
    是，采集UA和UMID，调用安全图片验证码服务化接口显示图片验证码，进入步骤4；
    否，进入步骤6；

  • 步骤5：用户输入图片验证码，校验输入是否正确
    输入正确，点击确认，采集UA和UMID，调用安全短信服务化接口，进入步骤5；
    输入错误，提示：校验码输入错误；

  • 步骤6：发送验证短信，用户输入短信验证码，点击下一步按钮
    校验成功，进入到步骤7；
    校验失败，错误提示：
    验证码错误或失效， 提示：“校验码错误”、
    验证码验证错误次数超过5次，提示 “校验码错误次数过多，请重新获取”、
    验证码超过1小时5次，点击重新发送，提示“校验码发送过于频繁，请稍后再试”、
    手机号在24小时内发送超过20条短信，提示“此手机号发送短信量已达上限，请24小时后再试”；

  • 步骤7：设置登录密码
    密码设置规则；6-20位英文字母，数字，符号；
    密码输入规则错误，提示“密码设置不符合规则，请重新设置”；
    步骤8：再次确认登录密码，点击完成，注册成功；
    确认密码与设置密码不一致，提示”两次输入的密码不一致，请重新输入”；
    密码输入与设置密码一致，点击完成，注册成功；

    实现

    在页面加入预留的DIV区块




并添加默认样式

1
2
3
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-register-iframe-loading { display:none; }

引入Js脚本

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    var miniLoginEmbedder = new window.MiniLoginEmbedder();
 
    //监听登录完成后的消息，resize已被监听
    miniLoginEmbedder.addEvent('onMessage', function(args) {
             if(args.action && args.action == "register"){
                if(args.resultCode=='100'){
                    location.href = "https://lntcbc/login/registerSuccess.htm";//应用回跳地址
                }
 
          }
    });
    miniLoginEmbedder.init({
        targetId: 'alibaba-login-iframe',
        appKey  : 'aliyun',//业务方在淘宝开放平台申请的appKey
        iframeUrl   :'https://login-openaccount.taobao.com/login/mini_register.htm' ,
        lang:'zh_cn',
        notKeepLogin:'true',
        notLoadSsoView:'true',
        isMobile:'false|true'
        // 更多样式指定 可以参见https://login-openaccount.taobao.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
    });
</script>

注册返回参数：

  • action，操作名称：register;
  • resultCode 注册结果code,100表示成功，其他为注册异常；
  • titleMsg 注册异常提示信息，只有异常才返回；
  • phone 本次注册的手机号
  • token，用户注册成功后，会返回token，可以添加在回跳的URL后，跳转到接入应用，应用拿到该token，ISV的服务端需要使用taobao.open.account.validate进行Token的校验，获得当前的用户的账号。拿到本次登陆用户的ID信息，然后建立应用的登录态 (见服务端集成介绍）
  • ssoToken，目前支持特定业务签发的一次性免登token，暂未对外提供验证服务；

重置密码

自定义重置密码页面

重置密码流程：

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

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

  • 步骤3：判断手机号在24小时内已经发送短信量达到20次
    是，错误提示：手机号注册账号次数已达上限，请在24小时后再试；
    否，进入步骤4；

  • 步骤4：通过人机判断是否弹出验证码
    是，采集UA和UMID，调用安全图片验证码服务化接口显示图片验证码，进入步骤4；
    否，进入步骤6；

  • 步骤5：判断手机号在24小时内已经发送短信量达到20次
    是，错误提示：此手机号发送短信量已达上限，请在24小时后再试；
    否，进入步骤4；

  • 步骤6：发送验证短信，用户输入短信验证码，点击下一步按钮
    校验成功，进入到步骤7；
    校验失败，错误提示：
    验证码错误或失效， 提示：“校验码错误”、
    验证码验证错误次数超过5次，提示 “校验码错误次数过多，请重新获取”、
    验证码超过1小时5次，点击重新发送，提示“校验码发送过于频繁，请稍后再试”、
    手机号在24小时内发送超过20条短信，提示“此手机号发送短信量已达上限，请24小时后再试”；

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

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

实现

在页面加入预留的DIV区块




并添加默认样式

1
2
3
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-findpwd-iframe-loading{ display:none; }

引入Js脚本

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    var miniLoginEmbedder = new window.MiniLoginEmbedder();
 
    //监听登录完成后的消息，resize已被监听
    miniLoginEmbedder.addEvent('onMessage', function(args) {
             if(args.action && args.action == "findpwd"){
                if(args.resultCode=='100'){
                    location.href = "https://lntcbc/login/findpwdSuccess.htm";//应用回跳地址
                }
 
          }
    });
    miniLoginEmbedder.init({
        targetId: 'alibaba-login-iframe',
        appKey  : 'aliyun',//业务方在淘宝开放平台申请的appKey
        iframeUrl   :'https://login-openaccount.taobao.com/login/mini_findpwd.htm' ,
        lang:'zh_cn',
        notKeepLogin:'true',
        notLoadSsoView:'true',
        isMobile:'false|true'
        // 更多样式指定 可以参见https://login-openaccount.taobao.com/assets/js/mini-login-embedderV3.js?v=579228 里面的参数 如iframeWidth iframeHeight等等
    });
</script>

找密返回参数：

  • action，操作名称，固定字符串：findpwd;
  • resultCode 找密结果code,100表示成功，其他为找密异常；
  • titleMsg 找密异常提示信息，只有异常才返回；
  • phone 本次找密的手机号
  • token，用户找密成功后，会返回token，可以添加在回跳的URL后，跳转到接入应用，应用拿到该token，ISV的服务端需要使用taobao.open.account.validate进行Token的校验，获得当前的用户的账号。拿到本次登陆用户的ID信息，然后建立应用的登录态 (见服务端集成介绍）
  • ssoToken，目前支持特定业务签发的一次性免登token，暂未对外提供验证服务；

FAQ

关于此文档暂时还没有FAQ
有用(7) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号