La libreria Servizi di identità Google consente agli utenti di richiedere un'autorizzazione di Google utilizzando un flusso UX basato su browser o di reindirizzamento. Questo avvia 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 il clic su un pulsante, l'Account Google richiede un codice di autorizzazione a Google.
- Google risponde, inviando un codice di autorizzazione univoco a un callback in l'app web JavaScript in esecuzione nel browser dell'utente o richiama 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 le API nel tuo codice. Dopo la convalida, questo codice viene scambiato con l'accesso per utente e di aggiornamento utilizzando una richiesta all'endpoint del token di Google.
- Google convalida il codice di autorizzazione e conferma che la richiesta è stata originata dalla tua piattaforma sicura, emette token di accesso e di aggiornamento e restituisce richiamando 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 usarlo in un secondo momento.
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 pulsante Reindirizzamento Flusso utente in modalità Popup. Con la modalità di reindirizzamento ospiti un'autorizzazione OAuth2 sul tuo server e Google reindirizza lo user agent a questo endpoint condividere il codice di autorizzazione come parametro URL. Per la modalità popup definisci un oggetto JavaScript di callback, che invia il codice di autorizzazione al tuo server. Modalità popup possono essere utilizzati per offrire un'esperienza utente fluida senza che i visitatori debbano abbandona il sito.
Per inizializzare un client per:
Reindirizza il flusso UX, imposta
ux_mode
suredirect
e il valore diredirect_uri
all'endpoint del codice di autorizzazione della tua piattaforma. Il valore deve corrispondere esattamente a uno degli URI di reindirizzamento autorizzati per OAuth 2.0 configurato nella console API. Deve inoltre essere conforme alle nostre Regole di convalida dell'URI di reindirizzamento.Flusso UX popup, impostato
ux_mode
supopup
e il valorecallback
su della funzione che utilizzerai per inviare i codici di autorizzazione al tuo completamente gestita.
Prevenire gli attacchi CSRF
Per evitare attacchi Cross-Site-Request-Forgery (CSRF) leggermente diversi vengono impiegate tecniche per i flussi UX delle modalità di reindirizzamento e popup. Per reindirizzamento , viene utilizzato il parametro state OAuth 2.0. Fai riferimento alla sezione 10.12 di RFC6749 Falsificazione delle richieste tra siti per saperne di più sulla generazione e sulla convalida del parametro state. Con la modalità popup, aggiungi un'intestazione HTTP personalizzata alle tue richieste e poi sul tuo server confermi 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 CSRF:
Modalità di reindirizzamento
Inizializza un client in cui Google reindirizza il browser dell'utente al tuo dell'endpoint di autenticazione, condividendo il codice di autorizzazione come parametro URL.
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"
});
Modalità popup
Inizializza un client in cui il browser dell'utente riceve un codice di autorizzazione e la invia al tuo server.
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);
},
});
Attivazione flusso di 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 alla condivisione i singoli ambiti prima di restituire un codice di autorizzazione l'endpoint di reindirizzamento o il tuo gestore di callback.
Gestione del codice di autorizzazione
Google genera un codice di autorizzazione univoco per utente che ricevi e verifica sul tuo server di backend.
Per la modalità popup, il gestore specificato da callback
, in esecuzione nel
un browser, 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
redirect_url
, condividendo il codice di autorizzazione nel parametro code dell'URL. A
ricevi il codice di autorizzazione:
Crea un nuovo endpoint di autorizzazione se non ne hai già uno l'implementazione o
Aggiorna l'endpoint esistente affinché accetti
GET
richieste e URL parametri. In precedenza, una richiestaPUT
con il valore del codice di autorizzazione in è stato utilizzato il payload.
Endpoint di autorizzazione
L'endpoint del codice di autorizzazione deve gestire le richieste GET
con queste query URL
parametri stringa:
Nome | Valore |
---|---|
utente autenticato | Richiesta di autenticazione dell'accesso degli utenti |
codice | Un codice di autorizzazione OAuth2 generato da Google |
hd | Il dominio ospitato dell'account utente |
richiesta | Finestra di dialogo per il consenso degli utenti |
ambito | Elenco separato da spazi di uno o più ambiti OAuth2 da autorizzare |
stato | Variabile di stato CRSF |
Esempio di richiesta GET
con parametri URL per 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 il flusso del codice di autorizzazione viene avviato
da librerie JavaScript precedenti,
o tramite chiamate dirette agli endpoint Google OAuth 2.0, viene utilizzata una richiesta POST
.
Esempio di richiesta POST
contenente il codice di autorizzazione come payload in
Corpo della richiesta HTTP:
Request URL: https://www.example.com/auth-code
Request Payload: 4/0AX4XfWhll-BMV82wi4YwbrSaTPaRpUGpKqJ4zBxQldU\_70cnIdh-GJOBZlyHU3MNcz4qaw
Convalida la richiesta
Sul tuo server, procedi nel seguente modo per evitare gli attacchi CSRF.
Verifica il valore del parametro state per la modalità di reindirizzamento.
Conferma che l'intestazione X-Requested-With: XmlHttpRequest
sia impostata per la modalità popup.
Devi quindi procedere con il recupero dei token di aggiornamento e di accesso da Google solo se hai prima verificato correttamente la richiesta del codice di autorizzazione.
Recuperare i token di accesso e di aggiornamento
Dopo che la piattaforma di backend riceve un codice di autorizzazione da Google la richiesta, utilizzare il codice di autorizzazione per ottenere i token di accesso e di aggiornamento a Google di effettuare chiamate API.
Segui le istruzioni a partire dal Passaggio 5: sostituisci il codice di autorizzazione per di aggiornamento e di accesso della pagina Utilizzo di OAuth 2.0 per il server web Guida alle applicazioni.
Gestione dei token
La tua piattaforma archivia in modo sicuro i token di aggiornamento. Elimina i token di aggiornamento archiviati quando
gli account utente vengono rimossi o il consenso dell'utente viene revocato
google.accounts.oauth2.revoke
o direttamente da
https://myaccount.google.com/permissions.
Facoltativamente, puoi valutare RISC per proteggere gli account utente con più account Protezione.
In genere, la piattaforma di backend chiama le API di Google utilizzando un token di accesso. Se
la tua app web chiamerà inoltre le API di Google direttamente dal browser dell'utente.
devi implementare un modo per condividere il token di accesso con la tua applicazione web, facendo
quindi non rientrano nell'ambito di questa guida. Quando si segue questo approccio e si utilizza
Libreria client dell'API di Google per JavaScript
usa gapi.client.SetToken()
per memorizzare temporaneamente il token di accesso nel browser
memoria e abilitare la libreria per chiamare le API di Google.