Utilizza modello di codice

La libreria dei Servizi di identità Google consente agli utenti di richiedere un codice di autorizzazione a Google utilizzando un flusso UX di reindirizzamento o popup basato sul browser. Inizia un flusso OAuth 2.0 sicuro e genera 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 un 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 richiama direttamente l'endpoint del codice di autorizzazione utilizzando un reindirizzamento del browser.
• La piattaforma di backend ospita un endpoint del codice di autorizzazione e riceve il codice. Dopo la convalida, la piattaforma scambia questo codice per utente con token di accesso e di aggiornamento utilizzando una richiesta all'endpoint del token di Google.
• Google convalida il codice di autorizzazione, conferma che la richiesta proviene dalla tua piattaforma sicura, emette token di accesso e di aggiornamento e li restituisce chiamando l'endpoint di accesso ospitato dalla tua piattaforma.
• L'endpoint di accesso riceve i token di accesso e di aggiornamento, memorizzando in modo sicuro il token di aggiornamento per un utilizzo successivo.

Prerequisiti

Segui i passaggi descritti nella sezione Configurazione per configurare la schermata di consenso OAuth , ottenere un ID client e caricare la libreria client.

Inizializzare un client di codice

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

Modalità popup o reindirizzamento

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

Per inizializzare un client per:

• Il flusso UX di reindirizzamento, 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 Google Cloud. Deve inoltre essere conforme alle regole di convalida dell'URI di reindirizzamento.

• Il flusso UX di 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. Il valore di redirect_uri è impostato per impostazione predefinita sull'origine della pagina che chiama initCodeClient. Il flusso utilizza questo valore in un secondo momento quando scambi il codice di autorizzazione con un token di accesso o un token di aggiornamento. Ad esempio, https://www.example.com/index.html chiama initCodeClient e l'origine https://www.example.com è il valore di redirect_url.

Proteggersi dagli attacchi CSRF

I flussi UX in modalità Reindirizzamento e Popup utilizzano tecniche leggermente diverse per impedire gli attacchi Cross-Site-Request-Forgery (CSRF). Per la modalità Reindirizzamento, utilizza il parametro state OAuth 2.0. Per saperne di più sulla generazione e la convalida del parametro state, consulta la sezione RFC6749 section 10.12 Cross-Site Request Forgery. Con la modalità Popup, aggiungi un'intestazione HTTP personalizzata alle richieste e poi sul server verifica che corrisponda al valore e all'origine previsti.

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

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'redirect',
  redirect_uri: 'https://oauth2.example.com/code',
  state: 'YOUR_BINDING_VALUE'
});

const client = google.accounts.oauth2.initCodeClient({
  client_id: 'YOUR_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/calendar.readonly',
  ux_mode: 'popup',
  callback: (response) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', "https://oauth2.example.com/code", 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);
  },
});

Attivare il flusso del codice OAuth 2.0

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

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

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

Gestione del codice di autorizzazione

Google genera un codice di autorizzazione univoco per utente che ricevi e verifichi 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à Reindirizzamento, Google invia una richiesta GET all'endpoint specificato da redirect_uri, 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 l'endpoint esistente per accettare le richieste GET e i parametri URL. In precedenza, Google inviava 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 questi parametri della stringa di query URL:

Ai sensi della RFC 6749, i client DEVONO ignorare i parametri di risposta non riconosciuti, indipendentemente dal fatto che siano elencati nella tabella precedente.

Esempio di richiesta GET con parametri URL a un endpoint denominato auth-code e ospitato 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 avvii il flusso del codice di autorizzazione utilizzando le librerie JavaScript precedenti o effettuando chiamate dirette agli endpoint OAuth 2.0 di Google, Google invia 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, segui questi passaggi per evitare attacchi CSRF.

Controlla il valore del parametro state per la modalità Reindirizzamento.

Verifica che l'intestazione X-Requested-With: XmlHttpRequest sia presente per la modalità Popup.

Dopodiché, procedi con l'ottenimento dei token di aggiornamento e di accesso da Google solo se hai verificato correttamente la richiesta del codice di autorizzazione.

Ottenere token di accesso e di aggiornamento

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

Segui le istruzioni a partire dal passaggio 5: Scambiare il codice di autorizzazione con token di aggiornamento e di accesso della guida Utilizzo di OAuth 2.0 per applicazioni server web.

Gestire i token

La tua piattaforma archivia i token di aggiornamento in modo sicuro. Elimina i token di aggiornamento memorizzati quando rimuovi gli account utente o quando un utente revoca il consenso tramite google.accounts.oauth2.revoke o direttamente da https://myaccount.google.com/permissions.

Facoltativamente, puoi prendere in considerazione RISC per proteggere gli account utente con la protezione tra account Protection.

In genere, la piattaforma di backend chiama le API di Google utilizzando un token di accesso. Se la tua applicazione web chiama direttamente le API di Google dal browser dell'utente, devi implementare un modo per condividere il token di accesso con l'applicazione web. Questa operazione non rientra nell'ambito di questa guida. Quando segui questo approccio e utilizzi la libreria client delle API di Google per JavaScript utilizza gapi.client.SetToken() per archiviare temporaneamente il token di accesso nella memoria del browser e consentire alla libreria di chiamare le API di Google.