amp-access

简介

amp-access 组件增加了对身份验证和授权的支持，允许您限制对 AMP 页面部分内容的访问，以及为登录用户显示自定义内容。它还允许实现浏览次数计数、付费墙和订阅。有关示例 amp-access 服务器端点，请参阅 amp-publisher-sample 项目。

设置

在标头中导入 amp-access 组件。

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

amp-access 还需要导入 amp-analytics。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

（可选）使用 amp-mustache 组件来显示带有授权响应中替换值的文本

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

添加 authorization 和 login 端点的配置。我们提供了两个登录端点，一个用于登录，另一个用于注销。如果授权失败，也可以创建备用响应，该响应将与 authorizationFallbackResponse 属性一起使用。

当用户查看文档时，会调用 Pingback 端点，该端点可用于更新计量信息。此功能在本示例中未使用。

<script id="amp-access" type="application/json">
  {
      "authorization": "/documentation/examples/api/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "/documentation/examples/api/amp-access/pingback?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
        "sign-in": "/documentation/examples/api/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
        "sign-out": "/documentation/examples/api/amp-access/logout"
      },
      "authorizationFallbackResponse": {
          "error": true,
          "loggedIn": false,
          "powerUser": false
      }
  }
</script>

控制可见性

此部分对所有用户可见。在这种情况下，不需要特殊的标记。

欢迎访问该网站！此部分对所有人可见。

<section>
  Welcome to the website! This section is visible to all.
</section>

使用 amp-access 属性来控制每个组件的可见性。表达式必须计算为一个布尔值。如果它计算为 TRUE，则会显示该部分。

我们使用服务器响应中的 loggedIn 属性来确定用户是否已登录。

仅当您登录时，此部分才可见。欢迎回来！

<section amp-access="loggedIn">
  This section is only visible if you're logged in. Welcome back!
</section>

来自服务器的响应可用于传达有关登录用户的更多信息。在这种情况下，我们区分了除了登录之外还设置了 powerUser 属性的用户。

仅当您登录 *且* 被归类为“超级用户”时，此部分才可见。

<section amp-access="loggedIn AND powerUser">
  This section is only visible if you're logged in <em>and</em> classified as "power user".
</section>

如果 loggedIn 属性的默认值为 false，我们可以假设该用户未登录。

仅当您未登录时，此部分才可见。

<section amp-access="NOT loggedIn">
  This section is only visible if you're not logged in.
</section>

组合使用 amp-access 和 amp-mustache 以显示从授权请求返回的信息。在这种情况下，我们将显示在身份验证响应中返回的电子邮件。

<section amp-access="loggedIn">
  <template amp-access-template type="amp-mustache">
    <h3>Hello {{email}}!</h3>

    {{#powerUser}}
    <p>You are a power user.</p>
    {{/powerUser}}
  </template>
</section>

单击元素时，使用 on="tap:amp-access.login-sign-in" 打开登录对话框。这只是打开一个弹出窗口，将用户带到顶部配置中定义的 URL。如果 amp-access 表达式计算为 TRUE，则 amp-access-hide 将使该组件默认处于隐藏状态，并在稍后启用。

<button amp-access="NOT loggedIn" amp-access-hide on="tap:amp-access.login-sign-in">
  Login
</button>

注销

注销链接应仅对登录的订阅者显示。我们在此处使用了一个技巧：注销是直接重定向回原始 URL 的登录操作。这样做的好处是，页面更新无需重新加载。

<button amp-access="loggedIn" amp-access-hide on="tap:amp-access.login-sign-out">
  Logout
</button>

查看官方 amp-access 示例，了解首次点击免费和浏览次数计数的演示。

需要进一步解释？

如果此页面上的说明没有涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的确切用例。

转到 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的长期参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @andreban 编写

amp-access

简介

设置

控制可见性

你好，{{email}}！

登录

注销