AMP Conf 2019. April 17/18. Tokyo.
AMP

Iniciar sesión

Supongamos que la primera vez que accedes a una página ves dos comentarios y un botón para iniciar sesión, tal como se muestra a continuación:

Si buscas el botón en el código de la página, puedes ver que tiene el siguiente formato:

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
  <h5>Please login to comment</h5>
  <button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>

El comportamiento de los atributos relacionados con el componente amp-access depende de cómo se haya configurado dicho componente a nivel de página. En este caso, se trata de la siguiente configuración:

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

El punto de acceso de autorización, que debe proporcionar el editor de la página, se implementa como parte de AMPByExample. Para simplificar, en este ejemplo hemos implementado una lógica sencilla para que el servidor, al recibir esta solicitud, lea el valor de una cookie denominada ABE_LOGGED_IN. Si esta cookie no está presente, devolvemos una respuesta JSON con loggedIn = false. En consecuencia, la primera vez que un usuario accede a la página, se devuelve loggedIn = false, por lo que se muestra el botón para iniciar sesión.

Si nos volvemos a fijar en el código HTML de dicho botón, podemos ver que se utiliza on="tap:amp-access.login-sign-in". Con este fragmento de código indicamos que, cuando un usuario toque el botón, debe usarse la URL que hemos especificado en la respuesta JSON anterior:

{
    "login": {
    "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL"
  }
}

En el nodo "login", se pueden añadir varias URL; en este caso, definimos una en sign-in y, más adelante, haremos lo mismo con sign-out.

La página de inicio de sesión es una página que no es AMP y en la que introducimos los valores de inicio de sesión y la contraseña para simplificar el proceso. Puedes observar que utilizamos el tipo de entrada oculta returnURL, que rellena el servidor AMPByExample usando plantillas de servidor. AMPByExample obtiene el valor de "returnURL" de un parámetro denominado return, que la biblioteca de AMP añade automáticamente a la URL indicada en "sign-in".

En el ejemplo que se muestra a continuación, se añade el valor del parámetro return a la solicitud cuando se hace clic en el botón para iniciar sesión. Para explorar este valor, accede a la pestaña Network (Red) de la consola DevTools de Chrome.

Cuando el servidor AMPByExample recibe la solicitud POST de la página de inicio de sesión, si las credenciales son correctas, se redirige la solicitud a la URL de returnURL que hemos comentado anteriormente y se le añade el parámetro #success=true. Una vez hecho, el tiempo de ejecución de AMP puede finalmente autorizar la página, por lo que ya se puede añadir un comentario.

Es importante que sepas qué tareas desempeña el tiempo de ejecución de AMP y qué debería hacer el servidor, puesto que el editor de la página debe encargarse de implementar este último.

A grandes rasgos, las funciones de ambos elementos son las siguientes:

  • El tiempo de ejecución de AMP añade automáticamente el parámetro "return" a la solicitud "sign-in" indicada en el objeto JSON "login".
  • El tiempo de ejecución de AMP cierra la página de inicio de sesión y redirige a los usuarios a la página que se haya especificado en el parámetro "returnURL".
  • El servidor debe organizar la respuesta cuando el usuario haga clic en el botón para iniciar sesión.

Para obtener una explicación más detallada sobre este tema, consulta la amp-access.