Implementación de Authorization CodeFlow con Proofkit en Twitter API

¿Cómo implementar Authorization CodeFlow con Proof Key for Code Exchange usando la API de Twitter?

Hoy vamos a aprender a implementar el flujo de autorización conocido como Authorization CodeFlow con Proof Key for Code Exchange (PKCE) en la API de Twitter. Este método es ideal para desarrollar aplicaciones en las que el secreto del cliente no se puede almacenar de forma segura. A continuación, te enseñaré paso a paso cómo lograrlo utilizando la API de Twitter.

¿Cómo crear una aplicación en la plataforma de desarrolladores de Twitter?

El primer paso es ir al Twitter Developer Portal para crear tu aplicación. Sigue estas indicaciones:

1. Crea un proyecto y, dentro de él, puedes crear hasta tres aplicaciones.
2. Ve a la sección Overview y selecciona la opción para agregar una nueva app.
3. Elige el entorno, en este ejemplo usaremos "staging".
4. Introduce un nombre significativo para tu aplicación.
5. Establece la autenticación requerida:
   • Permisos de solo lectura.
   • Una app nativa (cliente público).
   • Proporciona un URL de callback válido (en modo desarrollo, podrías usar http://localhost:3003/api/callback).
6. Guarda la configuración.
7. Copia el Client ID y el Client Secret para usarlos más adelante, asegurándote de almacenarlos de manera segura.

¿Cómo implementar la solicitud de autorización?

Una vez tengamos configurada nuestra app, es momento de establecer la solicitud de autorización con PKCE. Aquí los pasos esenciales:

// Genera valores para state y codeVerifier
const state = randomString.generate(16);
const codeVerifier = randomString.generate(128);
const codeChallenge = generateCodeChallenge(codeVerifier); // Función que hashea el codeVerifier

// Configura los parámetros para el authRequest
const authRequest = {
  response_type: 'code',
  client_id: CLIENT_ID,
  redirect_uri: 'http://localhost:3003/api/callback',
  scope: 'read:user, read:tweets',
  state: state,
  code_challenge: codeChallenge,
  code_challenge_method: 'S256',
};

// Almacena state y codeVerifier en cookies
document.cookie = `state=${state}`;
document.cookie = `codeVerifier=${codeVerifier}`;

Al completar este setup, el cliente envía la solicitud de autorización al servidor de Twitter, quien verifica la validez de la llamada.

¿Cómo verificar y obtener el token de acceso?

Cuando el usuario autoriza la app, Twitter redirige a nuestra URL de callback, donde debemos:

1. Verificar que el estado recibido en la query coincide con el estado almacenado:
   • Si no coincide, se muestra un error.
2. Intercambiar el código de autorización por un token de acceso enviando el codeVerifier al servidor de autorización.

// Verificación del estado
if (request.query.state !== cookies.state) {
  throw new Error('State does not match');
}

// Intercambio de código por token
async function exchangeCodeForToken(authCode) {
  const data = {
    grant_type: 'authorization_code',
    client_id: CLIENT_ID,
    redirect_uri: 'http://localhost:3003/api/callback',
    code: authCode,
    code_verifier: cookies.codeVerifier,
  };

  const response = await fetch(TWITTER_TOKEN_ENDPOINT, {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(data),
  });

  return response.json();
}

Con el token de acceso, podrás interactuar con la API de Twitter accediendo a los recursos permitidos según los permisos definidos.

¿Cómo manejar restricciones de CORS en Twitter?

Twitter aplica políticas CORS que pueden restringir las solicitudes directas desde el cliente. Para solucionar esto, puedes crear un proxy en el servidor:

// Implementación de middleware en el backend para evitar problemas de CORS
app.post('/api/cors', async (req, res) => {
  const url = req.body.url;
  const response = await fetch(url, {
    headers: { Authorization: `Bearer ${ACCESS_TOKEN}` },
  });
  const data = await response.json();
  res.send(data);
});

Finalmente, desde el cliente, puedes llamar al middleware en lugar de hacerlo directamente a la API de Twitter.

¡Te animo a que pongas en práctica esta implementación! Intenta usar otro servicio que no sea Twitter para reforzar tus conocimientos. En la próxima sesión, exploraremos cómo implementar Implicit Flow con Twitch. ¡Sigue adelante, estás a un paso más cerca de dominar OAuth 2.0!