MIP ACCESS
是一種頁面訪問權限控制機制,可以容許網頁發佈者在頁面元素中定義內容標記,並結合用戶訪問狀況進行綜合評價,從而展示或隱藏頁面中內容,直至用戶登陸、訂閱或付費後纔可以查看隱藏內容的一種全新閱讀模式。javascript
方式新穎:頁面中任何元素都能加入權限控制標記,並根據標記解析狀況進行展現或隱藏,打破了傳統閱讀只展現前n字的模式;html
形式多樣:頁面內容能夠是任何元素,包括純文本、圖片、視頻等;前端
數據驅動:內容展示與否直接與發佈者配置的數據相關聯,根據解析狀況決定是否展現相應元素;java
配置靈活:發佈者能夠根據不一樣的需求配置不一樣接口,如數據請求接口、訪問記錄接口、登陸頁面、登出頁面等;git
在說具體實現和細節以前,咱們列舉了四個DEMO
認識一下ACCESS
究竟是一個怎樣的存在吧!github
DEMO1
演示了ACCESS
的基本功能,該案例提供了1篇首次點擊免費文章和3篇免費文章,首次點擊免費是指在第一次訪問該域名下具備ACCESS
功能的頁面時免費查看的功能;若是訪問文章數目超過4篇時,頁面中配置有ACCESS
屬性的模塊將會隱藏,登陸後方可查看所有;
json
DEMO2
演示的是登陸功能,案例制定的策略是登陸後全部文章均免費查看;
後端
DEMO3
演示了ACCESS
登出功能,登出後受到權限限制;
api
DEMO4
演示了重置數據的功能,重置會刪除後端數據,由各自策略而定,在重置成功後全部頁面的瀏覽記錄均被刪除;
安全
在講具體細節以前,你們先熟悉熟悉這些專有名詞吧!
Access Runtime
: MIP Javascript運行環境;
Access Content Markup
: 模塊中以屬性形式定義的,規定訪問權限的標示;
Authorization endpoint
: 受權接口,返回markup
解析數據;
Pingback endpoint
: 計量接口,存儲訪問數據;
開發者實現接口:全部接口的請求都依據cors
方案,包括Authorization
接口(返回解析DOM
元素展現與否的數據)、Pingback
接口,登錄相關接口相關邏輯;
引入mip
腳本;
<script type="text/javascript" src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
定義script
配置標籤,並配置如下信息:
<script id="mip-access" type="application/json"> { "authorization": "https://publisher.com/mip-access/api/mip-authorization.json?rid=READER_ID&url=CANONICAL_URL", "pingback": "https://publisher.com/mip-access/api/mip-pingback?rid=READER_ID", "login": "https://publisher.com/mip-access/login/?rid=READER_ID&url=CANONICAL_URL", "authorizationFallbackResponse": { "error": true, "access": false }, "type": "client" } </script>
- authorization:受權接口,返回mip-access表達式中須要進行計算的數據;<br> - pingback:計量接口,每次訪問頁面以後,經過該url發送請求到開發者服務器,由其對數據進行管理,如每訪問一次計數減1;<br> - noPingback:是否容許計量;<br> - login:登錄相關接口,能夠是一個map,以下:<br>
"login": { "login": "https://publisher.com/login.html?rid={READER_ID}", "logout": "https://publisher.com/logout.html?rid={READER_ID}" }
- authorizationFallbackResponse:若是Authorization接口請求失敗,須要在這裏配置相關接口參數做爲backup;
"authorizationFallbackResponse": { "error": true, "access": false }
- authorizationTimeout:Authorization接口請求超時時間,默認爲3s;
以mip-access
屬性來書寫表達式
<div mip-access=「access AND subscriber」>…</div>
上圖爲純前端方式實現ACCESS
的時序圖,下面就以這個引子來講一下ACCESS
的工做流程吧!
首先用戶在訪問頁面時,請求會發送到CDN
(頁面嵌套在Super Frame
中)或者開發者(單個MIP
頁面)本身的服務器上,此時返回html
文檔給用戶,這樣作是爲了讓用戶可以第一時間看到頁面,縮短請求的白屏時間;
在html
文檔返回以後啓動MIP Runtime
服務,並將頁面中以mip-access-hide
屬性標記的全部DOM
元素隱藏起來,同時根據開發中提供的Authorization
接口發起請求;
Authorization
接口若是請求成功,則經過其返回的數據解析html
文檔中的markup
,解析結果爲true
則展現元素,不然隱藏;若是請求失敗,MIP Runtime
會尋找html
文檔中以mip-access
爲標示的script
,獲取其中定義好的JSON
數據,並以authorizationFallbackResponse
字段中的內容做爲解析須要的數據;若是authorizationFallbackResponse
未定義則解析失敗;
頁面加載完成後若是開發者配置了noPingback: true
的選項,則不會發起Pingback
(該請求主要爲了讓server
記錄訪問數據)請求;不然發起請求並將數據傳遞給開發者server
進行保存,待下次訪問根據狀態返回相應的數據;
目前來講,純前端的ACCESS
實現方案適用與一些不涉及用戶信息和收費業務相關的簡單頁面,經過該方式能夠自由化的配置頁面中元素的展示方式;出於安全考慮和後續的須要,咱們也會根據需求量來之前端+server
的處理方式過濾html
文檔;
有任何問題能夠到 github issues 提問。