Añadir Login mediante el flujo implícito con Form Post

Aprenda a añadir Login a su aplicación de una sola página (SPA) mediante el flujo implícito con Form Post.

Puede agregar Login a su aplicación de una sola página (SPA) mediante el flujo implícito con Form Post. Para saber cómo funciona el flujo y por qué debería usarlo, lea flujo implícito con Form Post.

Use el flujo implícito con Form Post para casos de uso exclusivos de Login; si necesita solicitar tokens de acceso durante el inicio de sesión del usuario para poder llamar a su API, use el Flujo de código de autorización con PKCE. Para obtener más información, lea Flujo de código de autorización con Proof Key for Code Exchange (PKCE).

Para implementar el flujo implícito con Form Post, puede usar los siguientes recursos:

• Express OpenID Connect SDK: La forma más sencilla de implementar el flujo, que se encargará de la mayor parte del trabajo por usted. Si usa nuestro SDK de Javascript, asegúrese de implementar mitigaciones adecuadas para su arquitectura. Para obtener más información, lea Referencia de Auth0.js.
• Authentication API: Si prefiere crear su propia solución, siga leyendo para aprender a llamar directamente a nuestra API.

Después de iniciar sesión correctamente, su aplicación tendrá acceso al token de ID del usuario. El token de ID contendrá información básica del perfil de usuario.

​

Requisitos previos

Registra tu aplicación con Auth0. Para obtener más información, consulta Registrar aplicaciones de página única.

