Google AMP amp-доступ

Опубликовано: 12 Апреля, 2022

Иногда, будучи дизайнером, вы хотите угодить своим пользователям, и для этого вы решаете предоставить премиум-контент премиум-пользователям, но сохранить их отличными друг от друга может быть сложной задачей. Тег amp-access специально разработан для этой единственной цели. Он может устанавливать элементы управления для пользователей, вошедших в систему, членов премиум-класса и пользователей, не вошедших в систему. Используя этот тег, вы можете добавить поддержку аутентификации и авторизации на свои веб-страницы.

Настраивать:

Во-первых, импортируйте компонент amp-access вместе с 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": "geeksforgeeks.org",
     "pingback": "geeksforgeeks.org",
     "login": {
       "sign-in": "geeksforgeeks.org",
       "sign-out": "geeksforgeeks.org"
     },
     "authorizationFallbackResponse": {
         "error": true,
         "loggedIn": false,
         "powerUser": false
     }
 }
</script>

Вы должны использовать тот же идентификатор, что и в приведенном выше коде, и URL-адрес может быть изменен в соответствии с потребностями.

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=
        "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": "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=
"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>
        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

РЕКОМЕНДУЕМЫЕ СТАТЬИ