Utilizza modello di codice

La libreria dei servizi di identità Google consente agli utenti di richiedere a Google un codice di autorizzazione tramite un flusso popup UX o di reindirizzamento basato su browser. Questo avvia un flusso OAuth 2.0 sicuro e restituisce un token di accesso utilizzato per chiamare le API di Google per conto di un utente.

Riepilogo del flusso del codice di autorizzazione OAuth 2.0:

• Da un browser, con un gesto come il clic su un pulsante, il proprietario dell'Account Google richiede un codice di autorizzazione a Google.
• Google risponde, inviando un codice di autorizzazione univoco a un callback nella tua app web JavaScript in esecuzione nel browser dell'utente o richiamando direttamente l'endpoint del codice di autorizzazione utilizzando un reindirizzamento del browser.
• La tua piattaforma di backend ospita un endpoint del codice di autorizzazione e riceve il codice. Dopo la convalida, questo codice viene scambiato per ogni accesso utente e i token di aggiornamento utilizzando una richiesta all'endpoint del token di Google.
• Google convalida il codice di autorizzazione, conferma la richiesta che ha avuto origine dalla piattaforma sicura, emette i token di accesso e di aggiornamento e restituisce i token chiamando l'endpoint di accesso ospitato dalla tua piattaforma.
• L'endpoint di accesso riceve i token di accesso e di aggiornamento e memorizza il token di aggiornamento in modo sicuro per un uso successivo.

Inizializza un client di codice

Il metodo google.accounts.oauth2.initCodeClient() inizializza un client di codice.

Popup o modalità di reindirizzamento

Puoi scegliere di condividere un codice di autenticazione utilizzando il flusso utente Modalità di reindirizzamento o Popup. Con la modalità di reindirizzamento, ospiti un endpoint di autorizzazione OAuth2 sul tuo server e Google reindirizza lo user agent a questo endpoint, condividendo il codice di autenticazione come parametro URL. Per la modalità popup definisci un gestore di callback JavaScript che invia il codice di autorizzazione al tuo server. La modalità popup può essere utilizzata per fornire un'esperienza utente fluida senza che i visitatori debbano uscire dal sito.

Per inizializzare un client per:

• Reindirizza il flusso di esperienza utente, imposta ux_mode su redirect e il valore di redirect_uri sull'endpoint del codice di autorizzazione della tua piattaforma. Il valore deve corrispondere esattamente a uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0 configurato nella console API. Deve inoltre essere conforme alle nostre regole di convalida dell'URI di reindirizzamento.

• Flusso dell'esperienza utente popup, imposta ux_mode su popup e il valore di callback sul nome della funzione che utilizzerai per inviare i codici di autorizzazione alla tua piattaforma.

Prevenzione degli attacchi CSRF

Per impedire attacchi di tipo Cross-Site-Request-Forgery (CSRF) vengono utilizzate tecniche leggermente diverse per i flussi UX della modalità di reindirizzamento e popup. Per la modalità di reindirizzamento, viene utilizzato il parametro state di OAuth 2.0. Per ulteriori informazioni sulla generazione e sulla convalida del parametro state, consulta la Sezione 60.12 della falsificazione richiesta tra siti. Con la modalità Popup, aggiungi un'intestazione HTTP personalizzata alle tue richieste, quindi sul tuo server verifica che corrisponda al valore e all'origine previsti.

Scegli una modalità UX per visualizzare uno snippet di codice che mostra il codice di autorizzazione e la gestione dei CSRF:

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: "https://your.domain/code_callback_endpoint",
  state: "YOUR_BINDING_VALUE"
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', code_receiver_uri, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // Set custom header for CRSF
    xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
    xhr.onload = function() {
      console.log('Auth code response: ' + xhr.responseText);
    };
    xhr.send('code=' + response.code);
  },
});

Attiva flusso di codice OAuth 2.0

Chiama il metodo requestCode() del client di codice per attivare il flusso dell'utente:

