Saltar al contenido principal
Para seguir este flujo de trabajo, asegúrese de contar con lo siguiente:
El flujo de trabajo de implementación de ACUL en producción compila e implementa sus pantallas de ACUL y configura su inquilino para usarlas. Utiliza GitHub Actions para:
  • Compilar los paquetes de recursos de sus pantallas
    • El flujo de trabajo lee el archivo config/deploy_config.yml para determinar qué pantallas están marcadas para su implementación.
    • Si encuentra destinos de implementación, el flujo de trabajo compila sus recursos de ACUL con Vite y genera el código en el directorio /dist.
    • Cargar sus recursos en AWS S3
      • El flujo de trabajo se autentica de forma segura en AWS mediante OpenID Connect (OIDC).
      • Carga el contenido del directorio /dist en su bucket de S3.
    • Configurar su inquilino de Auth0
      • El flujo de trabajo usa Auth0 CLI con una aplicación M2M para configurar las pantallas en su inquilino.
      • Asigna cada pantalla a la pantalla correcta de Auth0 mediante el archivo config/screen-to-prompt-mapping.js.
      • Actualiza la configuración de personalización de pantallas de Auth0 para que apunte a sus recursos en la CDN de CloudFront.
Una vez configurado, un git push a la rama main de su proyecto inicia el flujo de trabajo de GitHub.
Para consultar un ejemplo completo del flujo de trabajo de implementación de ACUL en producción, lea ACUL GITHUB ACTIONS en GitHub.

​
1. Configuración de Auth0

Cree una aplicación de Machine-to-Machine para que el flujo de trabajo de GitHub pueda actualizar la configuración de su inquilino.
  1. Vaya a Auth0 Dashboard > Applications.
  2. Seleccione Create Application.
  3. Seleccione Machine to Machine Applications.
  4. En Name, introduzca un nombre descriptivo, por ejemplo: GitHub ACUL Deployment.
  5. Seleccione Create.
  6. En Authorize Machine to Machine Application, seleccione Auth0 Management API.
  7. Seleccione estos permisos específicos:
    • read:branding
    • update:branding
    • read:prompts
    • update:prompts
    • read:custom_domains
  8. Seleccione Authorize.
  9. Vaya a la pestaña Settings y tome nota de lo siguiente:
    • Domain
    • Client ID
    • Client Secret

​
2. Cargue y publique sus recursos con Amazon Web Services

Para cargar y publicar sus recursos, necesita un bucket de AWS S3 y configurar CloudFront como CDN.
  • Cree un bucket de AWS S3. Bloquee todo el acceso público para que este bucket sea privado. Este bucket privado almacena sus recursos.
  • Configure una distribución de CloudFront. Este CDN publica sus recursos de forma segura. Debe configurarse para usar su bucket de S3 como Origin mediante Origin Access Control (OAC).

​
3. Cree un rol de IAM de AWS para GitHub Action

Cree un rol de IAM en AWS para otorgar a GitHub Actions permisos para cargar archivos en AWS S3.
  • Este rol de IAM debe usar Web Identity (OIDC) y confiar en token.actions.githubusercontent.com.
  • El rol necesita una política que otorgue los permisos s3:PutObject, s3:DeleteObject y s3:ListBucket en su bucket de S3.

​
4. Configure el repositorio de GitHub

Para configurar el repositorio de GitHub:
  1. Vaya a GitHub > Settings.
  2. Seleccione Secrets and Variables y, a continuación, Actions.
  3. Seleccione New repository secret.
Agregue los siguientes secretos del repositorio:
  • AWS_S3_ARN: El ARN del rol de IAM que creó.
    • S3_BUCKET_NAME: El nombre de su bucket de S3.
    • AWS_REGION: La región en la que se encuentra su bucket de S3. Por ejemplo, us-east-1.
    • S3_CDN_URL: El nombre de dominio de su distribución de CloudFront. No agregue una barra diagonal al final. Por ejemplo, https://d1234abcdef.cloudfront.net.
    • AUTH0_DOMAIN: El dominio de su inquilino de Auth0.
    • AUTH0_CLIENT_ID: El ID de cliente de su aplicación M2M.
    • AUTH0_CLIENT_SECRET: El Secreto del cliente de su aplicación M2M.

​
5. Configure su implementación

Puede controlar qué pantallas se despliegan editando los archivos de configuración ubicados en el directorio .github/config/:
  • config/deploy_config.yml: Su panel de control principal. Configure una pantalla con true para desplegarla o con false para omitirla.
  • config/screen-to-prompt-mapping.js: Asocia los nombres internos de directorio de sus pantallas con el nombre oficial del prompt de Auth0. Ejemplo: mfa-sms-challenge con el nombre oficial del prompt de Auth0 mfa-sms.
  • config/context-configuration.js: Define los datos de contexto de Auth0. Ejemplo: la configuración de marca debe estar disponible para sus pantallas personalizadas.