MIP ACCESS细节剖析

什么是MIP ACCESS

MIP ACCESS是一种页面访问权限控制机制，可以容许网页发布者在页面元素中定义内容标记，并结合用户访问状况进行综合评价，从而展示或隐藏页面中内容，直至用户登陆、订阅或付费后才可以查看隐藏内容的一种全新阅读模式。

优点在哪里？

• 方式新颖：页面中任何元素都能加入权限控制标记，并根据标记解析状况进行展现或隐藏，打破了传统阅读只展现前n字的模式；

• 形式多样：页面内容能够是任何元素，包括纯文本、图片、视频等；

• 数据驱动：内容展示与否直接与发布者配置的数据相关联，根据解析状况决定是否展现相应元素；

• 配置灵活：发布者能够根据不一样的需求配置不一样接口，如数据请求接口、访问记录接口、登陆页面、登出页面等；

DEMO演示

在说具体实现和细节以前，咱们列举了四个DEMO认识一下ACCESS究竟是一个怎样的存在吧！

• DEMO1演示了ACCESS的基本功能，该案例提供了1篇首次点击免费文章和3篇免费文章，首次点击免费是指在第一次访问该域名下具备ACCESS功能的页面时免费查看的功能；若是访问文章数目超过4篇时，页面中配置有ACCESS属性的模块将会隐藏，登陆后方可查看所有；
  

• DEMO2演示的是登陆功能，案例制定的策略是登陆后全部文章均免费查看；
  

• DEMO3演示了ACCESS登出功能，登出后受到权限限制；
  

• 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 提问。