<button onclick="client.requestCode();">Authorize with Google</button>

In questo modo, l'utente dovrà accedere a un Account Google e acconsentire alla condivisione dei singoli ambiti prima di restituire un codice di autorizzazione all'endpoint di reindirizzamento o al gestore del callback.

Gestione del codice di autenticazione

Google genera un codice di autorizzazione univoco per utente che ricevi e verifica sul server di backend.

Per la modalità Popup, il gestore specificato da callback, in esecuzione nel browser dell'utente, inoltra il codice di autorizzazione a un endpoint ospitato dalla tua piattaforma.

Per la modalità di reindirizzamento, viene inviata una richiesta GET all'endpoint specificato da redirect_url, condividendo il codice di autorizzazione nel parametro code dell'URL. Per ricevere il codice di autorizzazione:

• Crea un nuovo endpoint di autorizzazione se non hai un'implementazione esistente oppure

• Aggiorna il tuo endpoint esistente per accettare GET richieste e parametri URL. In precedenza, veniva utilizzata una richiesta PUT con il valore del codice di autorizzazione nel payload.

Endpoint di autorizzazione

L'endpoint del codice di autorizzazione deve gestire le richieste GET con i seguenti parametri stringa di query URL:

Esempio di richiesta GET con parametri URL a un endpoint denominato auth-code e ospitata da example.com:

Request URL: https://www.example.com/auth-code?state=42a7bd822fe32cc56&code=4/0AX4XfWiAvnXLqxlckFUVao8j0zvZUJ06AMgr-n0vSPotHWcn9p-zHCjqwr47KHS_vDvu8w&scope=email%20profile%20https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/photoslibrary.readonly%20https://www.googleapis.com/auth/contacts.readonly%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&hd=example.com&prompt=consent

Quando il flusso del codice di autorizzazione viene avviato da librerie JavaScript precedenti o da chiamate dirette agli endpoint Google 2.0, viene utilizzata una richiesta POST.

Esempio di richiesta POST contenente il codice di autorizzazione come payload nel corpo della richiesta HTTP:

  Request URL: https://www.example.com/auth-code
  Request Payload:
  4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw

Convalidare la richiesta

Sul server procedi nel seguente modo per evitare gli attacchi CSRF.

Verifica il valore del parametro state, in modalità di reindirizzamento.

Conferma che l'intestazione X-Requested-With: XmlHttpRequest sia impostata per la modalità popup.

Dovresti quindi procedere per ottenere i token di aggiornamento e di accesso da Google solo se hai prima verificato la richiesta di codice di autenticazione.

Ottenere i token di accesso e di aggiornamento

Dopo che la tua piattaforma di backend riceve un codice di autorizzazione da Google e verifica la richiesta, usa il codice di autorizzazione per ottenere l'accesso e i token di aggiornamento da Google per effettuare chiamate API.

Segui le istruzioni a partire dal Passaggio 5: codice di autorizzazione di Exchange per i token di aggiornamento e di accesso della guida Utilizzo di OAuth 2.0 per applicazioni server web.

Gestione dei token

La tua piattaforma archivia in modo sicuro i token di aggiornamento. Elimina i token di aggiornamento memorizzati quando vengono rimossi gli account utente o revoca il consenso degli utenti google.accounts.oauth2.revoke o direttamente all'indirizzo https://myaccount.google.com/permissions.

Facoltativamente, puoi prendere in considerazione RISC per proteggere gli account utente con la protezione su più account.

In genere, la piattaforma di backend chiamerà le API di Google utilizzando un token di accesso. Se la tua app web chiamerà direttamente le API di Google dal browser dell'utente, devi implementare un modo per condividere il token di accesso con la tua applicazione web, farlo non rientra nell'ambito di questa guida. Seguendo questo approccio e utilizzando la libreria client dell'API di Google per JavaScript, viene utilizzato gapi.client.SetToken() per archiviare temporaneamente il token di accesso nella memoria del browser e attivare la libreria per le chiamate alle API di Google.