MIP ACCESS细节剖析

什么是 MIP ACCESS

MIP ACCESS 由百度 MIP 团队开发的一种页面访问权限控制机制,能够允许网页发布者在页面元素中定义内容标记,并结合用户访问情况进行综合评价,从而展现或隐藏页面中内容,直至用户登录、订阅或付费后才能够查看隐藏内容的一种全新阅读模式。

优势在哪里?

  • 方式新颖:页面中任何元素都能加入权限控制标记,并根据标记解析情况进行展示或隐藏,打破了传统阅读只展示前 n 字的模式。
  • 形式多样:页面内容可以是任何元素,包括纯文本、图片、视频等。
  • 数据驱动:内容展现与否直接与发布者配置的数据相关联,根据解析情况决定是否展示相应元素。
  • 配置灵活:发布者可以根据不同的需求配置不同接口,如数据请求接口、访问记录接口、登录页面、登出页面等。

DEMO 演示

在说具体实现和细节之前,我们从完整 DEMO 里截取了四个片段,和大家一起认识 ACCESS 到底是一个怎样的存在!

  • DEMO1 演示了 ACCESS 的基本功能,该案例提供了 1 篇首次点击免费文章和 3 篇免费文章,首次点击免费是指在第一次访问该域名下具有 ACCESS 功能的页面时免费查看的功能;如果访问文章数目超过 4 篇时,页面中部分内容将会隐藏,登录后方可查看全部。

  • DEMO2 演示的是登录功能,案例制定的策略是登录后所有文章均免费查看。

  • DEMO3 演示了 ACCESS 登出功能,登出后恢复到原状态,不可访问的文章依然无法访问,需登陆后方可获得权限。

  • DEMO4 演示了重置数据的功能,重置会删除后端记录的数据,页面刷新后恢复到第一次访问的状态。

名词解释

在讲具体细节之前,大家先熟悉熟悉这些专有名词吧!
- Access Runtime: MIP Access Javascript 运行环境。
- Access Content Markup: html 中以属性形式定义的,规定访问权限的标示。
- Authorization endpoint: 授权接口,返回 markup 解析所需要的数据。
- Pingback endpoint: 计量接口,存储访问相关信息。

使用方式

  • 开发者实现接口:所有接口的请求都依据 cors 方案,包括 Authorization 接口 (返回解析 DOM 元素展示与否的数据)、Pingback 接口,登陆登出接口。
  • 引入 mip 脚本。

    <script type="text/javascript" src="https://c.mipcdn.com/static/v1/mip.js"></script>
    <script type="text/javascript" src="https://c.mipcdn.com/static/v1/mip-access/mip-access.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}
    }
    </script>
    • authorization:授权接口,返回 MIP Access 表达式中需要进行计算的数据。
    • pingback:计量接口,每次访问页面之后,通过该 url 发送请求到开发者服务器,由其对数据进行管理,如每访问一次计数减 1。
    • noPingback:是否允许计量。
    • login:登陆相关接口,可以是一个 map,如下:

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

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

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

    <div mip-access="access AND subscriber"></div>

实现细节


上图为纯前端方式实现 Access 的时序图,下面就以这个引子来说一下 ACCESS 的工作流程吧!
- 用户在访问页面时,第一时间从服务器下载到 html 文档并展示在浏览器上,而不是先通过 ACCESS 机制处理后再进行展示,这样做的目的为了让用户能够第一时间看到页面,缩短页面展现的白屏时间。
- 在页面加载完成之后(DOM Ready 阶段),MIP Access 运行环境自动执行,并将页面中以 mip-access-hide 属性标记的所有 DOM 元素筛选出来并隐藏,同时根据开发者提供的 Authorization 接口发起请求(该请求地址由开发者在页面指定的 script 中进行配置),接口的主要作用是拿到解析 mip-access 表达式的数据。
- Authorization 接口如果请求成功,筛选出页面中使用 mip-access 属性定义的元素,并根据 mip-access 中的表达式进行解析,解析结果为布尔值,如果结果为 true 则展示元素,否则隐藏;如果请求失败,MIP 运行环境会寻找配置信息中的 authorizationFallbackResponse 字段,其值为一个 JSON 字符串,将该字符串进行 JSON 解析后作为解析 mip- access 表达式的数据;如果 authorizationFallbackResponse 未定义则解析失败。
- 最后一步是待页面加载完成后发起 Pingback 请求(该请求地址同样是由开发者在页面指定的 script 中进行配置),这一步的主要目的是记录页面访问信息到开发者后端数据库,并通过访问信息决定下一个页面的展示策略。如果开发者配置了 noPingback: true 的选项,则不会发起 Pingback 请求;否则发起请求并将数据传递给开发者服务器进行保存,待下次访问文章时根据存储的状态返回相应的数据以决定页面展示策略。

