AMP
  • websites

amp-access

Introduction

The amp-access component adds support for authentication and authorization, allowing you to limit access to parts of your AMP pages as well as display customized content for the logged in user. It also allows the implementation of view counting, paywalls and subscriptions. For sample amp-access server endpoints, see the amp-publisher-sample project.

Setup

Import the amp-access component in the header.

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

amp-access requires amp-analytics to be imported as well.

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

Optionally, use the amp-mustache component to show text with values replaced from the authorization response

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

Add the configuration for the authorization and the login endpoints. We provide two login endpoints, one for sign-in and one for sign-out. It is also possible to create a fallback response that will be used if the authorization fails with the authorizationFallbackResponse attribute.

The Pingback Endpoint is called when a user views the document, which can be used to update metering information. This functionality is not used in this sample.

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

Controlling visibility

This section is visible to all users. No special markup is needed in this case.

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

Use the amp-access attribute to control the visibility of each component. The expression must evaluate to a boolean value. If it evaluates to TRUE, the section will be shown.

We use the loggedIn property from the server's response to determine whether the user is logged in.

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

The response from the server can be used to convey more information about the logged in user. In this case, we differentiate between users who have the powerUser property set in addition to being logged in.

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

If the loggedIn property has the default value of false, we can assume that the user is not logged in.

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

Combine amp-access and amp-mustache to show information returned from the authorization request. In this case we show the email returned in the authentification response.

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

Login

Use on="tap:amp-access.login-sign-in" to open the login dialog when the element is clicked. This simply opens a popup window that takes the user to the URL defined inside the configuration at the top. amp-access-hide will default the component to be hidden and enabled later if the amp-access expression is evaluated to TRUE

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

Logout

The logout link should only be shown for logged in subscribers. We use a trick here: the logout is a login action that directly redirects back to the original URL. This has the advantage that the page updates without being reloaded.

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

Check out the official amp-access sample for demos of first-click-free and view counting.

需要进一步说明?

如果此页面上的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。

前往 Stack Overflow
一项无法解释的功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

编辑 GitHub 上的示例