Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.

Hosting di una pagina di accesso con Cloud Run

Per utilizzare le identità esterne con Identity-Aware Proxy (IAP), la tua app ha bisogno di una pagina di accesso. IAP reindirizzerà gli utenti a questa pagina per l'autenticazione prima che possano accedere alle risorse protette.

Questo documento mostra come eseguire il deployment e personalizzare una pagina di accesso predefinita utilizzando Cloud Run. Questo è il modo più rapido per iniziare a utilizzare le identità esterne e non richiede la scrittura di codice.

Puoi anche creare una pagina di accesso autonomamente. La creazione di una pagina personalizzata è più difficile, ma aumenta il controllo sul flusso di autenticazione e sull'esperienza utente. Per saperne di più, consulta Creazione di una pagina di accesso con FirebaseUI e Creazione di una pagina di accesso personalizzata.

Limitazioni della pagina di accesso

Non puoi utilizzare la pagina di accesso predefinita se nel tuo progetto è abilitata la protezione dall'enumerazione delle email.

Se nel tuo progetto è abilitata la protezione dall'enumerazione delle email, disattiva email-enumeration-protection prima di continuare con le procedure descritte in questo documento.

Prima di iniziare

Abilita l'API Compute Engine

Abilita l'API Compute Engine
Abilita le identità esterne e seleziona l'opzione Crea una pagina di accesso per me durante la configurazione. In questo modo, Cloud Run e FirebaseUI possono creare una pagina di accesso per te.
Assicurati che il account di servizio utilizzato da Cloud Run, PROJECT_NUMBER-compute@developer.gserviceaccount.com, disponga dei seguenti ruoli predefiniti:
- roles/identitytoolkit.viewer
- roles/iap.settingsAdmin
- roles/compute.networkViewer

Impostazione dell'URI di reindirizzamento autorizzato per i provider di Identity Platform

Se utilizzi i provider di Identity Platform che richiedono il reindirizzamento dell'accesso (reindirizzamento alla pagina di accesso dell'IdP esterno). Devi aggiungere l'URL della pagina di accesso ospitata come URL di reindirizzamento autorizzato nella configurazione del provider.

Ad esempio, per un provider Google, devi procedere nel seguente modo:

Copia l'URL di accesso dopo aver selezionato l'applicazione protetta da IAP.
Nella Google Cloud console, vai alla pagina Credenziali.

Vai a Credenziali
Aggiungi LOGIN_URL/__/auth/handler come uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0 della tua app. Seleziona lo stesso ID client OAuth che hai utilizzato durante la configurazione del provider Google.

Per gli altri provider SAML e OIDC, esegui la stessa operazione aggiungendo LOGIN_URL/__/auth/handler come URI di reindirizzamento autorizzato o URL ACS.

Test della pagina di accesso

La pagina di accesso iniziale creata da IAP è completamente funzionale. Per testarla:

Vai a una risorsa protetta da IAP. Dovresti essere reindirizzato automaticamente alla pagina di accesso.
Seleziona un tenant e un provider con cui accedere. Se non vedi tenant o provider elencati, assicurati di averne configurato uno utilizzando Identity Platform.
Accedi con le tue credenziali.

Dovresti essere reindirizzato alla risorsa protetta.

Personalizzazione della pagina di accesso

Puoi personalizzare la pagina di accesso utilizzando un file di configurazione JSON. Alcune opzioni includono:

Aggiunta di un'intestazione e di un logo alla pagina di accesso.
Specifica dei tenant e dei provider disponibili.
Personalizzazione delle icone e dello stile di ogni pulsante tenant e provider.
Aggiunta di link alle norme sulla privacy e ai Termini di servizio dell'app.

Le sezioni seguenti spiegano come accedere e aggiornare il file di configurazione JSON.

Ottenere un token di accesso

Per amministrare la pagina di accesso, devi disporre di un token di accesso Google. Il modo più semplice per ottenerne uno è abilitare Google come provider per Identity Platform. Se la tua app utilizza già Google come provider di identità, puoi saltare questa sezione.

Vai alla pagina Provider di Identity Platform nella Google Cloud console.

