Skip to content
Related Articles

Related Articles

Improve Article

Google AMP amp-access

  • Last Updated : 25 Oct, 2020

 

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=
</script>
 
<!-- amp-analytics component -->
<script async custom-element="amp-analytics" src=
</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": "geeksforgeeks.org",
     "pingback": "geeksforgeeks.org",
     "login": {
       "sign-in": "geeksforgeeks.org",
       "sign-out": "geeksforgeeks.org"
     },
     "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 GeeksForGeeks!
</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 GeeksForGeeks!
</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 GeeksForGeeks".
</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=
    </script>
 
    <!-- Import the `amp-access` component
        in the header. -->
    <script async custom-element="amp-access"
    </script>
 
    <!-- `amp-access` requires `amp-analytics`
        to be imported as well. -->
    <script async custom-element="amp-analytics"
    </script>
 
    <script async custom-template="amp-mustache"
    </script>
 
    <script id="amp-access" type="application/json">
    {
        "authorization": "geeksforgeeks.org",
        "pingback": "geeksforgeeks.org",
        "login": {
            "sign-in": "geeksforgeeks.org",
            "sign-out": "geeksforgeeks.org"
        },
        "authorizationFallbackResponse": {
            "error": true,
            "loggedIn": false,
            "powerUser": false
        }
    }
    </script>
     
    <link rel="canonical" href=
     
    <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>
        Geeks For Geeks
    </h1>
     
    <section>
        Welcome to GeeksForGeeks!
    </section>
 
    <section amp-access="loggedIn">
        This section is only visible if
        you're logged in. Welcome back
        to GeeksForGeeks!
    </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 GeeksForGeeks".
    </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




My Personal Notes arrow_drop_up
Recommended Articles
Page :