Agregar Login mediante el Flujo de código de autorización con PKCE

Aprenda a agregar Login a su aplicación nativa, móvil o de página única mediante el Flujo de código de autorización con Proof Key for Code Exchange (PKCE).

Puede agregar Login a su aplicación nativa, móvil o de una sola página mediante el Flujo de código de autorización con PKCE. Para obtener información sobre cómo funciona el flujo y por qué debería usarlo, lea Flujo de código de autorización con Proof Key for Code Exchange (PKCE). Para obtener información sobre cómo llamar a su API desde una aplicación nativa, móvil o de una sola página, lea Llame a su API mediante el Flujo de código de autorización con PKCE.

Para implementar el Flujo de código de autorización con Proof Key for Code Exchange (PKCE), puede usar los siguientes recursos:

• SDK móviles de Auth0 y SDK de aplicaciones de una sola página de Auth0: La forma más sencilla de implementar el flujo, ya que se encargan de casi todo por usted. Nuestros Quickstarts para móviles y Quickstarts para aplicaciones de una sola página le guiarán en el proceso.
• Authentication API: Si prefiere crear su propia solución, siga leyendo para aprender a llamar a nuestra API directamente.

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

​

Requisitos previos

Registra tu aplicación con Auth0. Para obtener más información, consulta Registrar aplicaciones nativas o Registrar aplicaciones web de una sola página.

• Selecciona Native o Single-Page App como Tipo de aplicación, según corresponda a tu aplicación.
• Agrega YOUR_CALLBACK_URL como URL de devolución de llamada permitida. El formato de la URL de devolución de llamada variará según el tipo de aplicación y la plataforma. Para obtener más información sobre el formato correspondiente a tu tipo de aplicación y plataforma, consulta nuestros Quickstarts de Native/Mobile y Quickstarts para aplicaciones de una sola página.
• Asegúrate de que los Tipos de concesión de tu aplicación incluyan Código de autorización. Para obtener más información, consulta Actualizar tipos de concesión.

​

Crear un verificador de código

Cree un code_verifier, que es una clave aleatoria generada criptográficamente y codificada en Base64, que posteriormente se enviará a Auth0 para solicitar tokens.

Para obtener más información sobre el algoritmo para crear el code_verifier, lea la sección 4.1 El cliente crea un verificador de código de la especificación OAuth Proof Key for Code Exchange.

​

Ejemplo de JavaScript

// Dependencia: módulo crypto de Node.js
// https://nodejs.org/api/crypto.html#crypto_crypto
function base64URLEncode(str) {
    return str.toString('base64')
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}
var verifier = base64URLEncode(crypto.randomBytes(32));

​

Ejemplo de Java

// Dependencia: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Importar la clase Base64.
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.getUrlEncoder().withoutPadding().encodeToString(code);

​

Ejemplo para Android

// Dependencia: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Importar la clase Base64.
// import org.apache.commons.codec.binary.Base64;
SecureRandom sr = new SecureRandom();
byte[] code = new byte[32];
sr.nextBytes(code);
String verifier = Base64.encodeToString(code, Base64.URL_SAFE | Base64.NO_WRAP | Base64.NO_PADDING);

​

Ejemplo en Swift 5

var buffer = [UInt8](repeating: 0, count: 32)
_ = SecRandomCopyBytes(kSecRandomDefault, buffer.count, &buffer)
let verifier = Data(buffer).base64EncodedString()
    .replacingOccurrences(of: "+", with: "-")
    .replacingOccurrences(of: "/", with: "_")
    .replacingOccurrences(of: "=", with: "")

​

Ejemplo en Objective-C

