Alojar una página de inicio de sesión con Cloud Run

Para usar identidades externas con Identity-Aware Proxy (IAP), tu aplicación necesita una página de inicio de sesión. IAP redirigirá a los usuarios a esta página para que se autentiquen antes de poder acceder a recursos seguros.

En este documento se explica cómo desplegar y personalizar una página de inicio de sesión prediseñada con Cloud Run. Es la forma más rápida de empezar a usar identidades externas y no requiere que escribas código.

También puedes crear una página de inicio de sesión. Crear tu propia página es más difícil, pero te da más control sobre el flujo de autenticación y la experiencia de usuario. Para obtener más información, consulta los artículos Crear una página de inicio de sesión con FirebaseUI y Crear una página de inicio de sesión personalizada.

Limitaciones de la página de inicio de sesión

No puedes usar la página de inicio de sesión prediseñada si tu proyecto tiene habilitada la protección contra la enumeración de correos electrónicos.

Si tu proyecto tiene habilitada la protección contra la enumeración de correos electrónicos, inhabilita email-enumeration-protection antes de continuar con los procedimientos de este documento.

Antes de empezar

  • Habilita la API Compute Engine.

    Habilitar la API de Compute Engine

  • Habilita las identidades externas y selecciona la opción Crear página de inicio de sesión para mí durante la configuración. De esta forma, Cloud Run y FirebaseUI pueden crear una página de inicio de sesión para ti.

  • Asegúrate de que la cuenta de servicio que usa Cloud Run, PROJECT_NUMBER-compute@developer.gserviceaccount.com, tenga los siguientes roles predefinidos:

    • roles/identitytoolkit.viewer
    • roles/iap.settingsAdmin
    • roles/compute.networkViewer

Definir el URI de redirección autorizado para proveedores de Identity Platform

Si usas proveedores de Identity Platform que requieren una redirección para iniciar sesión (redirección a la página de inicio de sesión del IdP externo). Debes añadir la URL de la página de inicio de sesión alojada como URL de redirección autorizada en la configuración de tu proveedor.

Por ejemplo, en el caso de un proveedor de Google, debes hacer lo siguiente:

  1. Copia la URL de inicio de sesión después de seleccionar la aplicación protegida con IAP.

  2. En la Google Cloud consola, ve a la página Credenciales.

    Ir a Credenciales

  3. Añade LOGIN_URL/__/auth/handler como uno de los URIs de redirección autorizados del cliente de OAuth 2.0 de tu aplicación. Selecciona el mismo ID de cliente de OAuth que usaste al configurar el proveedor de Google.

En el caso de otros proveedores de SAML y OIDC, haz lo mismo añadiendo LOGIN_URL/__/auth/handler como URI de redirección autorizado o URL de ACS.

Probar la página de inicio de sesión

La página de inicio de sesión inicial creada por IAP funciona correctamente. Para probarlo, sigue estos pasos:

  1. Ve a un recurso protegido por IAP. Se te debería redirigir automáticamente a la página de inicio de sesión.

  2. Selecciona un inquilino y un proveedor para iniciar sesión. Si no ves ningún cliente ni proveedor en la lista, comprueba que hayas configurado uno con Identity Platform.

  3. Inicia sesión con tus credenciales.

Se te debería redirigir al recurso protegido.

Personalizar la página de inicio de sesión

Puedes personalizar la página de inicio de sesión mediante un archivo de configuración JSON. Estas son algunas opciones:

  • Añadir un encabezado y un logotipo a la página de inicio de sesión.
  • Especificar los clientes y proveedores disponibles.
  • Personalizar los iconos y el estilo de cada botón de proveedor y de propietario.
  • Añadir enlaces a la política de privacidad y a los términos del servicio de tu aplicación.

En las siguientes secciones se explica cómo acceder al archivo de configuración JSON y cómo actualizarlo.

Obtener un token de acceso

