Saltar al contenido principal
Proteger una aplicación de página única (SPA) puede ser un desafío. Sin embargo, si tu SPA cumple los siguientes criterios, puedes simplificar la implementación usando cookies para la autenticación.
  • Se sirve al cliente mediante tu propio backend.
  • Tiene el mismo dominio que tu backend.
  • Hace llamadas a la API de tu backend que requieren autenticación.
Aquí tienes una descripción de este enfoque, así como una implementación de ejemplo con Node.js.

​
Cómo funciona

Los pasos a continuación muestran cómo se recuperan y utilizan los tokens. En este enfoque, se usa Implicit Flow with Form Post en lugar de un Authorization Code Flow with Proof Key for Code Exchange tradicional. Esto se debe a que Form Post Response Mode es una forma más sencilla de implementar el inicio de sesión cuando se solicita acceso a un recurso propio.
Autenticar aplicaciones de página única mediante cookies: diagrama de cómo funciona, parte 1
  1. El usuario accede a una ruta protegida desde el navegador o realiza alguna acción que requiere iniciar un paso de autenticación (como hacer clic en un botón de inicio de sesión)
  2. El cliente del navegador redirige a una ruta /login en el backend o a la ruta protegida, según lo que haya hecho el usuario
  3. El backend construye una solicitud al endpoint /authorize del Servidor de autorización y redirige allí al cliente del navegador
  4. Se pide al usuario que se autentique con el método que presente el Servidor de autorización
  5. El Servidor de autorización envía los tokens mediante POST al URI de redirección como un formulario codificado en URL. El backend puede recuperar esos tokens analizando los datos del cuerpo.
En este punto, el usuario ya está autenticado y el backend tiene los tokens necesarios. Ahora se puede crear una cookie para representar este estado en el cliente. Luego, el navegador del cliente se redirige a una ruta que sirve la SPA y que también recibe la cookie de autenticación. A partir de este momento, esta cookie se intercambia entre el cliente y el backend cuando se realizan llamadas a la API mediante AJAX. En cada solicitud, el backend verifica si la cookie sigue siendo válida y, de ser así, permite que la solicitud continúe.
Autenticar aplicaciones de página única mediante cookies: diagrama de cómo funciona, parte 2

​
Cookies inválidas o ausentes

Al implementar este enfoque, deberá controlar los casos en los que la cookie de autenticación no sea válida o falte. La llamada del cliente a la API del backend se realiza en segundo plano, por lo que el cliente debe gestionar cualquier respuesta del servidor que indique que el usuario debe volver a autenticarse. En la siguiente aplicación de ejemplo, este caso se gestiona de forma rudimentaria: se solicita al usuario que vuelva a autenticarse si la llamada a la API da como resultado una respuesta 302 Redirect. El 302 se produce porque, si la validación de la cookie no se realiza correctamente, el servidor intenta redirigir al endpoint de autorización del y envía esta respuesta al cliente.

​
Ejemplo

La aplicación de ejemplo utiliza Node.js y Express para demostrar los conceptos tratados anteriormente.

​
Requisitos previos

  • Para seguir este tutorial, asegúrate de tener instalada la última versión de Node.
  • Una vez instalado Node, descarga o clona el código fuente y abre la carpeta del proyecto en una ventana de terminal. 
    # Clona el repositorio del tutorial mediante SSH
git clone git@github.com:auth0-blog/spa-cookie-demo
# ... o, si usas HTTPS:
git clone https://github.com/auth0-blog/spa-cookie-demo.git
# Ve al directorio del proyecto
cd spa-cookie-demo
  • La rama master representa el estado de la aplicación antes de añadir cualquier método de autenticación. Si quieres consultar la versión final de la aplicación, cambia a la rama with-oidc: git checkout with-oidc

​
Inicializa la aplicación de Node.js

Instala las dependencias de la aplicación ejecutando npm install desde la terminal. Para ejecutar la aplicación, usa npm run dev. Este comando inicia el servidor Express. Ve a http://localhost:3000 en tu navegador para ver la aplicación. El servidor de desarrollo usa nodemon, que se reinicia automáticamente cada vez que detecta cambios en algún archivo.

​
Explora la aplicación

Con la aplicación abierta en http://localhost:3000, haz clic en el botón Call API. Deberías ver un mensaje en la pantalla.
Pantalla Explora la aplicación de SPA Authentication with Cookies
Ten en cuenta que pudiste hacer la llamada a la API sin haber iniciado sesión. Vamos a corregirlo agregando middleware que exija que el usuario se autentique antes de poder realizar la llamada a la API.

​
Configurar el entorno

Para que la aplicación funcione con autenticación, express-openid-connect requiere algunas variables de entorno. En esta aplicación, estas variables pueden especificarse en un archivo .env. Cree un archivo .env en la raíz del directorio del proyecto y complételo con lo siguiente:
.env
ISSUER_BASE_URL="<YOUR OIDC URL>"
CLIENT_ID="<YOUR OIDC CLIENT ID>"
BASE_URL="http://localhost:3000"
APP_SESSION_SECRET="<YOUR SECRET VALUE>"

​
Configura la aplicación en Auth0

  1. Ve a Dashboard > Applications > Applications y haz clic en Create Application.
  2. Asigna un nombre a la nueva aplicación, selecciona Regular Web Applications y haz clic en Create
  3. En Settings de la nueva aplicación, agrega http:/localhost:3000/callback a Allowed Callback URLs.
  4. Agrega http:/localhost:3000 a Allowed Logout URLs.
  5. Haz clic en Save Changes.
  6. Ve a Dashboard > Authentication > Social y configura algunas conexiones sociales. Habilítalas para la aplicación en las opciones de Application de la pestaña Connections. En el ejemplo se usan una base de datos de username/password, Facebook, Google y X.
  7. En la pantalla Settings, toma nota del dominio y del ID de cliente que aparecen en la parte superior.
  8. Hay dos valores que debes configurar como parte de la aplicación. Vuelve a abrir el archivo .env y establece estos valores:

​
Ejecuta la aplicación

  1. Con la configuración del servidor y del entorno completada, busca la ventana del navegador donde tienes abierta la aplicación. Si has cerrado el navegador y detenido el servidor, ejecuta lo siguiente en la terminal para reiniciar la aplicación: npm run dev
  2. Abre http://localhost:3000 en el navegador. En términos de interfaz de usuario, la aplicación debería verse igual; sin embargo, esta vez, cuando hagas clic en el botón Call API, deberías recibir una advertencia indicando que el usuario no ha iniciado sesión. Fíjate también en que ya no ves el mensaje “Hello, World” como antes, ya que la llamada a la API ha sido rechazada.
  3. Haz clic en Log in now para iniciar sesión. Una vez que te hayas autenticado, volverás a la aplicación y verás una interfaz actualizada que refleja tu nuevo estado de inicio de sesión. Deberías poder pulsar el botón Call API una vez más para hacer una llamada a la API del servidor, y ahora sí funcionará.
  4. Haz clic en el enlace Profile en la parte superior de la página para mostrar la información del usuario recuperada del ID Token.

​
Más información