适用范围

目前来说,纯前端的 ACCESS 实现方案适用与一些不涉及用户信息和收费业务相关的简单页面,通过该方式可以自由化的配置页面中元素的展现方式;出于安全考虑和后续的需要,我们后续也会根据需求量来以前端 + server 的处理方式处理 html 文档;

写在最后

查看 mip-access 组件的 demo 请 点击这里 。
有任何问题可以到 github issues 提问。

文章作者:Jackson
转发自:itoss.me

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux环境下Flume的安装

1、在官网http://flume.apache.org/download.html下载flume的压缩包 2、解压到指定位置并重命名 tar -zxvf apache-flume-1.9.0-bin.tar.gz3、配置环境并生效 #vi ~/.bashrc export FLUME_HOME/usr/local/APP/flume export PATH$PATH:$FLUME_HOME/bin #使变量设置生效 #sour…

MIPCache 域名升级

一、MIPCache URL 是什么 举个例子&#xff0c;MIP 官网的 URL 为&#xff1a; https://www.mipengine.org 对应的 MIPCache 的 URL 为&#xff1a; https://mipcache.bdstatic.com/c/s/www.mipengine.org 所谓 MIPCache URL 是经过 MIP-Cache CDN 缓存后的 MIP 页面地址&…

Flume监听端口,输出端口数据案例

1、在flume目录下新建/myconf目录,并在目录下新建socket-console.conf 文件&#xff01; mkdir myconf cd myconf touch socket-console.conf2、编辑文件vim socket-console.conf&#xff0c;添加以下内容&#xff1a; # 定义这个agent中各组件的名字 a1.sources r1 a1.sink…

MIP 移动网页加速器视频教程全新发布

MIP (Mobile Instant Pages - 移动网页加速器) 是百度推出的开源项目&#xff0c;用于移动端页面加速。MIP 技术通过优化浏览器资源加载&#xff0c;前端代码执行及 CDN 缓存加速来加速页面&#xff0c;打造秒开的页面浏览体验。目前&#xff0c;有 5000 多家站点的 MIP 页已经…

MIP 技术进展月报:储存功能全新上线,MIP-Cache域名升级,校验更严谨

集 * 瞬时触达用户、高转化率、炫酷闪电标、优质展现形式 * 等诸多特性为一体的 MIP 页面吸引了众多站点进行改造。为了更好地服务于广大站长&#xff0c;更快地倾听站长们的声音&#xff0c;MIP 技术团队特推出《MIP 技术进展月报》&#xff0c;欢迎大家对 MIP 技术提建议&…

WebP 在减少图片体积和流量上的效果如何?MIP技术实践分享

作者 | Jackson 编辑 | 尾尾 不论是 PC 还是移动端&#xff0c;图片一直占据着页面流量的大头&#xff0c;在图片的大小和质量之间如何权衡&#xff0c;成为了长期困扰开发者们的问题。而 WebP 技术的出现&#xff0c;为解决该问题提供了好的方案。本文将为大家详细介绍 WebP …

MIP技术进展月报第2期: 数据绑定,异步脚本加速

一、 功能更新 1. mip-bind 上线&#xff0c;实现复杂交互 MIP bind 双向绑定机制和组件上线&#xff0c;提供双向绑定的特性&#xff1b;能够允许页面实现数据驱动功能&#xff0c;开发者可以在任意场景修改数据&#xff0c;并驱动页面元素变动。 MIP 小姐姐画外音&#xf…

Hadoop的安装与配置——搭建完全分布式集群

一、搭建集群 1、准备服务器&#xff08;这里以我的3台Centos7为例&#xff09; 1个主节点&#xff1a;Carlota1(192.168.33.21)&#xff0c;2个子节点&#xff1a;Carlota2(192.168.33.22)&#xff0c;Carlota3(192.168.33.23) 2、配置主节点名 在主节点命令行输入&#x…

HTTP 视频怎么在 MIP 页面中使用?

