Acceso de amplificador de Google AMP

Posted on by Rudeus Greyrat

 

A veces, como diseñador, desea complacer a sus usuarios y, por eso, decide brindar contenido premium a los usuarios premium, pero mantenerlos distintos puede ser un desafío difícil. La etiqueta amp-access está especialmente diseñada con el único propósito de hacerlo. Puede establecer controles para usuarios registrados, miembros premium y usuarios no registrados. Al usar esta etiqueta, puede agregar soportes para autenticación y autorización a sus páginas web.

 

Configuración: 

En primer lugar, importe el componente amp-access junto con 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>

 

Ahora, para agregar la información de las páginas de inicio y cierre de sesión, use el siguiente código. Tienes que proporcionar puntos para iniciar sesión, uno para iniciar sesión y otro para salir de la página.

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>

Debe utilizar la misma identificación mencionada en el código anterior y la URL se puede cambiar según las necesidades.

 

Controlar la visibilidad: es muy importante que el usuario solo pueda ver lo que se supone que debe ver, es decir, si el usuario es un miembro premium, entonces el usuario debería obtener premium o si no ha iniciado sesión, se le debe mostrar la opción de inicio de sesión, etc. Para hacerlo, use el código mencionado a continuación:

  • Mostrar una sección visible para todos los visitantes del sitio web.

HTML

<section>
    Welcome to GeeksForGeeks!
</section>
  • Para mostrar contenido para los usuarios que iniciaron sesión, usaremos el atributo amp-access y controlaremos la visibilidad de la división.

HTML

<section amp-access="loggedIn">
    This section is only visible if
    you're logged in. Welcome back
    to GeeksForGeeks!
</section>
  • Ahora, si el usuario ha iniciado sesión y también es miembro premium, entonces el código para él es el siguiente:

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>
  • Si el usuario ha cerrado la sesión, debería mostrarse un mensaje adecuado, así que:

HTML

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

 

 

Botones de inicio y cierre de sesión : los botones de inicio de sesión se utilizan para iniciar sesión en el portal utilizando ciertas credenciales y, después de iniciar sesión, puede ver el contenido de inicio de sesión. Para el botón de inicio de sesión use este código:

HTML

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

 

Cerrar sesión, por otro lado, funciona para cerrar la sesión del sistema. Para agregar un botón de cierre de sesión, use el siguiente código:

HTML

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

Ejemplo:

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>

Producción:

Esta es la ventana de salida

Publicación traducida automáticamente

Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *