MIP ACCESS 细节剖析

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脚本;

    1
    <script type="text/javascript" src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
  • 定义script配置标签,并配置以下信息:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <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表达式中需要进行计算的数据;
    • pingback:计量接口,每次访问页面之后,通过该url发送请求到开发者服务器,由其对数据进行管理,如每访问一次计数减1;
    • noPingback:是否允许计量;
    • login:登陆相关接口,可以是一个map,如下:

      1
      2
      3
      4
      "login": {
      "login": "https://publisher.com/login.html?rid={READER_ID}",
      "logout": "https://publisher.com/logout.html?rid={READER_ID}"
      }
    • authorizationFallbackResponse:如果Authorization接口请求失败,需要在这里配置相关接口参数作为backup;

      1
      2
      3
      4
      "authorizationFallbackResponse": {
      "error": true,
      "access": false
      }
    • authorizationTimeout:Authorization接口请求超时时间,默认为3s;

  • mip-access属性来书写表达式

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