NSMutableData *data = [NSMutableData dataWithLength:32];
int result __attribute__((unused)) = SecRandomCopyBytes(kSecRandomDefault, 32, data.mutableBytes);
NSString *verifier = [[[[data base64EncodedStringWithOptions:0]
                        stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
                        stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
                        stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];

​

Crear un desafío de código

Genera un code_challenge a partir del code_verifier, que se enviará a Auth0 para solicitar un authorization_code.

Para obtener más información sobre cómo se deriva el code_challenge del code_verifier, consulta la sección 4.2 Client Creates the Code Challenge de la especificación OAuth Proof Key for Code Exchange.

​

Ejemplo de JavaScript

// Dependencia: módulo crypto de Node.js
// https://nodejs.org/api/crypto.html#crypto_crypto
function sha256(buffer) {
    return crypto.createHash('sha256').update(buffer).digest();
}
var challenge = base64URLEncode(sha256(verifier));

​

Ejemplo en Java

// Dependencia: Apache Commons Codec
// https://commons.apache.org/proper/commons-codec/
// Importar la clase Base64.
// import org.apache.commons.codec.binary.Base64;
byte[] bytes = verifier.getBytes("US-ASCII");
MessageDigest md = MessageDigest.getInstance("SHA-256");
md.update(bytes, 0, bytes.length);
byte[] digest = md.digest();
String challenge = Base64.encodeBase64URLSafeString(digest);

​

Ejemplo de Swift 5

import CommonCrypto

// ...

guard let data = verifier.data(using: .utf8) else { return nil }
var buffer = [UInt8](repeating: 0, count: Int(CC_SHA256_DIGEST_LENGTH))
_ = data.withUnsafeBytes {
    CC_SHA256($0.baseAddress, CC_LONG(data.count), &buffer)
}
let hash = Data(buffer)
let challenge = hash.base64EncodedString()
    .replacingOccurrences(of: "+", with: "-")
    .replacingOccurrences(of: "/", with: "_")
    .replacingOccurrences(of: "=", with: "")

​

Ejemplo en Objective-C

// Dependencia: biblioteca Apple Common Crypto
// http://opensource.apple.com//source/CommonCrypto
u_int8_t buffer[CC_SHA256_DIGEST_LENGTH * sizeof(u_int8_t)];
memset(buffer, 0x0, CC_SHA256_DIGEST_LENGTH);
NSData *data = [verifier dataUsingEncoding:NSUTF8StringEncoding];
CC_SHA256([data bytes], (CC_LONG)[data length], buffer);
NSData *hash = [NSData dataWithBytes:buffer length:CC_SHA256_DIGEST_LENGTH];
NSString *challenge = [[[[hash base64EncodedStringWithOptions:0]
                         stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
                         stringByReplacingOccurrencesOfString:@"/" withString:@"_"]
                         stringByTrimmingCharactersInSet:[NSCharacterSet characterSetWithCharactersInString:@"="]];

​

Autoriza al usuario

Solicita la autorización del usuario y redirígelo de nuevo a tu aplicación con un authorization_code.

Una vez que hayas creado el code_verifier y el code_challenge, debes obtener la autorización del usuario. Técnicamente, este es el comienzo del flujo de autorización, y 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 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, incluyendo el code_challenge que generaste en el paso anterior y el método que utilizaste para generarlo.

​

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.
code_challenge	Desafío generado a partir del code_verifier.
code_challenge_method	Método utilizado para generar el desafío (por ejemplo, S256). La especificación de PKCE define dos métodos, S256 y plain; el primero se usa en este ejemplo y es el único compatible con Auth0, ya que el segundo no se recomienda.
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. El código de autorización estará disponible en el parámetro de URL code. 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 respeta ningún fragmento.
scope	Especifica los alcances para los que desea solicitar autorización, que determinan qué claim (o atributos del usuario) desea recibir. Deben estar separados por espacios. Para obtener un ID Token en la respuesta, debe especificar al menos el scope openid. Si desea recibir el perfil completo del usuario, puede solicitar openid profile. Puede solicitar cualquiera de los scopes estándar de OpenID Connect (OIDC) sobre usuarios, como email, o claim personalizado que cumplan con un formato con espacio de nombres. Incluya offline_access para obtener un Token de actualización (asegúrese 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 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 evitar ataques de falsificación de solicitudes entre sitios (CSRF), consulte Mitigate CSRF Attacks With State Parameters.
connection	(opcional) Obliga al usuario a iniciar sesión con una conexión específica. Por ejemplo, puede pasar un valor de github para enviar al usuario directamente a GitHub e iniciar sesión con su cuenta de GitHub. Cuando 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. Cuando no se proporciona, si 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 login a su aplicación podría verse así:

​

Respuesta

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

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

​

Solicita tokens

Intercambia tu authorization_code y code_verifier por 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, deberás enviar una solicitud POST a la URL del token junto con el code_verifier.

​

Ejemplo de solicitud POST a la URL del token

​

Parámetros

Nombre del parámetro	Descripción
grant_type	Establécelo en “authorization_code”.
code_verifier	La clave criptográficamente aleatoria que se generó en el primer paso de este tutorial.
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.
redirect_uri	La URL de devolución de llamada válida configurada en la configuración de la 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 sale bien, recibirás una respuesta HTTP 200 con una carga útil 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",
  "expires_in":86400
}

Valide sus tokens antes de guardarlos. Para saber cómo hacerlo, lea Validar ID Tokens y Validar Tokens de acceso.

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

Tokens de acceso se usan para llamar al endpoint /userinfo de la API de autenticación de Auth0 o a otra API. Si llama a su propia API, lo primero que deberá hacer es verificar el Token de acceso.

Tokens de actualización se usan para obtener un nuevo token de acceso o token de ID después de que el anterior haya expirado. refresh_token solo estará presente en la respuesta si incluyó el scope offline_access y habilitó Allow Offline Access para su API en el Dashboard.

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

​

Casos de uso

​

Solicitud de autenticación básica

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

Ahora, cuando solicites tokens, tu ID Token contendrá los claims más básicos. Cuando decodifiques el ID Token, tendrá un aspecto similar a:

{
  "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 agregar los alcances adecuados al autorizar al usuario:

Ahora, cuando solicites tokens, tu token de ID contendrá los claims de nombre e imagen solicitados. Cuando decodifiques el token de ID, tendrá un aspecto similar a:

{
  "name": "auth0user@...",
  "picture": "https://example.com/profile-pic.png",
  "iss": "https://auth0user.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}

​

Solicitar el inicio de sesión de usuarios con GitHub

Además de la autenticación habitual de usuarios, 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. Obtenga 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 pasar el parámetro connection y establecer su valor en el nombre de la conexión (en este caso, github) al autorizar al usuario:

Ahora, cuando solicites tokens, tu token de ID contendrá un claim sub con el id único del usuario que devuelve GitHub. Cuando decodifiques el token de ID, se verá de forma similar a:

{
  "name": "John Smith",
  "picture": "https://avatars.example.com",
  "email": "jsmith@...",
  "email_verified": true,
  "iss": "https://auth0user.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}

​

Más información

• Marco de autorización OAuth 2.0
• Protocolo OpenID Connect
• Tokens