Para administrar la página de inicio de sesión, necesitas un token de acceso de Google. La forma más sencilla de obtener uno es habilitar Google como proveedor en Identity Platform. Si tu aplicación ya usa Google como proveedor de identidades, puedes saltarte esta sección.

  1. Ve a la página Identity Platform Providers (Proveedores de Identity Platform) en la consola deGoogle Cloud .

    Ir a la página Proveedores de Identity Platform

  2. Haz clic en Añadir un proveedor.

  3. Seleccione Google en la lista de proveedores.

  4. Configura el ID de cliente web y el secreto de cliente web:

    1. En la Google Cloud consola, ve a la página Credenciales.

      Ir a Credenciales

    2. Usa un cliente de OAuth 2.0 que ya tengas o crea uno. Configura Client ID y Client secret con los valores ID de cliente web y Secreto de cliente web. Añade LOGIN_URL/__/auth/handler como uno de los URIs de redirección autorizados del cliente de OAuth 2.0. La LOGIN_URL es la URL de inicio de sesión que crea IAP después de seleccionar la opción Crear página de inicio de sesión para mí. Se puede encontrar en la página de IAP de la Google Cloud consola, seleccionando el recurso protegido por IAP.

  5. Haz clic en Guardar en ambas páginas.

Iniciar sesión en el panel de administración

Configuración JSON de la página de inicio de sesión alojada por Cloud Run en el panel LOGIN_URL/admin. Sigue estos pasos para acceder al panel. Ten en cuenta que necesitarás el rol Administrador de Storage (roles/storage.admin).

  1. Ve a la página IAP de la consola de Google Cloud .

    Ir a la página de IAP

  2. Selecciona el recurso en la lista.

  3. Abre la URL que aparece en Personalizar página del panel de información. Debería ser similar a https://servicename-xyz-uc.a.run.app/admin.

  4. Inicia sesión con la misma cuenta de Google que usaste para configurar las compras en la aplicación. Aparecerá un editor de texto que contiene el archivo de configuración JSON.

Modificar la configuración

El esquema de configuración de la página de inicio de sesión se basa en FirebaseUI y hereda muchas de sus propiedades. En lugar de usar el IAP creado LOGIN_URL como authDomain predeterminado, puedes usar PROJECT_ID.firebaseapp.com.

Si quieres usar PROJECT_ID.firebaseapp.com como authDomain, cambia signInFlow por popup para evitar problemas de acceso al almacenamiento de terceros en los principales navegadores(consulta las prácticas recomendadas para usar signInWithRedirect en navegadores que bloquean el acceso al almacenamiento de terceros). Además, siga las instrucciones de Configurar URIs de redirección autorizados para proveedores de Identity Platform para añadir PROJECT_ID.firebaseapp.com/__/auth/handler como uno de los URIs de redirección autorizados o URLs ACS del proveedor de Identity Platform con el que iniciarán sesión los usuarios.

En el siguiente código se muestra un ejemplo de configuración con tres inquilinos:

