Google AMP amp-access

Sometimes, as a designer, you want to please your users and for that, you decide to give premium content to the premium users but to keep them distinct might be a difficult challenge. The amp-access tag is specially designed for the sole purpose to do so. It can set controls for logged-in users, premium members and non-logged-in users. By using this tag, you can add supports for authentication and authorization to your web-pages.

Setup:

Firstly, import amp-access component along with amp-analytics.

HTML

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

Now to add the login and logout pages information use the following code. You have to provide to log in points, one for signing in and other for singing out of the page.

HTML

<script id="amp-access" type="application/json">
 {
     "authorization": "w3wiki.net",
     "pingback": "w3wiki.net",
     "login": {
       "sign-in": "w3wiki.net",
       "sign-out": "w3wiki.net"
     },
     "authorizationFallbackResponse": {
         "error": true,
         "loggedIn": false,
         "powerUser": false
     }
 }
</script>

You have to make use of the same id mentioned in the code above and URL can be changed per needs.

Controlling visibility: It is very important that the user can only see what user is supposed to i.e. if user is a premium member then the user should get premium or if he is not logged in then he should be shown log-in option, etc… To do so use the code mentioned below:

To display a section visible to all the visitors of the website.

HTML

<section>
    Welcome to w3wiki!
</section>

To display content for the logged-in users, we will use amp-access attribute and control the visibility of the division.

HTML

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

Now, if the user is logged in and also a premium member, then the code for him goes as:

HTML

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

If the user is logged out then you should be displayed a proper message, so:

HTML

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

Log-in & Log-out Buttons: Login buttons are used to log-in to the portal using certain credentials and after logging in, you can see the logged-in contents. For login button use this code:

HTML

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

Logout, on the other hand, works to log you out of the system. To add a logout button use the following code:

HTML

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

Example:

HTML

<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-access</title>
 
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
 
    <!-- 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>
 
    <script async custom-template="amp-mustache"
src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
    </script>
 
    <script id="amp-access" type="application/json">
    {
        "authorization": "w3wiki.net",
        "pingback": "w3wiki.net",
        "login": {
            "sign-in": "w3wiki.net",
            "sign-out": "w3wiki.net"
        },
        "authorizationFallbackResponse": {
            "error": true,
            "loggedIn": false,
            "powerUser": false
        }
    }
    </script>
     
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-access/index.html">
     
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
     
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
        }
 
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
 
        @keyframes -amp-start {
            from {
                visibility: hidden
            }
 
            to {
                visibility: visible
            }
        }
    </style>
 
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
 
    <style amp-custom>
        h1 {
            color: green;
            text-align: center;
        }
 
        section {
            color: crimson;
        }
    </style>
</head>
 
<body>
    <h1>
        Beginner For Beginner
    </h1>
     
    <section>
        Welcome to w3wiki!
    </section>
 
    <section amp-access="loggedIn">
        This section is only visible if 
        you're logged in. Welcome back 
        to w3wiki!
    </section>
 
    <section amp-access="loggedIn AND powerUser">
        This section is only visible if you're 
        logged in <b>and</b> classified as 
        "premium user of w3wiki".
    </section>
 
    <section amp-access="NOT loggedIn">
        This section is only visible if 
        you're not logged in.
    </section>
 
    <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>
 
    <center>
        <button amp-access="NOT loggedIn"
            amp-access-hide on="tap:amp-access.login-sign-in">
            Please Login
        </button>
    </center>
 
    <button amp-access="loggedIn" amp-access-hide 
        on="tap:amp-access.login-sign-out">
        Logout
    </button>
</body>
 
</html>

Output:

This is the output window

HTML

HTML

HTML

HTML

HTML

HTML

HTML

HTML

Example:

HTML

Output:

Contact Us