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.
Hello {{email}}!
{{#powerUser}}You are a power user.
{{/powerUser}}<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.
Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.
Przejdź do Stack Overflow Niewyjaśniona funkcja?Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.
Edytuj przykład na GitHub-
Written by @andreban