{
  "AIzaSyC5DtmRUR...": {
    "authDomain": "awesomeco.firebaseapp.com",
    "displayMode": "optionFirst",
    "selectTenantUiTitle": "Awesome Company Portal",
    "selectTenantUiLogo": "https://awesome.com/abcd/logo.png",
    "styleUrl": "https://awesome.com/abcd/overrides/stylesheet.css",
    "tosUrl": "https://awesome.com/abcd/tos.html",
    "privacyPolicyUrl": "https://awesome.com/abcd/privacypolicy.html",
    "tenants": {
      "tenant-a-id": {
        "fullLabel": "Company A Portal",
        "displayName": "Company A",
        "iconUrl": "https://companya.com/img/icon.png",
        "logoUrl": "https://companya.com/img/logo.png",
        "buttonColor": "#007bff",
        "signInFlow": "popup",
        "signInOptions": [
          {
            "provider": "password",
            "requireDisplayName": false,
            "disableSignUp": {
              "status": true,
              "adminEmail": "admin@example.com",
              "helpLink": "https://www.example.com/trouble_signing_in"
            }
          },
          "facebook.com",
          "google.com",
          "microsoft.com",
          {
            "provider": "saml.okta-cicp-app",
            "providerName": "Corp Account",
            "fullLabel": "Employee Corporate Login",
            "buttonColor": "#ff0000",
            "iconUrl": "https://companya.com/abcd/icon-1.png"
          },
          {
            "provider": "oidc.okta-oidc",
            "providerName": "Contractor Account",
            "fullLabel": "Contractor Account Portal",
            "buttonColor": "#00ff00",
            "iconUrl": "https://companya.com/abcd/icon-2.png"
          }
        ],
        "tosUrl": "https://companya.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companya.com/abcd/privacypolicy.html"
      },
      "tenant-b-id": {
        "fullLabel": "Company B Portal",
        "displayName": "Company B",
        "iconUrl": "https://companyb.com/img/icon.png",
        "logoUrl": "https://companyb.com/img/logo.png",
        "buttonColor": "#007bff",
        "immediateFederatedRedirect": true,
        "signInFlow": "popup",
        "signInOptions": [
          {
            "provider": "saml.okta-bla-app",
            "providerName": "Corp Account",
            "buttonColor": "#0000ff",
            "iconUrl": "https://companyb.com/abcd/icon.png"
          }
        ],
        "tosUrl": "https://companyb.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companyb.com/abcd/privacypolicy.html"
      },
      "tenant-c-id": {
        "fullLabel": "Company C Portal",
        "displayName": "Company C",
        "iconUrl": "https://companyc.com/img/icon.png",
        "logoUrl": "https://companyc.com/img/logo.png",
        "buttonColor": "#007bff",
        "immediateFederatedRedirect": true,
        "signInFlow": "popup",
        "signInOptions": [
          {
            "provider": "password",
            "requireDisplayName": false
          },
          {
            "provider": "google.com",
            "scopes": ["scope1", "scope2", "https://example.com/scope3"],
            "loginHintKey": "login_hint",
            "customParameters": {
              "prompt": "consent",
            },
          }
        ],
        "tosUrl": "https://companyc.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companyc.com/abcd/privacypolicy.html",
        "adminRestrictedOperation": {
          "status": true,
          "adminEmail": "admin@example.com",
          "helpLink": "https://www.example.com/trouble_signing_in"
        }
      },
    }
  }
}

Para ver una lista completa de las propiedades disponibles, consulta la documentación de referencia.

Anular CSS

Puede usar la propiedad styleUrl para especificar un archivo CSS personalizado. Los estilos de este archivo anularán el CSS predeterminado. El archivo debe ser accesible públicamente mediante HTTPS (por ejemplo, alojado en un segmento de Cloud Storage).

En el siguiente ejemplo se muestra cómo anular el CSS predeterminado:

