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}}！

登录

注销