Instrucciones amp-access


amp-access


El componente amp-access agrega soporte para los paywalls y suscripciones a AMP, permitiendo al editor controlar qué contenido es accesible por el lector y con qué restricciones.

Para los puntos finales del servidor amp-access, consulte el proyecto amp-publisher-sample.

Agregar

Importe el componente amp-access justo después de la apertura <head>


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


amp-access requiere del componente amp-analytics


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


Opcionalmente, utilice el componente amp-mustache para mostrar texto con los valores reemplazados de la respuesta de autorización


<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>


Agregue la configuración authorization, pingback y los puntos finales de login. Proporcionamos dos puntos finales de inicio de sesión, uno para iniciar sesión y otro para cerrar sesión. También es posible crear una respuesta de fallback que se utilizará si la autorización falla con el atributo authorizationFallbackResponse.

<script id="amp-access" type="application/json">
  {
      "authorization": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
        "sign-in": "https://ampbyexample.com/components/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
        "sign-out": "https://ampbyexample.com/components/amp-access/logout"
      },
      "authorizationFallbackResponse": {
          "error": true,
          "access": false,
          "subscriber": false
      }
  }
</script>


Esta sección es visible para todos los usuarios. En este caso no se necesita ninguna marca especial.


Ejemplo

The Article

This is a preview of the article.

<section>   <h3>The Article</h3>   <p>     This is a preview of the article.   </p> </section>

Utilice el atributo amp-access para controlar la visibilidad de cada componente. La expresión debe evaluar a un valor booleano. Si se evalúa como TRUE, se mostrará la sección.


Ejemplo

This section is visible to users if the authorization response contains: "access": true. This is usually the main content of the article.

<section amp-access="access">   <p>This section is visible to users if the authorization response contains:     <code>"access": true</code>. This is usually the main content of the article.</p> </section>

Esta sección sólo se muestra si el valor del atributo de access en la respuesta para las solicitudes de autorización se evalúa como FALSE


Ejemplo

This section is only visible to users if the authorization response does not contain access or contains "access": false.

<section amp-access="NOT access">   <p>This section is only visible to users if the authorization response does not contain     <code>access</code> or contains     <code>"access": false</code>.</p> </section>

Es posible combinar dos valores en la expresión de evaluación. Revise los documentos para obtener más información sobre la Gramática de Expresión


Ejemplo

This section is only visible to users with "access": true and "subscriber": false

<div amp-access="access AND NOT subscriber">   <p>This section is only visible to users with     <code>"access": true</code> and     <code>"subscriber": false</code>   </p> </div>

Combine el amplificador amp-access y amp-mustache para mostrar la información devuelta de la solicitud de autorización. En este caso mostraremos el nombre de usuario devuelto en la respuesta de autenticación.


Ejemplo

<section amp-access="subscriber">   <template amp-access-template     type="amp-mustache">     Hello {{name}}!   </template> </section>

Use on="tap:amp-access.login-sign-in" para abrir el diálogo de inicio de sesión cuando se hace clic en el elemento.

amp-access-hide predeterminará el componente que se va a ocultar y habilitará más adelante si la expresión de amp-access amperio se evalúa como TRUE


Ejemplo


<section class="p1"
  amp-access="NOT subscriber"
  amp-access-hide
  role="button"
  tabindex="0">
  <a class="ampstart-btn caps"
    on="tap:amp-access.login-sign-in">Login</a>
</section>


El enlace de cierre de sesión sólo se mostrará para los suscriptores registrados. Utilizamos un truco aquí: el logout es una acción de inicio de sesión que redirige directamente a la URL original. Esto tiene la ventaja de que la página se actualiza sin ser recargada.


Ejemplo


<section class="p1"
  amp-access="subscriber"
  amp-access-hide
  role="button"
  tabindex="0">
  <a class="ampstart-btn caps"
    on="tap:amp-access.login-sign-out">Logout</a>
</section>


Compruebe la muestra oficial de amp-access para obtener demostraciones de conteo de primer clic y de visualización.




Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: