| 標題 | 內容 |
|---|---|
| 類型 | 通用 |
| 支持布局 | 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 配合使用注意：
mip-bind.js必須在登錄組件前引用- 必須設置登錄組件的
id屬性 - 必須在
<mip-data>配置數據中設置一個以組件id為鍵名（key）的對象數據 - 在請求登錄（
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 事件
使用空數據（{}）渲染模板
)
)
概念)
