Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
controllers add license headers to all JS files Nov 14, 2016
middlewares add license headers to all JS files Nov 14, 2016
models add license headers to all JS files Nov 14, 2016
public rename subdir to amp-paywall-demo Sep 20, 2016
views rename subdir to amp-paywall-demo Sep 20, 2016
.gitignore missed .* files Sep 20, 2016
.jshintrc missed .* files Sep 20, 2016
AUTHORS rename subdir to amp-paywall-demo Sep 20, 2016
CONTRIBUTING.md rename subdir to amp-paywall-demo Sep 20, 2016
CONTRIBUTORS
Procfile rename subdir to amp-paywall-demo Sep 20, 2016
README.md Change amp_access ID to amp-access Jun 27, 2017
app.js rename subdir to amp-paywall-demo Sep 20, 2016
app.yaml rename subdir to amp-paywall-demo Sep 20, 2016
package.json Update dependency express to v4.16.4 Jan 5, 2019

README.md

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.

You can’t perform that action at this time.