Añadir el inicio de sesión mediante el Authorization Code Flow

Aprende a añadir el inicio de sesión a tu aplicación web tradicional mediante el Authorization Code Flow.

Puedes incorporar el inicio de sesión a tu aplicación web tradicional mediante el Flujo de Código de Autorización. Para saber cómo funciona este flujo y por qué te conviene usarlo, lee Authorization Code Flow. Para llamar a tu API desde una aplicación web tradicional, lee Call Your API Using the Authorization Code Flow.

Para implementar el Flujo de Código de Autorización, Auth0 ofrece los siguientes recursos:

• Regular Web App Quickstarts: La forma más sencilla de implementar el flujo.
• Authentication API: Si prefieres crear tu propia solución, sigue leyendo para aprender a llamar directamente a nuestra API.

Después de iniciar sesión correctamente, tu aplicación tendrá acceso al token de ID y al token de acceso del usuario. El token de ID contiene información básica del perfil del usuario, y el token de acceso puede usarse para llamar al endpoint /userinfo de Auth0 o a tus propias API protegidas. Para obtener más información sobre los tokens de ID, lee ID Tokens. Para obtener más información sobre los tokens de acceso, lee Access Tokens.

Solicitarás la autorización del usuario y lo redirigirás de nuevo a tu aplicación con un authorization_code. Después, intercambiarás el código por tokens.

​

Requisitos previos

Registra tu aplicación en Auth0. Para obtener más información, consulta Registrar aplicación web tradicional.

