amp-paywall-demo

AMP Access Sample

This is a demo application for the AMP Access component. AMP Access or “AMP paywall and subscription support” provides control to publishers over what content can be accessed by a reader and with what restrictions. You can try the demo here.

Getting Started

This is a quick walk through the source code to get you started with AMP Access. Integrating AMP Access includes two steps:

1. AMP Access Endpoint implementation: integrate publisher paywall via AMP Access callbacks.
2. AMP HTML Configuration: configure the publisher AMP Access endpoints and define content access rules.

AMP Access Endpoint implementation

The first step is to implement the AMP Access callbacks in the publisher backend. The endpoint URLs must be configured in each AMP HTML file using AMP Access:

• authorization (api.js): this credentialed CORS endpoint produces the authorization response that can be used in the content markup expressions to show/hide different parts of content (e.g. subscriber). The response is a free-form JSON object: it can contain any properties and values.
• pingback (api.js): the main purposes for pingback is to count down meter when it is used. As a credentialed CORS endpoint it may contain publisher cookies. Thus it can be used to map AMP Reader ID to the reader's identity if they are logged in.
• login (login.html): is a normal Web page with no special constraints, other than it should function well as a browser dialog.

Both endpoints, authorization and pingback, must be credentialed CORS endpoints. This is configured in amp-paywall-cors.js.

AMP HTML Configuration

The second step is to integrate AMP Access into the AMP HTML files:

1. Configure the AMP Access endpoints (article.html).

   <script id="amp-access" type="application/json">
     {
       "authorization": "<% host %>/amp-authorization.json?rid=READER_ID&url=CANONICAL_URL&_=RANDOM&ref=DOCUMENT_REFERRER",
       "pingback": "<% host %>/amp-pingback?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER",
       "login": "<% host %>/login?rid=READER_ID&url=CANONICAL_URL"
     }
   </script>

2. Include the AMP Access component (article.html):

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

3. Define which parts of the AMP HTML file are visible to subscribers and non-subscribers (article.html):

   <section amp-access="access AND subscriber" amp-access-hide>
     Thanks for being a subscriber. You rock!
   </section>

That's it.

Installation

Clone the repository via:

$ git clone https://github.com/ampproject/amp-publisher-sample.git

Install NodeJS and run in the project dir:

$ npm i
$ npm start

Try the demo at http://localhost:8002/.

Contributing

Please see the CONTRIBUTING file for information on contributing to the AMP Project, and the DEVELOPING file for documentation on the AMP library internals and hints how to get started.

License

The AMP HTML Access Demo is made by the AMP Project, and is licensed under the Apache License, Version 2.0.