es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Implementación de PCKE para una aplicación SPA de React y una API REST.

30 Jul, 2023 Programación

Necesito implementar un sistema donde el frontend sea un SPA puro hecho con react (por “puro” me refiero a que solo esté alojado como un conjunto de archivos estáticos) y una API REST de nodejs hecha con express. No puedo utilizar proveedores de autenticación de terceros como Auth0, etc., por lo que todo debe funcionar localmente.

La aplicación debe tener autenticación y debe estar más o menos actualizada según los estándares modernos. Estoy buscando implementar el flujo PKCE con tokens de autenticación JWT de corta duración y tokens de actualización de largo alcance.

Hay algo que me confunde. Cada guía sobre el flujo PKCE siempre menciona redirecciones de una URL a otra durante el flujo de autenticación. Sin embargo, en mi configuración, las redirecciones no son bienvenidas en absoluto.

Quiero verificar y descubrir si está bien implementar el flujo PKCE utilizando solicitudes XHR puras para comunicarse entre el SPA y la API. ¿Es apropiado hacerlo? ¿Qué riesgos importantes existen en comparación con una configuración con redirecciones?

EDIT: para que esta pregunta sea más específica, ¿cuál debería ser el flujo de autenticación PKCE si solo se pueden usar SPA y XHR (y se deben evitar las redirecciones)?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Implementando el flujo PKCE con solicitudes XHR en un SPA de React y una API de Express

    Si estás implementando un sistema donde el frontend es un SPA puro hecho con React y una API REST de Express, puedes integrar la autenticación con el flujo PKCE utilizando solicitudes XHR sin necesidad de redireccionamientos. Aquí están los pasos a seguir:

    Lado del Cliente

    1. El usuario ingresa sus credenciales en el SPA de React y hace clic en el botón de inicio de sesión.
    2. Al hacer clic, el SPA de React envía una solicitud XHR POST al servidor con las credenciales.
    3. El servidor verifica las credenciales y, si son correctas, genera un código verificador y un desafío de código utilizando el método PKCE.
    4. El servidor devuelve el desafío de código al SPA de React.
    5. El SPA de React genera un código verificador aleatorio y calcula el desafío de código correspondiente utilizando el método PKCE.
    6. El SPA de React envía el desafío de código y el código verificador al servidor en otra solicitud XHR POST para iniciar el flujo de código de autorización.
    7. El servidor valida el desafío de código y genera un código de autorización que devuelve al SPA de React.
    8. Luego, el SPA de React envía una solicitud XHR POST al servidor para intercambiar el código de autorización por tokens (token de acceso, token de actualización y un token JWT de corta duración).
    9. El servidor valida el código de autorización, el código verificador y el desafío de código, genera los tokens y los devuelve al SPA de React.

    Lado del Servidor

    1. El servidor recibe una solicitud XHR POST con las credenciales del SPA de React.
    2. El servidor verifica las credenciales y genera un código verificador y un desafío de código utilizando el método PKCE.
    3. El servidor devuelve el desafío de código al SPA de React.
    4. El servidor recibe una solicitud XHR POST con el desafío de código y el código verificador del SPA de React para iniciar el flujo de código de autorización.
    5. El servidor valida el desafío de código y genera un código de autorización que devuelve al SPA de React.
    6. El servidor recibe una solicitud XHR POST con el código de autorización del SPA de React para intercambiarlo por tokens.
    7. El servidor valida el código de autorización, el código verificador y el desafío de código, genera los tokens y los devuelve al SPA de React.

    Riesgos

    El uso de solicitudes XHR para la autenticación plantea un riesgo en comparación con el uso de redireccionamientos en el flujo PKCE. El riesgo es que el punto final de autenticación puede estar expuesto a ataques CSRF. Para mitigar esto, el punto final de autenticación debe ser diseñado para aceptar solo solicitudes POST con credenciales y desafíos/verificadores de código, y siempre debe devolver respuestas JSON.

    En general, el uso de solicitudes XHR para implementar el flujo PKCE en un sistema de SPA de React y API de Express sin redireccionamientos es apropiado y cumple con los estándares de autenticación modernos.

Comments are closed.