Configurazione

Per autorizzare l'accesso alle API di Google nella tua app web utilizzando la libreria JavaScript dei Servizi di identità Google (google.accounts.oauth2), devi prima:

  1. Ottieni un ID client OAuth 2.0.
  2. Configura la schermata per il consenso OAuth e gli ambiti.
  3. Carica la libreria client.
  4. Facoltativamente, configura una Content Security Policy (CSP) e una Cross-Origin Opener Policy (COOP).

Ottieni il tuo ID client API di Google

Per attivare l'autorizzazione dell'Account Google sul tuo sito web, devi prima configurare un ID client API di Google. Completa i seguenti passaggi:

  1. Apri la pagina Client della console Google Cloud.
  2. Crea o seleziona un progetto della console Cloud. 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, 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. Se utilizzi il modello del codice di autorizzazione con ux_mode: 'redirect' (o scambi i codici di autorizzazione in un endpoint di backend), 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/oauth2callback.

Al termine della configurazione, prendi nota dell'ID client creato. Passerai questo valore nella proprietà client_id durante l'inizializzazione di initCodeClient() o initTokenClient(). (Viene creato anche un client secret, che devi mantenere riservato e utilizzare solo per le operazioni di scambio di token lato server.)

Quando la tua app web richiede l'accesso ai dati utente utilizzando gli ambiti OAuth 2.0, Google mostra una schermata per il consenso che indica agli utenti quale applicazione richiede l'accesso, quali ambiti di dati sono richiesti e i termini applicabili.

  1. Apri la pagina Branding della sezione Google Auth Platform della console Cloud.
  2. Se richiesto, seleziona il progetto che hai configurato.
  3. Compila il modulo di branding (Nome applicazione, Logo applicazione, Email di assistenza, Domini autorizzati, Link alla home page dell'applicazione e Link alle norme sulla privacy) e fai clic su Salva.
  4. Vai alla pagina Accesso ai dati per configurare gli ambiti dell'API di Google richiesti dalla tua applicazione. È buona norma 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 ambiti sensibili o con restrizioni, inviala per la verifica. Per maggiori dettagli, consulta i requisiti per la verifica OAuth.

Content Security Policy e COOP

Se la tua applicazione web applica una Content Security Policy (CSP), consenti le seguenti origini di Servizi di identità Google:

  • script-src: https://accounts.google.com/gsi/client
  • frame-src: https://accounts.google.com/gsi/
  • connect-src: https://accounts.google.com/gsi/

Per i flussi di autorizzazione popup (initTokenClient o initCodeClient con ux_mode: 'popup'), configura l'intestazione della risposta HTTP Cross-Origin-Opener-Policy (COOP) su same-origin-allow-popups in modo che la finestra di dialogo possa comunicare la risposta di autorizzazione alla tua pagina.

Passaggi successivi

Successivamente, carica la libreria client nella tua pagina web per iniziare a inizializzare il client di autorizzazione.