Saltar al contenido principal

​
Descripción general

Conecta una instancia nueva o existente de Auth0 a tu proyecto de Netlify para mejorar la seguridad, la escalabilidad y la personalización de tu aplicación con la integración de Auth0. Esta integración te permite implementar un enfoque optimizado de identidad del cliente directamente en tu aplicación. Usa la nueva integración para crear y personalizar el flujo de identidad de tu proyecto de Netlify. Para poner tu aplicación en marcha de forma rápida y segura, esta integración:
  • Configura un entorno de producción en Netlify que se integra con tu inquilino de Auth0 en solo unos clics.
  • Crea automáticamente una aplicación en tu inquilino de Auth0 conectada a tu proyecto de Netlify.
  • Precarga tus credenciales de Auth0 en Netlify, para que puedas omitir algunos de los pasos manuales de este proceso.

​
Requisitos previos

Para empezar a integrar Auth0 en tu proyecto de Netlify, debes cumplir algunos requisitos antes de comenzar:
  • Una cuenta de Netlify con un proyecto que quieras integrar. Visita Create your Netlify account para crear una cuenta.
  • Una aplicación web que requiera autenticación, como una aplicación de React o Vue, o un sitio estático con funciones sin servidor.

​
Agregar una integración de Netlify

Después de crear su cuenta de Netlify e iniciar sesión en el panel, puede comenzar el proceso para agregar una integración. Para agregar la integración de Auth0 a un proyecto existente de Netlify:
  1. En el panel de Netlify, vaya a Extensions > Directory.
  2. Busque Auth0 y seleccione Install.
  3. Seleccione Install para continuar con la instalación en su portal de integración de Auth0.

​
Conecta tu sitio

Para conectar tu sitio a Auth0:
  1. Ve a la Site configuration del sitio que quieres conectar a Auth0.
  2. En la barra lateral, selecciona Auth0 en Acceso y seguridad.
  3. Selecciona Vincular un inquilino de Auth0 y sigue las instrucciones para conectarte a tu cuenta de Auth0. Si aún no tienes una cuenta de Auth0, puedes registrarte en https://auth0.com/signup.
  4. Selecciona tu inquilino en la lista desplegable y, a continuación, selecciona Aceptar para autorizar tu cuenta.
  5. Después de vincular tu inquilino, selecciona Agregar inquilino.
  6. Completa la información requerida para tu inquilino y tu aplicación, habilita la casilla Volver a implementar el sitio y selecciona Crear inquilino del sitio.
  7. Ahora deberías ver el inquilino del sitio vinculado correctamente en la configuración de tu sitio.
Ahora deberías ver tu aplicación cliente y la API en tu Auth0 Dashboard, en Applications.

​
Configura la integración

Al integrar Auth0 con tu proyecto de Netlify, tendrás que proporcionar a tu aplicación ajustes de autenticación, como el y el dominio de Auth0. Si tu aplicación lee estos ajustes desde variables de entorno, la extensión los inyecta automáticamente.
  1. Ve al panel de Netlify.
  2. Ve a Site configuration > Environment variables.
  3. Haz clic en Add a variable e introduce:
    • AUTH0_CLIENT_ID (tu ID de cliente de Auth0)
    • AUTH0_DOMAIN (tu dominio de Auth0)
      Estas variables, junto con el resto de la información de la aplicación, se pueden encontrar en tu Auth0 Dashboard, en Applications > [Your app] > Settings.
Ahora ya deberías tener configuradas las credenciales de Auth0 adecuadas para la implementación.

​
Completar un archivo de configuración

Si su aplicación lee la configuración de Auth0 desde un archivo, puede automatizar este proceso durante la fase de compilación. Esto garantiza que su aplicación siempre tenga la configuración de autorización adecuada sin tener que modificar archivos manualmente. Para hacerlo:
  1. Vaya al Dashboard de Netlify.
  2. Vaya a Site configuration > Build & deploy > Build settings.
  3. Modifique el Build command para incluir un script de shell antes de iniciar la compilación: 
    echo "{\"clientId\": \"${AUTH0_CLIENT_ID}\", \"domain\": \"${AUTH0_DOMAIN}\"}" > auth_config.json && npm run build
Este script crea un archivo JSON llamado auth_config.json y lo completa con las variables de entorno AUTH0_CLIENT_ID y AUTH0_DOMAIN configuradas anteriormente, lo que garantiza que la aplicación tenga la configuración correcta de Auth0 en tiempo de ejecución.

​
Gestionar la integración

Después de agregar la integración de Auth0 a tu proyecto de Netlify, el crea una nueva aplicación para administrar y personalizar tu flujo de trabajo de CIAM.
  1. Ve al Auth0 Dashboard.
  2. Selecciona Applications > Applications > [Tu aplicación de Netlify]
  3. Confirma el URI de la aplicación de Netlify en Settings > Application URIs.
Ahora puedes personalizar y modificar esta aplicación como cualquier otra aplicación en tu Auth0 Dashboard.