标题	内容
类型	通用
支持布局	responsive,fixed-height,fill,container,fixed
所需脚本	https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js

注意：使用该组件必须在引用本组件链接前引用 <script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script> 。

流程图

示例

基本用法

<mip-my-comment id="comment"><h2>评论-自定义组件</h2><p>评论组件默认认为未登录，向熊掌号登录组件添加 <code>login</code> 事件时触发评论组件的 <code>check</code> 方法。</p><ul><li>第一条评论</li><li>第两条评论</li><li>第三条评论</li></ul><div class="my-comment-editor">当前没有登录，<button on="tap:user.login">登录</button>。</div>
</mip-my-comment><mip-login-xzh
    id="user"data-endpoint="https://www.example.com/api/userinfo.php"data-client-id="testid"on="login:comment.login logout:comment.exit"
><template type="mip-mustache">{{#name}}hi，{{name}}，欢迎回来。{{/name}}{{^name}}你没有<button on="tap:user.login">登录</button>哦。{{/name}}</template><h3>上面只是一个登录状态的渲染片段</h3><template type="mip-mustache">{{#name}}hi，{{name}}，个人中心。可以是多个 template 标签{{/name}}</template>
</mip-login-xzh><button on="tap:user.login">登录</button>
<button on="tap:user.logout">退出</button>

<mip-my-comment> 组件部分 JS 代码：

/*** @file mip-my-comment 组件* @author MIP*/define(function (require) {
    'use strict';var customElement = require('customElement').create();var $ = require('zepto');customElement.prototype.build = function () {// 绑定评论登录this.addEventAction('login', function (event) {// 这里可以输出登录之后的数据// 获取用户信息event.userInfo;// 后端交互会话标识event.sessionId;});};return customElement;
});

实现购买按钮逻辑

<mip-login-xzhid="userlogin"...>...<template type="mip-mustache">{{#demoname}}<a href="/order/1.html" data-type="mip">购买</a>{{/demoname}}{{^demoname}}<a href="#" on="tap:userlogin.login">请先登录</a>{{/demoname}}</template>...
</mip-login-xzh>

实现个人中心

<mip-login-xzhid="userlogin"data-autologin="true"...>...<template type="mip-mustache"><ul><li>hi，{{demoname}}，你上次登录时间为 {{lasttime}} 。</li><li><a href="/order/list.html" data-type="mip">订单中心</a></li><li><a href="#" on="tap:userlogin.logout">退出</a></li></ul></template>...
</mip-login-xzh>

和 mip-bind 配合使用

<mip-data><script type="application/json">{"user": {}}</script>
</mip-data><p>是否登录：<input m-bind:checked="user.isLogin" type="checkbox"><span m-text="String(user.isLogin || false)"></span>
</p>
<p>会话标识：<span m-text="user.sessionId || '空'"></span>
</p>
<p>头像地址：<span m-text="user.userInfo.avatar || '空'"></span>
</p><mip-login-xzh
    id="user"...></mip-login-xzh><script src="https://c.mipcdn.com/static/v1/mip-bind/mip-bind.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script>
<script src="https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js"></script>

和 mip-bind 配合使用注意：

1. mip-bind.js 必须在登录组件前引用
2. 必须设置登录组件的 id 属性
3. 必须在 <mip-data> 配置数据中设置一个以组件 id 为键名（key）的对象数据
4. 在请求登录（type=login）、检查是否登录（type=check）、退出（type=logout）成功时，会调用 MIP.setData 设置数据，数据结构为：

 {"组件id": {"isLogin": Boolean,"userInfo": Response.data,"sessionId": String}
}

属性

id

说明：页面全局唯一 ID ，用来在其他元素中使用登录组件功能的入口
必选项：否
类型：string
示例：id="userlogin"

data-client-id

说明：熊掌号后端申请的 client_id
必选项：是
类型：string
示例：data-client-id=”testid”

data-autologin

说明：页面打开后未登录状态下自动跳转登录，常用于必须登录状态下才可以访问的页面
必选项：否
类型：boolean
示例：data-autologin="true"
默认值：false

data-endpoint

说明：后端源站数据接口链接，需要使用 https:// 或者 // 开头的源站地址，需要接口支持 HTTPS ，使用 POST 形式发送数据
必选项：是
类型：string
示例：data-endpoint="https://api.example.com/user/info.php"
说明：后端跨域说明 、后端数据说明 、会话凭证 sessionId

组件方法和事件

登录方法 - <div on="tap:登录组件id.login">

在其他元素中绑定点击时跳转登录页面。

注意：该方法会重新打开一个熊掌号登录页面，在登录成功后会透传 code 返回到当前页面，组件重新使用 code 参数去请求后端接口，这将导致当前页面未存储的数据丢失，如：表单用户填写内容。

退出方法 - <div on="tap:登录组件id.logout">

在其他元素中绑定点击时请求退出接口。

注意：该方法不会跳转页面，异步的调用 data-endpoint 接口去退出，并触发登录组件元素中的 logout:其他组件id.其他组件行为 事件。

登录成功事件 - <mip-login-xzh on="login:其他组件id.其他组件行为">

在登录成功时调用其他组件的组件行为。

这里写代码片登录失败事件 - <mip-login-xzh on="error:其他组件id.其他组件行为">

在登录请求后端返回值错误时触发。

退出成功事件 - <mip-login-xzh on="logout:其他组件id.其他组件行为">

在退出登录时（由 on=”tap:组件id.logout” 调用触发）调用其他组件的组件行为。

注意事项

配置百度熊掌号-网页授权域名

在熊掌号运营管理平台添加两个网页授权域名：

• 网站主域名 - 需要在登录组件的域名
• MIP-Cache 域名： mipcache.bdstatic.com
• MIP-Cache站点域名，规则：域名（.换成-）.mipcdn.com，如：
  www.mipengine.org ->www-mipengine-org.mipcdn.com
  demo.www.mipengine.org ->demo-www-mipengine-org.mipcdn.com

后端需要支持 CORS + withCredentials

CORS 文档
withCredentials 附带身份凭证的请求
登录组件（mip-login-xzh）已经在前端发送请求时处理了 withCredentials ，需要对应的接口服务响应头设置：

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: 对应请求的 origin

注意：出于安全考虑请对来源的 origin 进行判断，并正确的返回 Access-Control-Allow-Origin 字段，不能为 * 。

3. 后端数据说明

页面加载完成检查用户数据

请求：

名称	说明
请求链接	data-endpoint
请求类型	POST
请求参数	{type: 'check', sessionId: '会话凭证'}

未登录返回值说明：

{"status": 0,"sessionId": "会话凭证，必须返回","data": null
}

已登录返回值，整个返回值的 data 字段将认为是用户数据，在模板渲染时使用该数据渲染：

{"status": 0,"sessionId": "会话凭证，必须返回","data": {"name": "mipengine","key2": "value2"}
}

注意：上面 data.name 只是示例，具体什么数据请前、后端统一约定。

熊掌号登录

请求：

名称	说明
请求链接	data-endpoint
请求类型	POST
请求参数	{type: 'login', code: '熊掌号授权code', redirect_uri: '回调链接'}

源站后端服务需要使用 code 和 redirect_uri 参数去请求 获取网页授权 access_token 、获取授权用户信息 接口，并和源站的用户关联、记录用户登录状态。
处理成功，认为已登录，整个返回值的 data 字段将认为是用户数据，在模板渲染时使用该数据渲染：

{"status": 0,"sessionId": "会话凭证，必须返回","data": {"name": "mipengine","key2": "value2"}
}

如果 status 不为 0 触发 error 事件，如：

{"status": 403
}

退出

请求：

名称	说明
请求链接	data-endpoint
请求类型	POST
请求参数	{type: 'logout'}

返回值说明：

{"status": 0,"data": {"url": "https://www.example.com 退出成功跳转的链接地址 可选","title": "主页 自定义标题 可选"}
}

4. 会话凭证 sessionId

由于在 iOS 对跨域透传 cookie 的限制（https://webkit.org/blog/7675/intelligent-tracking-prevention/），在前端组件请求后端接口时（type=check 和 type=login），由后端生成当前会话唯一凭证并记录到服务端，把凭证返回前端 response.sessionId，前端组件将在 localStorage 中缓存下来，在下次发后端接口请求时携带该凭证，后端就当优先使用 cookie/session 验证，不存在时获取 POST 参数中的 sessionId 去校验。

注意：本地 localStorage 是以 data-endpoint 为粒度去缓存。

5. 组件内部模板 <template> 渲染和触发事件

组件内支持多个 <template type="mip-mustache"> 模板标签，在渲染时会把渲染的结果输出到 <div> 元素中，并且插入到 <template> 元素下方，如：

渲染和触发事件逻辑：

页面加载完成 - 因未登录，使用空数据（{}）渲染模板
页面请求用户信息
有 code - 发送登录数据
错误 - 触发 error 事件
成功
使用 response.data 重新渲染模板
触发 login 事件
无 code
未登录 - 忽略
已登录
使用 response.data 重新渲染模板
触发 login 事件
页面触发 登录组件ID.login 事件
未登录 - 跳转熊掌号登录授权页面
已登录 - 忽略
页面触发 登录组件ID.logout 事件
未登录 - 忽略
已登录
后端返回 response.data.url
跳转到 response.data.url
后端没有返回 response.data.url
触发 logout 事件
使用空数据（{}）渲染模板