Configurazione

Prima di aggiungere Accedi con Google, One Tap o Accesso automatico al tuo sito web, configura la configurazione OAuth e, facoltativamente, le norme sulla sicurezza dei contenuti del tuo sito.

Ottenere l'ID client API di Google

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

  1. Apri del .
  2. Crea o seleziona un progetto. Se hai già un progetto per il pulsante Accedi con Google o 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 client e per Tipo di applicazione seleziona Applicazione web per creare un nuovo ID client. Per utilizzare un ID cliente esistente, selezionane 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 ospitato da te anziché tramite un callback JavaScript. In questo caso, aggiungi gli URI di reindirizzamento a URI di reindirizzamento autorizzati. Gli URI di reindirizzamento includono lo schema, il nome host completo e il percorso e devono essere conformi alle regole di convalida degli URI di reindirizzamento. Ad esempio, https://www.example.com/auth-receiver.

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

  1. Apri della sezione della piattaforma di autenticazione Google di.
  2. Se richiesto, seleziona il progetto appena creato.

  3. In , compila il modulo e fai clic sul pulsante "Salva".

    1. Nome dell'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 visualizzato dagli utenti altrove.

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

    3. Indirizzo email dell'assistenza:visualizzato nella schermata del consenso per l'assistenza agli utenti e agli amministratori di G Suite che valutano l'accesso alla tua applicazione per i propri utenti. Questo indirizzo email viene mostrato agli utenti nella schermata del consenso per Accedi con Google quando l'utente fa clic sul nome dell'applicazione.

    4. Domini autorizzati:per proteggere te e i tuoi utenti, Google consente l'utilizzo dei domini autorizzati solo alle applicazioni che si autenticano tramite OAuth. I link delle tue applicazioni devono essere ospitati su domini autorizzati. Scopri di più.

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

    6. Link alle norme sulla privacy dell'applicazione: visualizzato nella schermata di consenso di Accedi con Google e nelle informazioni del disclaimer conforme al GDPR con un solo tocco sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

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

  4. Vai a per configurare gli ambiti per la tua app.

    1. Ambiti per le API di Google: gli ambiti consentono alla tua applicazione di accedere ai dati privati dell'utente. Per l'autenticazione, l'ambito predefinito (email, profilo, openid) è sufficiente, non è necessario aggiungere ambiti sensibili. In genere, è buona prassi richiedere gli ambiti in modo incrementale, al momento in cui è richiesto l'accesso, anziché in anticipo.

  5. Controlla "Stato verifica". Se la tua richiesta deve essere verificata, 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

Un tocco utilizzando FedCM

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

Il dominio autorizzato di primo livello viene visualizzato durante il consenso dell'utente in Chrome. L'utilizzo di One Tap solo in iframe cross-origin, ma nello stesso sito, è un metodo supportato.

One Tap senza FedCM

Impostazioni per il consenso OAuth visualizzate da One Tap

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

Figura 1. Impostazioni per il consenso OAuth visualizzate da One Tap in Chrome.

Criteri di sicurezza del contenuto

Sebbene facoltativo, è consigliabile utilizzare un Criterio di sicurezza del contenuto per proteggere l'app e prevenire gli attacchi di tipo cross-site scripting (XSS). Per scoprire di più, consulta Introduzione ai CSP e CSP e XSS.

I tuoi criteri di sicurezza dei contenuti potrebbero includere una o più direttive, ad esempio connect-src, frame-src, script-src, style-src o default-src.

Se il tuo fornitore di servizi cloud 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 foglio di stile di Google Identity Services.
  • L'istruzione default-src, se utilizzata, è un valore alternativo se una delle direttive 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 di Google Identity Services.

Evita di elencare singoli URL GIS quando utilizzi connect-src. In questo modo, si riducono al minimo i fallimenti durante l'aggiornamento del GIS. Ad esempio, anziché aggiungere https://accounts.google.com/gsi/status utilizza l'URL principale del GIS https://accounts.google.com/gsi/.

Questo esempio di intestazione di risposta consente a Google Identity Services di caricarsi ed eseguire correttamente:

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

Norme relative all'apertura multiorigine

Il pulsante Accedi con Google e Google One Tap potrebbero richiedere modifiche al tuo Cross-Origin-Opener-Policy (COOP) per poter creare popup.

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

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

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

La mancata impostazione dell'intestazione corretta interrompe la comunicazione tra le finestre, provocando una finestra popup vuota o bug simili.