• Selecciona Single-Page App como Application Type.
• Agrega una Allowed Callback URL de {https://yourApp/callback}.
• Asegúrate de que los tipos de concesión de tu aplicación incluyan Implicit. Para obtener más información, consulta Actualizar los tipos de concesión.

​

Autorizar al usuario

Solicita la autorización del usuario y redirígelo a tu aplicación. Para iniciar el flujo, deberás obtener la autorización del usuario. Este paso puede incluir uno o más de los siguientes procesos:

• Autenticar al usuario;
• Redirigir al usuario a un Proveedor de identidad para gestionar la autenticación;
• Comprobar si hay sesiones activas de inicio de sesión único (SSO);
• Obtener el consentimiento del usuario para el nivel de permiso solicitado, a menos que ya lo haya otorgado previamente.

Para autorizar al usuario, tu aplicación debe dirigirlo a la URL de autorización.

​

Ejemplo de URL de autorización

​

Parámetros

Nombre del parámetro	Descripción
response_type	Indica el tipo de credencial que devolverá Auth0 (code o token). Para el Flujo implícito, el valor puede ser id_token, token o id_token token. En concreto, id_token devuelve un ID Token y token devuelve un Token de acceso.
response_mode	Especifica cómo deben devolverse los parámetros de respuesta. Por motivos de seguridad, el valor debe ser form_post. En este modo, los parámetros de respuesta se codifican como valores de un formulario HTML, se transmiten mediante el método HTTP POST y se codifican en el cuerpo con el formato application/x-www-form-urlencoded.
client_id	El ID de cliente de su aplicación. Puede encontrar este valor en la configuración de la aplicación.
redirect_uri	La URL a la que Auth0 redirigirá el navegador después de que el usuario haya concedido la autorización. Debe especificar esta URL como una URL de devolución de llamada válida en la configuración de la aplicación. Advertencia: Según la especificación de OAuth 2.0, Auth0 elimina todo lo que aparece después del hash y no tiene en cuenta ningún fragmento.
scope	Especifica los alcances para los que desea solicitar autorización, que determinan qué claims (o atributos del usuario) desea recibir. Deben separarse con un espacio. Puede solicitar cualquiera de los scopes estándar de OpenID Connect (OIDC) relacionados con el usuario, como profile y email, claims personalizados que sigan un formato con espacio de nombres, o cualquier scope compatible con la API de destino (por ejemplo, read:contacts).
state	(recomendado) Una cadena alfanumérica arbitraria y opaca que su aplicación agrega a la solicitud inicial y que Auth0 incluye al redirigir de vuelta a su aplicación. Para ver cómo usar este valor para prevenir ataques de Cross-site Request Forgery (CSRF), consulte Mitigate CSRF Attacks With State Parameters.
nonce	(obligatorio para response_type que contenga id_token token; en caso contrario, recomendado) Una cadena aleatoria criptográficamente segura que su aplicación agrega a la solicitud inicial y que Auth0 incluye dentro del ID Token, utilizada para evitar ataques de repetición de tokens.
connection	(opcional) Obliga al usuario a iniciar sesión con una conexión específica. Por ejemplo, puede pasar el valor github para enviar al usuario directamente a GitHub e iniciar sesión con su cuenta de GitHub. Si no se especifica, el usuario verá la pantalla de Auth0 Lock con todas las conexiones configuradas. Puede ver una lista de sus conexiones configuradas en la pestaña Connections de su aplicación.
organization	(opcional) ID de la organización que se usará al autenticar a un usuario. Si no se proporciona y su aplicación está configurada para Display Organization Prompt, el usuario podrá introducir el nombre de la organización al autenticarse.
invitation	(opcional) ID del ticket de invitación de la organización. Al invitar a un miembro a una Organización, su aplicación debe gestionar la aceptación de la invitación reenviando los pares clave-valor invitation y organization cuando el usuario la acepte.

Como ejemplo, el fragmento HTML de su URL de autorización al agregar el inicio de sesión a su aplicación podría verse así:

​

Respuesta

Si todo sale bien, recibirás una respuesta HTTP 302. Las credenciales solicitadas se codifican en el cuerpo:

HTTP/1.1 302 Found
Content-Type: application/x-www-form-urlencoded
id_token=eyJ...acA&
state=xyzABC123

Ten en cuenta que los valores devueltos dependen de lo que hayas solicitado en response_type.

Response Type	Components
id_token	ID Token
token	Token de acceso (más los valores expires_in y token_type)
id_token token	ID Token, Token de acceso (más los valores expires_in y token_type)

Auth0 también devolverá cualquier valor de state que hayas incluido en tu llamada a la URL de autorización.

Valida tus tokens antes de guardarlos. Para saber cómo hacerlo, consulta Validar ID Tokens y Validar tokens de acceso.

Los ID Token contienen información del usuario que debe decodificarse y extraerse.

​

Casos de uso

​

Solicitud de autenticación básica

Este ejemplo muestra la solicitud de autenticación más básica que puede realizar al autorizar al usuario en el paso 1. Muestra la pantalla de Login de Auth0 y permite al usuario iniciar sesión con cualquiera de sus conexiones configuradas:

Esto devolverá un token de ID, que puedes extraer de la URL de redirección.

​

Solicitar el nombre y la foto de perfil del usuario

Además de la autenticación habitual del usuario, este ejemplo muestra cómo solicitar información adicional del usuario, como su nombre y su foto de perfil.

Para solicitar el nombre y la foto de perfil del usuario, debes agregar los alcances adecuados al autorizar al usuario:

Ahora, tu token de ID contendrá las claims name y picture solicitadas. Cuando decodifiques el token de ID, tendrá un aspecto similar a este:

{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}

​

Solicitar que el usuario inicie sesión con GitHub

Además del flujo habitual de autenticación del usuario, este ejemplo muestra cómo enviar a los usuarios directamente a un proveedor de identidad social, como GitHub. Para que este ejemplo funcione, debe ir a Auth0 Dashboard > Authentication > Social y configurar la conexión correspondiente. Puede obtener el nombre de la conexión en la pestaña Settings.

Para enviar a los usuarios directamente a la pantalla de inicio de sesión de GitHub, debe incluir el parámetro connection y establecer su valor con el nombre de la conexión (en este caso, github) al autorizar al usuario:

Ahora, tu ID Token contendrá un claim sub con el id único del usuario devuelto por GitHub. Cuando decodifiques el ID Token, tendrá un aspecto similar a:

{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}

​

Más información

• Marco de autorización de OAuth 2.0
• Protocolo OpenID Connect
• Tokens
• Mitigar ataques de repetición al usar el flujo implícito
• Registrar aplicaciones web de una sola página
• Actualizar los tipos de concesión