Configurazione

Per aggiungere un pulsante Accedi con Google o i prompt di One Tap e di accesso automatico al tuo sito web, devi prima:

1. ottenere un ID client OAuth 2.0,
2. configurare il branding e le impostazioni OAuth,
3. caricare la libreria client dei Servizi di identità Google e
4. (facoltativo) configurare i Criteri di sicurezza del contenuto e
5. aggiornare i Criteri di apertura multiorigine.

Ottenere l'ID client API di Google

Per attivare i Servizi di identità Google sul tuo sito web, devi prima configurare un ID client API di Google. Per farlo, segui questa procedura.

1. Apri la pagina Client della console Google Cloud.
2. Crea o seleziona un progetto della console Cloud. 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 client esistente, seleziona un ID 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 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.

Includi l'ID client nella tua app web utilizzando i campi data-client_id o client_id.

Configurare la schermata per il consenso OAuth

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 richiesti e i termini applicabili.

1. Apri la pagina Branding della sezione Piattaforma di autenticazione Google di lla console Cloud.
2. Se ti viene richiesto, seleziona il progetto che hai appena creato.

3. Nella pagina Branding, 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 l'applicazione ed essere coerente con il nome dell'applicazione visualizzato dagli utenti 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 nella finestra di dialogo One Tap.

   3. Email di assistenza: viene mostrata nella schermata per il consenso per l'assistenza utente e agli amministratori di Google Workspace che valutano l'accesso alla tua applicazione per i loro utenti. Questo indirizzo email viene mostrato agli utenti nella schermata per il consenso di 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 alle sole applicazioni che eseguono l'autenticazione tramite OAuth. I link delle tue applicazioni devono essere ospitati su domini autorizzati. Scopri di più.

   5. Link alla home page dell'applicazione: viene mostrato nella schermata per il consenso di Accedi con Google e nelle informazioni di esclusione di responsabilità conformi al GDPR di One Tap sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

   6. Link alle Norme sulla privacy dell'applicazione: viene mostrato nella schermata per il consenso di Accedi con Google e nelle informazioni di esclusione di responsabilità conformi al GDPR di One Tap sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

   7. Link ai Termini di servizio dell'applicazione (facoltativo): viene mostrato nella schermata per il consenso di Accedi con Google e nelle informazioni di esclusione di responsabilità conformi al GDPR di One Tap sotto il pulsante "Continua come". Deve essere ospitato su un dominio autorizzato.

4. Vai alla pagina Accesso ai dati 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 del tuo utente. Per l'autenticazione, è sufficiente l'ambito predefinito (email, profilo, openid), non devi aggiungere ambiti sensibili In genere, è una best practice richiedere gli ambiti in modo incrementale, nel momento in cui è necessario l'accesso, anziché in anticipo.

5. Controlla lo "Stato della verifica". Se la tua applicazione richiede la verifica, 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

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

Caricare la libreria client

Assicurati di caricare la libreria client dei Servizi di identità Google su qualsiasi pagina in cui un utente potrebbe accedere. Utilizza il seguente snippet di codice:

<script src="https://accounts.google.com/gsi/client" async></script>

Puoi ottimizzare la velocità di caricamento delle pagine se carichi lo script con l'attributo async.

Per l'elenco dei metodi e delle proprietà supportati dalla libreria, consulta i riferimenti alle API HTML e JavaScript.

Content Security Policy

Sebbene sia facoltativo, è consigliabile utilizzare i Content Security Policy per proteggere l'app e prevenire attacchi cross-site scripting (XSS) . Per scoprire di più, consulta un' Introduzione a CSP e CSP e XSS.

I Criteri di sicurezza del contenuto possono includere una o più direttive, ad esempio connect-src, frame-src, script-src, style-src o default-src.

Se i Criteri di sicurezza del contenuto includono la direttiva:

• 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 del pulsante 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.
• default-src , se utilizzata, è un fallback se non viene specificata una delle direttive precedenti (connect-src, frame-src, script-src o style-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.

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

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

Il pulsante Accedi con Google e Google One Tap potrebbero richiedere modifiche a Cross-Origin-Opener-Policy (COOP) per creare correttamente i popup.

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

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

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

Se non imposti l'intestazione corretta, la comunicazione tra le finestre si interrompe, portando a una finestra popup vuota o bug simili.