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

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

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

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

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

• Written by @andreban