Vai alla pagina Provider di Identity Platform
Fai clic su Aggiungi un provider.
Seleziona Google dall'elenco dei provider.
Configura l'ID client web e il client secret web:
1. Nella Google Cloud console, vai alla pagina Credenziali.
  
  Vai a Credenziali
2. Utilizza un client OAuth 2.0 esistente o creane uno nuovo. Configura Client ID e Client secret come ID client web e client secret web. Aggiungi LOGIN_URL/__/auth/handler come uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0. LOGIN_URL è l'URL di accesso creato da IAP dopo aver selezionato l'opzione Crea una pagina di accesso per me. Puoi trovarlo nella pagina IAP della Google Cloud console, selezionando la risorsa protetta da IAP.
Fai clic su Salva in entrambe le pagine.

Accedere al pannello di amministrazione

La configurazione JSON per la pagina di accesso ospitata da Cloud Run è disponibile nel pannello LOGIN_URL/admin. I passaggi seguenti mostrano come accedere al pannello. Tieni presente che avrai bisogno del ruolo Amministratore archiviazione (roles/storage.admin).

Vai alla pagina IAP nella Google Cloud console.

Vai alla pagina IAP
Seleziona la risorsa dall'elenco.
Avvia l'URL elencato in Personalizza pagina nel riquadro delle informazioni. Dovrebbe essere simile a https://servicename-xyz-uc.a.run.app/admin.

Nota: se visualizzi un avviso che indica che l'app non è ancora verificata, puoi ignorarlo in sicurezza per scopi di sviluppo. Per saperne di più, consulta Eccezioni ai requisiti di verifica.
Accedi con lo stesso Account Google che hai utilizzato per configurare IAP. Viene visualizzato un editor di testo contenente il file di configurazione JSON.

Modificare la configurazione

Lo schema di configurazione per la pagina di accesso si basa su FirebaseUI, ed eredita molte delle sue proprietà. Anziché utilizzare LOGIN_URL creato da IAP come authDomain predefinito, puoi utilizzare PROJECT_ID.firebaseapp.com.

Se vuoi utilizzare PROJECT_ID.firebaseapp.com come authDomain, modifica signInFlow come popup per evitare problemi di accesso allo spazio di archiviazione di terze parti sui browser principali(consulta Best practice per l'utilizzo di signInWithRedirect sui browser che bloccano l'accesso allo spazio di archiviazione di terze parti). Inoltre, segui le istruzioni riportate in Impostazione dell'URI di reindirizzamento autorizzato per i provider di Identity Platform per aggiungere PROJECT_ID.firebaseapp.com/__/auth/handler come uno degli URI di reindirizzamento autorizzati o URL ACS per il provider di Identity Platform con cui gli utenti accederanno.

Il seguente codice mostra un esempio di configurazione con tre tenant:

{
  "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"
        }
      },
    }
  }
}

Per un elenco completo delle proprietà disponibili, consulta la documentazione di riferimento.

Eseguire l'override del CSS

Puoi utilizzare la proprietà styleUrl per specificare un file CSS personalizzato. Gli stili in questo file sostituiranno il CSS predefinito. Il file deve essere accessibile pubblicamente tramite HTTPS (ad esempio, ospitato in un bucket Cloud Storage).

L'esempio seguente mostra come eseguire l'override del CSS predefinito:

/** 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;
}

Eseguire di nuovo il deployment dell'istanza Cloud Run

In alcuni casi, potresti voler rieseguire il deployment dell'istanza Cloud Run che ospita la pagina di accesso. Ecco alcuni scenari di esempio:

Aggiunta, modifica o rimozione di provider di identità
Modifica delle configurazioni dei tenant
Impostazione delle variabili di ambiente
Aggiornamento dell'immagine container all'ultima versione

L'aggiornamento e il nuovo deployment regolari dell'immagine container garantiscono di avere le correzioni di bug e le patch di sicurezza più recenti. Puoi visualizzare l'elenco delle modifiche tra le versioni su GitHub.

Puoi ottenere la versione corrente del container di cui è stato eseguito il deployment utilizzando l'endpoint /versionz. Ad esempio:

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

Per eseguire di nuovo il deployment dell'istanza Cloud Run:

Vai alla pagina Cloud Run nella Google Cloud console.

Vai alla pagina Cloud Run