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 la funzionalità Accedi con Google sul tuo sito web, devi prima configurare la ID client API di Google. Per farlo, segui questa procedura.

  1. Apri la pagina Credentials (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 Google One Tap, usa il progetto esistente e l'ID client web. Quando crei applicazioni di produzione, possono 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 selezionate Applicazione web per creare un nuovo ID client. Per utilizzare un modello esistente Seleziona un ID client 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 agli 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 dati, il tipo i dati richiesti e i termini applicabili.

  1. Apri la pagina Schermata consenso OAuth dell' API e Servizi di Google Developers Console.
  2. Se richiesto, seleziona il progetto appena creato.

  3. Nella "schermata per il consenso OAuth" compila il modulo, quindi fai clic sul pulsante "Salva" .

    1. Nome applicazione:il nome dell'applicazione che richiede il consenso. Il nome deve rispecchiare 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 di consenso per aiutarti. affinché riconoscano la tua app. Il logo viene mostrato su Accedi con Google schermata per il consenso e nelle impostazioni dell'account, ma non viene mostrata nella finestra di dialogo One Tap.

    3. Indirizzo email dell'assistenza: visualizzato nella schermata di consenso per l'assistenza utente 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 di Accedi con Google quando l'utente fa clic sul nome dell'applicazione.

    4. 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 del bisogno, anziché in anticipo. Scopri di più

    5. 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ù.

    6. Link alla home page dell'applicazione:viene visualizzato al consenso di Accedi con Google schermata e informazioni sul disclaimer conforme al GDPR con un tocco sotto le "Continua come" . Deve essere ospitato su un dominio autorizzato.

    7. Link alle norme sulla privacy dell'applicazione:mostrato in Accedi con Google schermata per il consenso e informazioni sul disclaimer conformi al GDPR con un tocco in quindi su "Continua come" . Deve essere ospitata su un dominio autorizzato.

    8. (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 ospitata su un dominio autorizzato.

  4. Controlla lo "stato di verifica", se la tua richiesta richiede una verifica, allora fai clic sul pulsante "Invia per la verifica", pulsante per inviare la tua richiesta verifica. 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 tramite FedCM

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

One Tap senza FedCM

Impostazioni 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

Anche se facoltativo, un Criterio di sicurezza del contenuto è consigliato per proteggere la tua app e prevenire il cross-site scripting (XSS) attacchi informatici. 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 CSP include:

  • connect-src, aggiungi https://accounts.google.com/gsi/ per consentire un'istruzione pagina per caricare l'URL principale per i Servizi di identità Google lato server endpoint.
  • 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 a consenti 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.
  • default-src, se utilizzata, è un'istruzione di riserva se uno dei istruzioni precedenti (connect-src, frame-src, script-src o style-src) non è specificato, aggiungi https://accounts.google.com/gsi/ a Consenti a una pagina di caricare l'URL principale per i Servizi di identità Google lato server endpoint.

Quando utilizzi connect-src, evita di elencare i singoli URL GIS. 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/;

Criterio di 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.

Se è attivato FedCM, il browser mostra direttamente i popup e non viene modificata sono necessarie.

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

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

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