在 MIP 中&#xff0c;一些资源的使用需要支持 HTTPS&#xff0c;视频就是其中一种。但目前大部分站点的视频资源都还是 HTTP 的资源&#xff0c;无法在百度 MIP 搜索结果中直接使用&#xff0c; mip-video 视频组件针对 HTTP 的视频资源采用跳到一个 HTTP 的播放页面进行播放&…

MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素

之前由MIP团队维护的《移动 Web 加速技术月报》从本期开始&#xff0c;正式升级为《MIP 技术月报》&#xff0c;与以往不同的是&#xff0c;《MIP 技术月报》将会与大家分享包含移动加速技术以外的其他移动应用开发的技术&#xff0c;从移动用户体验、开发体验出发来分享 MIP 的…

2017 到 2018,PWA 技术到底经历了什么

高磊 OpenWeb开发者 1周前 在 GMTC 2018 全球大前端会议举办期间&#xff0c;高磊担任主题演讲嘉宾&#xff0c;并担任 PWA 专场出品人。作为有近 10 年 Web 前端技术开发、管理经验的开发者&#xff0c;高磊一直关注着 PWA 技术的发展。 2017年 6月10日&#xff0c;GMTC 201…

CentrOS7静默安装oracle11g

最近要做一个用ogg实现oracle到kafka的增量数据实时同步&#xff0c;但是Oracle就让我装了好久&#xff0c;这里来记录一下安装oracle过程。 1.建立swap分区 创建充当swap分区的文件&#xff0c;文件大小就是要增加的swap大小&#xff0c;of是文件位置&#xff0c;bs为单位&a…

MIP 网站中熊掌号登录

标题内容类型通用支持布局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 注意&#xff1a;使用该组件必须在引用本组件链接前引用 <…

MIP 支付组件,支付流程:

MIP 支付组件&#xff0c;支付流程&#xff1a; 标题内容类型通用支持布局responsive,fixed-height,fill,container,fixed所需脚本https://c.mipcdn.com/static/v1/mip-simple-pay/mip-simple-pay.js,https://c.mipcdn.com/static/v1/mip-login-xzh/mip-login-xzh.js 注意&…

jar包在Hadoop集群上测试(MapReduce)

本片使用MapReduce——统计输出给定的文本文档每一个单词出现的总次数的案例进行&#xff0c;jar包在集群上测试 1、添加打包插件依赖 <build><plugins><plugin><artifactId>maven-compiler-plugin</artifactId><version>3.6.2</versio…

什么是集群(cluster)

1、集群 1.1 什么是集群 简单的说&#xff0c;集群(cluster)就是一组计算机&#xff0c;它们作为一个整体向用户提供一组网络资源。这些单个的计算机系统就是集群的节点(node)。一个理想的集群是&#xff0c;用户从来不会意识到集群系统底层的节点&#xff0c;在他/她们看来&am…

JDK源码解析之 Java.lang.Double

Double类是原始类型double的包装类&#xff0c;它包含若干有效处理double值的方法&#xff0c;如将其转换为字符串表示形式&#xff0c;反之亦然。Double类的对象可以包含一个double值。 Double类包装原始类型的值 double中的对象。类型的对象 Double包含一个类型为的字段 doub…

sed教程入门与实例练习(二)

让我们看一下 sed 最有用的命令之一&#xff0c;替换命令。使用该命令&#xff0c;可以将特定字符串或匹配的规则表达式用另一个字符串替换。下面是该命令最基本用法的示例&#xff1a; $ sed -e ’s/foo/bar/’ myfile.txt上面的命令将 myfile.txt 中每行第一次出现的 ‘foo’…

Oracle GoldenGate微服务架构

Oracle GoldenGate支持两种架构&#xff0c;经典架构和微服务架构&#xff08;MA&#xff09;。 可以出于以下目的配置Oracle GoldenGate&#xff1a; 从一个数据库中静态提取数据记录&#xff0c;并将这些记录加载到另一个数据库中。连续提取和复制事务性数据处理语言&#…

Oracle GoldenGate经典架构

可以使用Oracle GoldenGate Classic Architecture从命令行配置和管理数据复制。 图示的说明logicalarch2.png 注意&#xff1a; 这是基本配置。根据业务需求和用例&#xff0c;可以配置此模型的不同变体。 1、Manager Manager是Oracle GoldenGate的控制过程。必须先在Oracl…