• Selecciona Regular Web App como Tipo de aplicación.
• Agrega una URL de callback permitida de {https://yourApp/callback}.
• Asegúrate de que los Tipos de concesión de tu aplicación incluyan Authorization Code. Para obtener más información, consulta Actualizar tipos de concesión.

​

Autorizar al usuario

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;
• Obtener el consentimiento del usuario para el nivel de permisos 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 este flujo, el valor debe ser code.
client_id	El ID de cliente de tu aplicación. Puedes 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. El código de autorización estará disponible en el parámetro code de la URL. Debes especificar esta URL como una URL de callback válida en la Configuración de la aplicación. Advertencia: Según la especificación OAuth 2.0, Auth0 elimina todo lo que aparece después del hash y no tiene en cuenta ningún fragmento.
scope	Especifica los scopes para los que quieres solicitar autorización, que determinan qué claims (o atributos del usuario) quieres recibir. Deben estar separados por un espacio. Para obtener un token de ID en la respuesta, debes especificar al menos el scope openid. Si quieres obtener el perfil completo del usuario, puedes solicitar openid profile. Puedes solicitar cualquiera de los scopes estándar de OpenID Connect (OIDC) sobre los usuarios, como email, o claims personalizados que sigan un formato con namespace. Incluye offline_access para obtener un Refresh Token (asegúrate de que el campo Allow Offline Access esté habilitado en la Configuración de la aplicación).
state	(recomendado) Una cadena alfanumérica arbitraria y opaca que tu aplicación añade a la solicitud inicial y que Auth0 incluye al redirigir de vuelta a tu aplicación. Para ver cómo usar este valor para prevenir ataques de falsificación de solicitudes entre sitios (CSRF), consulta Mitigate CSRF Attacks With State Parameters.
connection	(opcional) Obliga al usuario a iniciar sesión con una conexión específica. Por ejemplo, puedes 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. Puedes ver una lista de tus conexiones configuradas en la pestaña Connections de tu aplicación.
organization	(opcional) ID de la organización que se usará al autenticar a un usuario. Si no se proporciona y tu 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 Organization, tu aplicación debe gestionar la aceptación de la invitación reenviando los pares clave-valor invitation y organization cuando el usuario acepte la invitación.
login_hint	(opcional) Rellena previamente el campo de nombre de usuario/correo electrónico en la página de inicio de sesión o registro al redirigir a Auth0. Compatible con la experiencia de Universal Login.

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

​

Respuesta

Si todo sale bien, recibirás una respuesta HTTP 302. El código de autorización aparece al final de la URL:

HTTP/1.1 302 Found
Location: {https://yourApp/callback}?code={authorizationCode}&state=xyzABC123

​

Solicitar tokens

Ahora que tienes un código de autorización, debes intercambiarlo por tokens. Con el código de autorización (code) extraído en el paso anterior, tendrás que enviar una solicitud POST a la URL del token.

​

Ejemplo de solicitud POST a la URL del token

​

Parámetros

Nombre del parámetro	Descripción
grant_type	Establece este valor en authorization_code.
code	El authorization_code obtenido en el paso anterior de este tutorial.
client_id	El ID de cliente de tu aplicación. Puedes encontrar este valor en la Configuración de la aplicación.
client_secret	El secreto de cliente de tu aplicación. Puedes encontrar este valor en la Configuración de la aplicación. Para obtener más información sobre los métodos de autenticación de aplicaciones disponibles, consulta Credenciales de la aplicación.
redirect_uri	La URL de callback válida configurada en la configuración de tu aplicación. Debe coincidir exactamente con el redirect_uri enviado a la URL de autorización en el paso anterior de este tutorial. Ten en cuenta que debe estar codificada como URL.

​

Respuesta

Si todo va bien, recibirás una respuesta HTTP 200 con una carga que incluye los valores access_token, refresh_token, id_token y token_type:

{
  "access_token": "eyJz93a...k4laUWw",
  "refresh_token": "GEbRxBN...edjnXbL",
  "id_token": "eyJ0XAi...4faeEoQ",
  "token_type": "Bearer"
}

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

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

Los tokens de acceso se utilizan para llamar al endpoint /userinfo de la API de autenticación de Auth0 o a otra API. Si estás llamando a tu propia API, lo primero que deberá hacer es verificar el token de acceso.

Los Refresh tokens se utilizan para obtener un nuevo token de acceso o token de ID después de que el anterior haya expirado. El refresh_token solo estará presente en la respuesta si incluiste el scope offline_access y habilitaste Allow Offline Access para tu API en el Dashboard.

Los Refresh tokens deben almacenarse de forma segura, ya que permiten que un usuario permanezca autenticado prácticamente de forma indefinida.

​

Casos de uso

​

Solicitud básica de autenticación

Este ejemplo muestra la solicitud más básica que puedes hacer al autorizar al usuario en el paso 1. Muestra la pantalla de inicio de sesión de Auth0 y permite al usuario iniciar sesión con cualquiera de las conexiones que hayas configurado:

Ahora, cuando solicites tokens, tu token de ID contendrá los claims más básicos. Cuando decodifiques el token de ID, se verá similar a esto:

{
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt9...",
  "exp": 1478112929,
  "iat": 1478076929
}

​

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 datos adicionales del usuario, como su nombre y su foto de perfil.

Para solicitar el nombre y la foto de perfil del usuario, debes añadir los scopes adecuados al autorizar al usuario:

Ahora, cuando solicites tokens, tu token de ID contendrá los claims de nombre e imagen que solicitaste. Al decodificarlo, se verá similar a:

{
  "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
}

​

Solicita al usuario que inicie sesión con GitHub

Además de la autenticación habitual del usuario, este ejemplo muestra cómo redirigir a los usuarios directamente a un proveedor de identidad social, como GitHub. Primero tendrás que configurar la conexión adecuada en Auth0 Dashboard > Authentication > Social y 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, debes pasar el parámetro connection y asignarle como valor el nombre de la conexión (en este caso, github) al autorizar al usuario en el paso 1:

Ahora, cuando solicites tokens, tu token de ID contendrá una claim sub con el identificador único del usuario que devuelve GitHub. Cuando decodifiques el token de ID, 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
• Registrar aplicaciones web tradicionales
• Actualizar los tipos de concesión