/** Change header title style. */
.heading-center {
  color: #7181a5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

/** Use round edged borders for container. */
.main-container {
  border-radius: 5px;
}

/** Change page background color. */
body {
  background-color: #f8f9fa;
}

Volver a desplegar la instancia de Cloud Run

En algunos casos, puede que quieras volver a desplegar la instancia de Cloud Run que aloja la página de inicio de sesión. Estos son algunos ejemplos:

  • Añadir, modificar o quitar proveedores de identidades
  • Modificar configuraciones de clientes
  • Configurar variables de entorno
  • Actualizar la imagen de contenedor a la versión más reciente

Si actualizas y vuelves a desplegar la imagen de contenedor con regularidad, te aseguras de tener las correcciones de errores y los parches de seguridad más recientes. Puedes ver la lista de cambios entre versiones en GitHub.

Puedes obtener la versión actual del contenedor implementado mediante el endpoint /versionz. Por ejemplo:

curl 'https://servicename-xyz-uc.a.run.app/versionz'

Para volver a desplegar la instancia de Cloud Run, haz lo siguiente:

  1. Ve a la página Cloud Run de la Google Cloud consola.

    Ve a la página de Cloud Run

  2. Selecciona la instancia que aloja la página de inicio de sesión.

  3. Haz clic en Editar y desplegar nueva revisión.

  4. También puedes especificar ajustes avanzados para la revisión o añadir una variable de entorno haciendo clic en la pestaña Variables y secretos.

  5. Haz clic en Desplegar.

Opciones avanzadas

Personalizar la página de inicio de sesión mediante programación

Además de usar la consola /admin, puedes actualizar la configuración de JSON mediante programación.

Para obtener la configuración actual, usa el endpoint /get_admin_config. Por ejemplo:

curl -H 'Authorization: Bearer [TOKEN]'
  'https://servicename-xyz-uc.a.run.app/get_admin_config'

Para actualizar la configuración, usa /set_admin_config. Por ejemplo:

curl -XPOST -H 'Authorization: Bearer [TOKEN]' -H "Content-type: application/json"
  -d '[UPDATED-CONFIG]' 'https://servicename-xyz-uc.a.run.app/set_admin_config'

Ambas llamadas REST requieren el ámbito https://www.googleapis.com/auth/devstorage.read_write y se debe adjuntar un token de OAuth válido al encabezado Authorization.

Configurar variables de entorno

Puedes definir variables de entorno en la instancia de Cloud Run para personalizar los ajustes avanzados. En la siguiente tabla se enumeran las variables disponibles:

Variable Descripción
DEBUG_CONSOLE Valor booleano (0 o 1) que indica si se deben registrar todos los errores y detalles de las solicitudes de red. No se registrarán datos sensibles. Inhabilitado (0) de forma predeterminada.
UI_CONFIG Cadena que contiene la configuración JSON de la página de inicio de sesión. Si usas esta variable en lugar del panel /admin, se evita leer y escribir en Cloud Storage al acceder a la configuración. Se ignoran las configuraciones no válidas. Si usas el panel /admin para validar tu JSON antes de definir esta variable, puedes minimizar los errores de sintaxis.
GCS_BUCKET_NAME Cadena que anula el segmento de Cloud Storage predeterminado que se usa para almacenar la configuración JSON. El archivo se llama config.json y la ubicación predeterminada es gcip-iap-bucket-[CLOUD-RUN-SERVICE-NAME]-[PROJECT-NUMBER].
ALLOW_ADMIN Valor booleano (0 o 1) que indica si se debe permitir el acceso al panel de configuración /admin. Habilitada (1) de forma predeterminada.

Tendrás que implementar una nueva revisión de la instancia de Cloud Run después de actualizar las variables para que los cambios se apliquen. Para obtener más información sobre las variables de entorno, consulta la documentación de Cloud Run.

Personalizar el dominio

De forma predeterminada, los usuarios verán la URL de la instancia de Cloud Run al iniciar sesión. Para especificar un dominio personalizado, sigue estos pasos:

  1. Sigue los pasos que se indican en el artículo Asignar dominios personalizados para definir un dominio personalizado en la instancia de Cloud Run.

  2. Configura IAP para que use la nueva URL de autenticación:

    1. Ve a la página IAP de la consola de Google Cloud .

      Ir a la página de IAP

    2. Selecciona el recurso protegido por IAP.

    3. En el panel lateral, selecciona el icono Editar situado junto al campo URL de inicio de sesión.

    4. Selecciona Usar una página de inicio de sesión alojada disponible y elige tu dominio en el menú desplegable.

    5. Haz clic en Guardar.

Usar una página de inicio de sesión para varios recursos de IAP

Puedes proteger varios recursos de IAP con la misma página de inicio de sesión. De esta forma, se reduce el trabajo asociado a la gestión de varias configuraciones.

Para volver a usar una página de inicio de sesión, sigue estos pasos:

  1. Sigue los pasos que se indican en este artículo para implementar la página de autenticación del primer recurso protegido por IAP.

  2. Habilita IAP para el segundo recurso. Cuando se te pida que especifiques una página de inicio de sesión, selecciona Proporcionaré la mía e introduce la URL del servicio de Cloud Run como URL.

  3. Vuelve a desplegar el servicio de Cloud Run.

Solución de problemas

Cookies de terceros y partición del almacenamiento en navegadores

En los navegadores que inhabilitan las cookies de terceros o implementan la partición de almacenamiento, es posible que la página de inicio de sesión o la página de administrador no funcionen correctamente. Para solucionar este problema, sigue estos pasos:

  1. Vuelve a implementar la página de inicio de sesión para usar la versión 1.0.1 más reciente.

  2. Si usas la función Personalizar la página de inicio de sesión, asegúrate de que authDomain se haya definido como el LOGIN_URL que ha creado IAP. También puedes definir authDomain como PROJECT_ID.firebaseapp.com si signInFlow se ha definido como popup.

    {
  "AIzaSyC5DtmRUR...": {
    "authDomain": "LOGIN_URL",
    ...
  }
}

    o

    {
  "AIzaSyC5DtmRUR...": {
    "authDomain": "PROJECT_ID.firebaseapp.com",
    "tenants": {
      "tenant-a-id": {
        ...
        "signInFlow": "popup"
        ...
      }
    }
    ...
  }
}

Siguientes pasos