Configurazione

Prima di aggiungere la funzionalità Accedi con Google, One Tap o Accesso automatico al tuo sito web, configura la configurazione OAuth e, facoltativamente, configura i criteri di sicurezza del contenuto del tuo sito.

Ottenere il tuo ID client API di Google

Per attivare la funzionalità Accedi con Google sul tuo sito web, devi prima configurare il tuo ID client API di Google. Per farlo, segui questa procedura.

  1. Apri la pagina Credenziali della console API di Google.
  2. Crea o seleziona un progetto delle API di Google. Se hai già un progetto per il pulsante Accedi con Google o per Google One Tap, utilizza il progetto esistente e l'ID client web. Quando crei applicazioni di produzione, potrebbero essere necessari più progetti. Ripeti i passaggi rimanenti di questa sezione per ogni progetto che gestisci.
  3. Fai clic su Crea credenziali > ID client OAuth e, per Tipo di applicazione, seleziona Applicazione web per creare un nuovo ID client. Per utilizzare un ID client esistente, seleziona uno di tipo Applicazione web.
  4. Aggiungi l'URI del tuo sito web a Origini JavaScript autorizzate. L'URI include solo lo schema e il nome host completo. Ad esempio, https://www.example.com.

  5. Facoltativamente, le credenziali possono essere restituite utilizzando un reindirizzamento a un endpoint che ospiti anziché tramite un callback JavaScript. In questo caso, aggiungi gli URI di reindirizzamento agli URI di reindirizzamento autorizzati. Gli URI di reindirizzamento includono lo schema, il nome host completo e il percorso e devono rispettare le regole di convalida dell'URI di reindirizzamento. Ad esempio, https://www.example.com/auth-receiver.

Sia l'autenticazione Accedi con Google sia quella One Tap includono una schermata di consenso che indica agli utenti l'applicazione che richiede l'accesso ai loro dati, il tipo di dati richiesti e i termini applicabili.

  1. Apri la pagina Schermata consenso OAuth della sezione API e servizi di Google Developer Console.
  2. Se richiesto, seleziona il progetto appena creato.
  3. Nella pagina "Schermata consenso OAuth", compila il modulo e fai clic sul pulsante "Salva".

    1. Nome applicazione. Il nome dell'applicazione che richiede il consenso. Il nome deve riflettere con precisione la tua applicazione ed essere coerente con il nome dell'applicazione che gli utenti vedono altrove.

    2. Logo dell'applicazione: questa immagine viene mostrata nella schermata per il consenso per aiutare gli utenti a riconoscere la tua app. Il logo viene mostrato nella schermata per il consenso di Accedi con Google e nelle Impostazioni account, ma non nella finestra di dialogo One Tap.

    3. Email di assistenza: questa email viene visualizzata nella schermata per il consenso dedicata all'assistenza agli utenti e agli amministratori di G Suite che valutano l'accesso alla tua applicazione da parte degli utenti. Questo indirizzo email viene mostrato agli utenti nella schermata per il consenso di Accedi con Google quando fanno clic sul nome dell'applicazione.

    4. Ambiti per le API di Google:gli ambiti consentono all'applicazione di accedere ai dati privati dell'utente. Per l'autenticazione è sufficiente l'ambito predefinito (email, profilo, openid), non è necessario aggiungere ambiti sensibili. Come best practice, conviene richiedere gli ambiti in modo incrementale, nel momento in cui è richiesto l'accesso, anziché in anticipo. Scopri di più

    5. Domini autorizzati: per proteggere te e i tuoi utenti, Google consente solo alle applicazioni che eseguono l'autenticazione mediante OAuth di utilizzare i domini autorizzati. I link delle tue applicazioni devono essere ospitati su domini autorizzati. Scopri di più.

    6. Link alla home page dell'applicazione:mostrato nella schermata per il consenso di Accedi con Google e nelle informazioni sul disclaimer conforme al GDPR con un tocco sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

    7. Link alle Norme sulla privacy dell'applicazione:mostrato nella schermata per il consenso di Accedi con Google e nelle informazioni sul disclaimer conforme al GDPR con un tocco sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

    8. (Facoltativo) Link ai Termini di servizio dell'applicazione: mostrato nella schermata per il consenso di Accedi con Google e nelle informazioni sul disclaimer conforme al GDPR con un tocco sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

  4. Controlla lo "Stato di verifica" se la richiesta deve essere verificata, quindi fai clic sul pulsante "Invia per la verifica" per inviarla. Per maggiori dettagli, consulta i requisiti di verifica OAuth.

Visualizzazione delle impostazioni OAuth durante l'accesso

One Tap con FedCM

Impostazioni per il consenso OAuth visualizzate da Chrome One Tap tramite FedCM

Il Dominio autorizzato di primo livello viene visualizzato durante il consenso dell'utente in Chrome.

One Tap senza FedCM

Impostazioni per il consenso OAuth come visualizzate con One Tap

Il Nome dell'applicazione viene visualizzato durante il consenso dell'utente.

Figura 1. Impostazioni per il consenso OAuth mostrate tramite One Tap in Chrome.

Criteri di sicurezza del contenuto

Benché facoltativo, ti consigliamo di applicare un Criterio di sicurezza del contenuto per proteggere la tua app ed evitare attacchi cross-site scripting (XSS). Per scoprire di più, consulta Introduzione a CSP e CSP e XSS.

Il criterio di sicurezza del contenuto potrebbe includere una o più istruzioni, come connect-src, frame-src, script-src, style-src o default-src.

Se il CSP include:

  • connect-src, aggiungi https://accounts.google.com/gsi/ per consentire a una pagina di caricare l'URL principale per gli endpoint lato server di Google Identity Services.
  • frame-src, aggiungi https://accounts.google.com/gsi/ per consentire l'URL principale degli iframe dei pulsanti One Tap e Accedi con Google.
  • script-src, aggiungi https://accounts.google.com/gsi/client per consentire l'URL della libreria JavaScript dei Servizi di identità Google.
  • style-src, aggiungi https://accounts.google.com/gsi/style per consentire l'URL dei fogli di stile dei Servizi di identità Google.
  • L'istruzione default-src, se utilizzata, non è di riserva se una delle istruzioni precedenti (connect-src, frame-src, script-src o style-src) non è specificata, aggiungi https://accounts.google.com/gsi/ per consentire a una pagina di caricare l'URL principale per gli endpoint lato server dei servizi di identità Google.

Evita di elencare singoli URL GIS quando utilizzi connect-src. Questo consente di ridurre al minimo gli errori quando viene aggiornato il GIS. Ad esempio, invece di aggiungere https://accounts.google.com/gsi/status, utilizza l'URL GIS principale https://accounts.google.com/gsi/.

Questa intestazione di risposta di esempio consente di caricare ed eseguire correttamente i Servizi di identità Google:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Criterio di apertura multiorigine

Per poter creare popup, i pulsanti Accedi con Google e Google One Tap potrebbero richiedere modifiche al tuo Cross-Origin-Opener-Policy (COOP).

Quando FedCM è abilitato, il browser esegue direttamente il rendering dei popup e non sono necessarie modifiche.

Tuttavia, quando FedCM è disattivato, imposta l'intestazione COOP:

  • a same-origin e
  • includi same-origin-allow-popups.

Se non viene impostata l'intestazione corretta, la comunicazione tra le finestre si interrompe, il che genera una finestra popup vuota o bug simili.