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 dei contenuti del tuo sito.

Ottieni 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 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, potrebbe essere necessario 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, selezionane uno di tipo Applicazione web.

  4. Aggiungi l'URI del tuo sito web alle 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 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 accuratamente 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 dell'account, ma non viene mostrata nella finestra di dialogo One Tap.

    3. Email di assistenza: viene visualizzata nella schermata di consenso per l'assistenza agli utenti e per gli amministratori di G Suite che valutano l'accesso alla tua applicazione da parte dei loro 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 devi 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 l'utilizzo dei domini autorizzati solo alle applicazioni che si autenticano mediante OAuth. 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 di One Tap sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

  4. Seleziona lo "Stato di verifica" e se la richiesta deve essere verificata, fai clic sul pulsante "Invia per la verifica" per inviarla per la verifica. Per maggiori dettagli, consulta Requisiti di verifica OAuth.

Visualizzazione delle impostazioni OAuth durante l'accesso

One Tap

Impostazioni per il consenso OAuth visualizzate da One Tap

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

One Tap tramite FedCM

Impostazioni relative al consenso OAuth come visualizzate da Chrome One Tap tramite FedCM

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

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

Criteri di sicurezza del contenuto

Anche se facoltativo, ti consigliamo di applicare un Criterio di sicurezza del contenuto per proteggere l'app ed evitare attacchi cross-site scripting (XSS). Per saperne di più, consulta gli articoli Introduzione a CSP e CSP e XSS.

I criteri di sicurezza del contenuto potrebbero includere una o più istruzioni, come connect-src, frame-src, script-src o style-src.

Se il tuo 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 dei Servizi di identità Google.
  • 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.

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

Questa intestazione di risposta di esempio consente ai Servizi di identità Google di essere caricati ed eseguiti 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/;

Criteri di apertura multiorigine

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

Quando è abilitato FedCM, 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 imposti l'intestazione corretta, la comunicazione tra le finestre viene interrotta e viene visualizzata una finestra popup vuota o bug simili.