Questo documento spiega come implementare l'autorizzazione OAuth 2.0 per accedere all'API di dati di YouTube da un'applicazione web JavaScript. OAuth 2.0 consente agli utenti di condividere dati specifici con un'applicazione, mantenendo privati nomi utente, password e altre informazioni. Ad esempio, un'applicazione può utilizzare OAuth 2.0 per ottenere l'autorizzazione al recupero dei dati di YouTube di un canale.
Questo flusso OAuth 2.0 è chiamato flusso di concessione implicita. È progettata per le applicazioni che accedono alle API solo mentre l'utente è presente nell'applicazione. Queste applicazioni non sono in grado di archiviare informazioni riservate.
In questo flusso, l'app apre un URL di Google che utilizza i parametri di query per identificare la tua app e il tipo di accesso all'API richiesto dall'app. Puoi aprire l'URL nella finestra corrente del browser o in un popup. L'utente può eseguire l'autenticazione con Google e concedere le autorizzazioni richieste. Google reindirizza quindi l'utente alla tua app. Il reindirizzamento include un token di accesso, che la tua app verifica e poi utilizza per effettuare richieste API.
Libreria client delle API di Google e servizi di identità Google
Se utilizzi la libreria client delle API di Google per JavaScript per effettuare chiamate autorizzate a Google, devi utilizzare la libreria JavaScript dei servizi di identità Google per gestire il flusso OAuth 2.0. Consulta il modello di token dei servizi di identità Google, che si basa sul flusso di concessione implicita di OAuth 2.0.
Prerequisiti
Abilita le API per il progetto
Qualsiasi applicazione che chiama le API di Google deve abilitare queste API in API Console.
Per abilitare un'API per il tuo progetto:
- Open the API Library in Google API Console.
- If prompted, select a project, or create a new one.
- Utilizza la pagina Raccolta per individuare e attivare l'API di dati di YouTube. Trova e abilita anche le altre API utilizzate dalla tua applicazione.
Crea credenziali di autorizzazione
Qualsiasi applicazione che utilizza OAuth 2.0 per accedere alle API di Google deve avere credenziali di autorizzazione che identificano l'applicazione sul server OAuth 2.0 di Google. I passaggi seguenti spiegano come creare le credenziali per il tuo progetto. Le applicazioni possono quindi utilizzare le credenziali per accedere alle API abilitate per il progetto.
- Go to the Credentials page.
- Fai clic su Crea credenziali > ID client OAuth.
- Seleziona il tipo di applicazione Web Application.
- Compila il modulo. Le applicazioni che utilizzano JavaScript per effettuare richieste API di Google autorizzate devono specificare le origini JavaScript autorizzate. Le origini identificano i domini da cui la tua applicazione può inviare richieste al server OAuth 2.0. Queste origini devono rispettare le regole di convalida di Google.
Identifica gli ambiti di accesso
Gli ambiti consentono all'applicazione di richiedere l'accesso solo alle risorse di cui ha bisogno, permettendo al contempo agli utenti di controllare il livello di accesso che concedono all'applicazione. Pertanto, potrebbe esistere una relazione inversa tra il numero di ambiti richiesti e la probabilità di ottenere il consenso degli utenti.
Prima di iniziare a implementare l'autorizzazione OAuth 2.0, ti consigliamo di identificare gli ambiti a cui la tua app dovrà disporre dell'autorizzazione per accedere.
La YouTube Data API v3 utilizza i seguenti ambiti:
Mirini con ingrandimento | |
---|---|
https://www.googleapis.com/auth/youtube | Gestisci il tuo account YouTube |
https://www.googleapis.com/auth/youtube.channel-memberships.creator | Visualizzare un elenco dei tuoi attuali membri attivi del canale, il loro livello corrente e quando sono diventati membri |
https://www.googleapis.com/auth/youtube.force-ssl | Visualizzare, modificare ed eliminare definitivamente video, valutazioni, commenti e sottotitoli di YouTube |
https://www.googleapis.com/auth/youtube.readonly | Visualizza il tuo account YouTube |
https://www.googleapis.com/auth/youtube.upload | Gestisci i tuoi video su YouTube |
https://www.googleapis.com/auth/youtubepartner | Visualizzare e gestire le risorse e i relativi contenuti su YouTube |
https://www.googleapis.com/auth/youtubepartner-channel-audit | Visualizzare le informazioni private del tuo canale YouTube pertinenti durante la procedura di revisione con un partner di YouTube |
Il documento Ambiti API OAuth 2.0 contiene un elenco completo degli ambiti che potresti utilizzare per accedere alle API di Google.
Ottenere i token di accesso OAuth 2.0
I passaggi seguenti mostrano in che modo la tua applicazione interagisce con il server OAuth 2.0 di Google per ottenere il consenso di un utente a eseguire una richiesta API per suo conto. La tua applicazione deve avere questo consenso prima di poter eseguire una richiesta API di Google che richiede l'autorizzazione dell'utente.
Passaggio 1: reindirizza al server OAuth 2.0 di Google
Per richiedere l'autorizzazione ad accedere ai dati di un utente, reindirizza l'utente al server OAuth 2.0 di Google.
Endpoint OAuth 2.0
Genera un URL per richiedere l'accesso dall'endpoint OAuth 2.0 di Google all'indirizzo
https://accounts.google.com/o/oauth2/v2/auth
. Questo endpoint è accessibile tramite HTTPS; le connessioni HTTP semplici vengono rifiutate.
Il server di autorizzazione di Google supporta i seguenti parametri di stringa di query per le applicazioni server web:
Parametri | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
client_id |
Obbligatorio
L'ID client dell'applicazione. Puoi trovare questo valore nella sezione API Console Credentials page. |
||||||||||||||||
redirect_uri |
Obbligatorio
Determina dove il server API reindirizza l'utente dopo che questo ha completato il flusso di autorizzazione. Il valore deve corrispondere esattamente a uno degli URI di reindirizzamento autorizzati per il client OAuth 2.0, che hai configurato in API Console
Credentials pagedel client. Se questo valore non corrisponde a un URI di reindirizzamento autorizzato per il Tieni presente che lo schema |
||||||||||||||||
response_type |
Obbligatorio
Le applicazioni JavaScript devono impostare il valore del parametro su |
||||||||||||||||
scope |
Obbligatorio
Un elenco di ambiti delimitato da spazi che identificano le risorse a cui l'applicazione potrebbe accedere per conto dell'utente. Questi valori determinano la schermata di consenso che Google mostra all'utente. Gli ambiti consentono all'applicazione di richiedere l'accesso solo alle risorse di cui ha bisogno, permettendo al contempo agli utenti di controllare il livello di accesso che concedono all'applicazione. Pertanto, esiste una relazione inversa tra il numero di ambiti richiesti e la probabilità di ottenere il consenso degli utenti. La YouTube Data API v3 utilizza i seguenti ambiti:
Il documento Ambiti API OAuth 2.0 fornisce un elenco completo degli ambiti che potresti utilizzare per accedere alle API di Google. Consigliamo alla tua applicazione di richiedere l'accesso agli ambiti di autorizzazione nel contesto, quando possibile. Richiedendo l'accesso ai dati utente nel contesto tramite l'autorizzazione incrementale, aiuti gli utenti a comprendere più facilmente perché la tua applicazione ha bisogno dell'accesso richiesto. |
||||||||||||||||
state |
Consigliato
Specifica qualsiasi valore stringa utilizzato dall'applicazione per mantenere lo stato tra la richiesta di autorizzazione e la risposta del server di autorizzazione.
Il server restituisce il valore esatto che invii come coppia Puoi utilizzare questo parametro per diversi scopi, ad esempio indirizzare l'utente alla risorsa corretta nell'applicazione, inviare nonce e ridurre la falsificazione delle richieste tra siti. Poiché |
||||||||||||||||
include_granted_scopes |
Facoltativo
Consente alle applicazioni di utilizzare l'autorizzazione incrementale per richiedere l'accesso ad ambiti aggiuntivi nel contesto. Se imposti il valore di questo parametro su |
||||||||||||||||
enable_granular_consent |
Facoltativo
Il valore predefinito è Quando Google abilita autorizzazioni granulari per un'applicazione, questo parametro non avrà più alcun effetto. |
||||||||||||||||
login_hint |
Facoltativo
Se la tua applicazione sa quale utente sta tentando di eseguire l'autenticazione, può utilizzare questo parametro per fornire un suggerimento al server di autenticazione di Google. Il server utilizza il suggerimento per semplificare il flusso di accesso precompilando il campo email nel modulo di accesso o selezionando la sessione con accesso multiplo appropriata. Imposta il valore del parametro su un indirizzo email o un identificatore |
||||||||||||||||
prompt |
Facoltativo
Un elenco di richieste per presentare all'utente, delimitato da spazi, e sensibile alle maiuscole. Se non specifichi questo parametro, all'utente verrà richiesto l'accesso solo la prima volta che il tuo progetto richiede l'accesso. Per maggiori informazioni, consulta la sezione Richiedere un nuovo consenso. I valori possibili sono:
|
Esempio di reindirizzamento al server di autorizzazione di Google
Di seguito è riportato un URL di esempio, con interruzioni di riga e spazi per una migliore leggibilità. L'URL richiede l'accesso a un ambito che consenta l'accesso per recuperare i dati di YouTube dell'utente. Utilizza l'autorizzazione
incrementale (include_granted_scopes=true
) per garantire che il nuovo token di accesso
copra tutti gli ambiti a cui l'utente ha concesso in precedenza l'accesso all'applicazione. Nell'esempio vengono impostati anche molti altri parametri.
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl& include_granted_scopes=true& response_type=token& state=state_parameter_passthrough_value& redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback& client_id=client_id
Dopo aver creato l'URL della richiesta, reindirizza l'utente a quest'ultimo.
Codice di esempio JavaScript
Il seguente snippet JavaScript mostra come avviare il flusso di autorizzazione in JavaScript senza utilizzare la libreria client delle API di Google per JavaScript. Poiché questo endpoint OAuth 2.0 non supporta la condivisione delle risorse tra origini (CORS), lo snippet crea un modulo che apre la richiesta all'endpoint in questione.
/* * Create form to request access token from Google's OAuth 2.0 server. */ function oauthSignIn() { // Google's OAuth 2.0 endpoint for requesting an access token var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth'; // Create <form> element to submit parameters to OAuth 2.0 endpoint. var form = document.createElement('form'); form.setAttribute('method', 'GET'); // Send as a GET request. form.setAttribute('action', oauth2Endpoint); // Parameters to pass to OAuth 2.0 endpoint. var params = {'client_id': 'YOUR_CLIENT_ID', 'redirect_uri': 'YOUR_REDIRECT_URI', 'response_type': 'token', 'scope': 'https://www.googleapis.com/auth/youtube.force-ssl', 'include_granted_scopes': 'true', 'state': 'pass-through value'}; // Add form parameters as hidden input values. for (var p in params) { var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', p); input.setAttribute('value', params[p]); form.appendChild(input); } // Add form to page and submit it to open the OAuth 2.0 endpoint. document.body.appendChild(form); form.submit(); }
Passaggio 2: Google richiede il consenso all'utente
In questo passaggio, l'utente deciderà se concedere alla tua applicazione l'accesso richiesto. In questa fase, Google mostra una finestra di consenso che mostra il nome della tua applicazione e dei servizi API di Google per i quali richiede l'autorizzazione ad accedere con le credenziali di autorizzazione dell'utente e un riepilogo degli ambiti di accesso da concedere. L'utente può quindi acconsentire alla concessione dell'accesso a uno o più ambiti richiesti dalla tua applicazione o rifiutare la richiesta.
L'applicazione non deve fare nulla in questa fase perché attende la risposta dal server OAuth 2.0 di Google che indica se è stato concesso un accesso. Questa risposta è spiegata nel passaggio seguente.
Errori
Le richieste all'endpoint di autorizzazione OAuth 2.0 di Google potrebbero visualizzare messaggi di errore rivolti agli utenti anziché i flussi di autenticazione e autorizzazione previsti. Di seguito sono elencati i codici di errore comuni e le soluzioni suggerite.
admin_policy_enforced
L'Account Google non è in grado di autorizzare uno o più ambiti richiesti a causa dei criteri dell'amministratore di Google Workspace. Consulta l'articolo del Centro assistenza per amministratori di Google Workspace Specificare quali app di terze parti e interne possono accedere ai dati di Google Workspace per saperne di più su come un amministratore può limitare l'accesso a tutti gli ambiti o agli ambiti sensibili e con restrizioni finché l'accesso non viene concesso esplicitamente all'ID client OAuth.
disallowed_useragent
L'endpoint di autorizzazione viene visualizzato all'interno di uno user agent incorporato non consentito dai criteri OAuth 2.0 di Google.
Android
Gli sviluppatori Android potrebbero visualizzare questo messaggio di errore quando aprono le richieste di autorizzazione in
android.webkit.WebView
.
Gli sviluppatori devono invece usare librerie Android come
Accedi con Google per Android o
AppAuth per Android di OpenID Foundation.
Gli sviluppatori web potrebbero riscontrare questo errore quando un'app per Android apre un link web generale in uno user agent incorporato e un utente accede all'endpoint di autorizzazione OAuth 2.0 di Google dal tuo sito. Gli sviluppatori devono consentire l'apertura dei link generali nel gestore di link predefinito del sistema operativo, che include sia i gestori Link per app Android sia l'app browser predefinita. È supportata anche la raccolta Schede personalizzate Android.
iOS
Gli sviluppatori iOS e macOS potrebbero riscontrare questo errore quando aprono le richieste di autorizzazione in
WKWebView
.
Gli sviluppatori devono invece utilizzare librerie iOS come
Accedi con Google per iOS o
AppAuth per iOS di OpenID Foundation.
Gli sviluppatori web potrebbero riscontrare questo errore quando un'app per iOS o macOS apre un link web generale in uno user agent incorporato e un utente accede all'endpoint di autorizzazione OAuth 2.0 di Google dal tuo sito. Gli sviluppatori devono consentire l'apertura dei link generali nel gestore di link predefinito del sistema operativo, che include sia i gestori Universal Links sia l'app browser predefinita. È supportata anche la libreria SFSafariViewController
.
org_internal
L'ID client OAuth nella richiesta fa parte di un progetto che limita l'accesso agli Account Google in una specifica organizzazione Google Cloud. Per maggiori informazioni su questa opzione di configurazione, consulta la sezione Tipo di utente nell'articolo del Centro assistenza Configurare la schermata per il consenso OAuth.
invalid_client
L'origine da cui è stata effettuata la richiesta non è autorizzata per questo client. Vedi
origin_mismatch
.
invalid_grant
Quando utilizzi l'autorizzazione incrementale, il token potrebbe essere scaduto o essere stato invalidato. Autentica di nuovo l'utente e richiedi il consenso dell'utente per ottenere nuovi token. Se continui a visualizzare questo errore, assicurati che l'applicazione sia stata configurata correttamente e di utilizzare i token e i parametri corretti nella richiesta. In caso contrario, l'account utente potrebbe essere stato eliminato o disattivato.
origin_mismatch
Lo schema, il dominio e/o la porta del codice JavaScript che ha originato la richiesta di autorizzazione potrebbero non corrispondere a un URI di origine JavaScript autorizzato registrato per l'ID client OAuth. Esamina le origini JavaScript autorizzate in Google API Console Credentials page.
redirect_uri_mismatch
Il valore redirect_uri
trasmesso nella richiesta di autorizzazione non corrisponde a un URI di reindirizzamento autorizzato per l'ID client OAuth. Esamina gli URI di reindirizzamento autorizzati in
Google API Console Credentials page.
Lo schema, il dominio e/o la porta del codice JavaScript che ha originato la richiesta di autorizzazione potrebbero non corrispondere a un URI di origine JavaScript autorizzato registrato per l'ID client OAuth. Rivedi le origini JavaScript autorizzate in Google API Console Credentials page.
Il parametro redirect_uri
potrebbe fare riferimento al flusso OAuth out-of-band (OOB) che è stato
deprecato e non è più supportato. Consulta la
guida alla migrazione per aggiornare la tua
integrazione.
invalid_request
Si è verificato un problema nella richiesta che hai inviato. Ciò potrebbe essere dovuto a una serie di motivi:
- La richiesta non è formattata correttamente
- Nella richiesta mancano dei parametri obbligatori
- La richiesta utilizza un metodo di autorizzazione non supportato da Google. Verifica che l'integrazione OAuth utilizzi un metodo di integrazione consigliato
Passaggio 3: gestisci la risposta del server OAuth 2.0
Endpoint OAuth 2.0
Il server OAuth 2.0 invia una risposta al redirect_uri
specificato nella
richiesta del token di accesso.
Se l'utente approva la richiesta, la risposta contiene un token di accesso. Se l'utente non approva la richiesta, la risposta contiene un messaggio di errore. Il token di accesso o il messaggio di errore vengono restituiti nel frammento hash dell'URI di reindirizzamento, come mostrato di seguito:
Una risposta del token di accesso:
https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600
Oltre al parametro
access_token
, la stringa del frammento contiene anche il parametrotoken_type
, che è sempre impostato suBearer
, e il parametroexpires_in
, che specifica la durata del token, in secondi. Se il parametrostate
è stato specificato nella richiesta del token di accesso, anche il suo valore viene incluso nella risposta.- Una risposta di errore:
https://oauth2.example.com/callback#error=access_denied
Esempio di risposta del server OAuth 2.0
Puoi testare questo flusso facendo clic sul seguente URL di esempio, che richiede l'accesso in sola lettura per visualizzare i metadati dei file nel tuo Google Drive:
https://accounts.google.com/o/oauth2/v2/auth? scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl& include_granted_scopes=true& response_type=token& state=state_parameter_passthrough_value& redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback& client_id=client_id
Dopo aver completato il flusso OAuth 2.0, si aprirà la pagina
http://localhost/oauth2callback
. L'URL restituirà un errore 404 NOT FOUND
, a meno che la tua macchina locale non pubblichi un file a quell'indirizzo. Il passaggio successivo fornisce ulteriori dettagli sulle informazioni restituite
nell'URI quando l'utente viene reindirizzato alla tua applicazione.
Chiamata alle API di Google
Endpoint OAuth 2.0
Dopo che l'applicazione ha ottenuto un token di accesso, puoi utilizzarlo per effettuare chiamate a un'API di Google per conto di un determinato account utente, se sono stati concessi gli ambiti di accesso richiesti dall'API. Per farlo, includi il token di accesso in una richiesta all'API includendo un parametro di query access_token
o un valore Bearer
dell'intestazione HTTP Authorization
. Se possibile, è preferibile utilizzare l'intestazione HTTP, in quanto le stringhe di query tendono a essere visibili nei log del server. Nella maggior parte dei casi puoi utilizzare una libreria client per configurare le chiamate alle API di Google (ad esempio, quando chiami l'API YouTube Live Streaming).
Tieni presente che l'API YouTube Live Streaming non supporta il flusso dell'account di servizio. Poiché non è possibile collegare un account di servizio a un account YouTube, i tentativi di autorizzazione delle richieste con questo flusso generano un errore NoLinkedYouTubeAccount
.
Puoi provare tutte le API di Google e visualizzarne gli ambiti nel OAuth 2.0 Playground.
Esempi GET HTTP
Una chiamata all'endpoint
liveBroadcasts.list
(l'API YouTube Live Streaming) che utilizza l'intestazione HTTP Authorization: Bearer
potrebbe essere simile alla seguente. Tieni presente che devi specificare un tuo token di accesso:
GET /youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true HTTP/1.1 Host: www.googleapis.com Authorization: Bearer access_token
Ecco una chiamata alla stessa API per l'utente autenticato utilizzando il parametro della stringa di query
access_token
:
GET https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true
curl
esempi
Puoi testare questi comandi con l'applicazione a riga di comando curl
. Ecco un
esempio che utilizza l'opzione dell'intestazione HTTP (preferita):
curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true
Oppure, in alternativa, l'opzione del parametro della stringa di query:
curl https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true
Codice di esempio JavaScript
Lo snippet di codice riportato di seguito mostra come utilizzare CORS (condivisione delle risorse tra origini) per inviare una richiesta a un'API Google. Questo esempio non utilizza la libreria client delle API di Google per JavaScript. Tuttavia, anche se non utilizzi la libreria client, la guida per il supporto CORS nella documentazione della libreria probabilmente ti aiuterà a comprendere meglio queste richieste.
In questo snippet di codice, la variabile access_token
rappresenta il token che hai
ottenuto per effettuare richieste API per conto dell'utente autorizzato. L'esempio
completo mostra come archiviare il token nello spazio di archiviazione locale del browser e recuperarlo
quando si effettua una richiesta API.
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' + 'access_token=' + params['access_token']); xhr.onreadystatechange = function (e) { console.log(xhr.response); }; xhr.send(null);
Esempio completo
Endpoint OAuth 2.0
Questo esempio di codice mostra come completare il flusso OAuth 2.0 in JavaScript senza utilizzare la libreria client delle API di Google per JavaScript. Il codice si riferisce a una pagina HTML che mostra un pulsante per provare una richiesta API. Se fai clic sul pulsante, il codice controlla se nella pagina è stato memorizzato un token di accesso all'API nello spazio di archiviazione locale del browser. In questo caso, esegue la richiesta API. In caso contrario, viene avviato il flusso OAuth 2.0.
Per il flusso OAuth 2.0, la pagina segue questi passaggi:
- Indirizza l'utente al server OAuth 2.0 di Google, che richiede l'accesso all'ambito
https://www.googleapis.com/auth/youtube.force-ssl
. - Dopo aver concesso (o negato) l'accesso a uno o più ambiti richiesti, l'utente viene reindirizzato alla pagina originale, che analizza il token di accesso dalla stringa dell'identificatore del frammento.
La pagina utilizza il token di accesso per effettuare la richiesta API di esempio.
Questa richiesta API chiama il metodo
liveBroadcasts.list
dell'API YouTube Data per recuperare un elenco di trasmissioni video per il canale YouTube dell'utente autorizzato.- Se la richiesta viene eseguita correttamente, la risposta dell'API viene registrata nella console di debug del browser.
Puoi revocare l'accesso all'app tramite la pagina Autorizzazioni del tuo Account Google. L'app sarà contrassegnata come OAuth 2.0 Demo for Google API Docs.
Per eseguire questo codice in locale, devi impostare i valori per le variabili YOUR_CLIENT_ID
e
YOUR_REDIRECT_URI
che corrispondono alle tue
credenziali di autorizzazione. La variabile YOUR_REDIRECT_URI
deve essere impostata sullo stesso URL in cui viene pubblicata la pagina. Il valore deve corrispondere esattamente a uno degli
URI di reindirizzamento autorizzati per il client OAuth 2.0, che hai configurato
in API Console Credentials page. Se questo valore non corrisponde a un URI autorizzato, riceverai un errore redirect_uri_mismatch
. Il progetto deve inoltre aver abilitato l'API appropriata per questa richiesta.
<html><head></head><body> <script> var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE'; var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE'; // Parse query string to see if page request is coming from OAuth 2.0 server. var fragmentString = location.hash.substring(1); var params = {}; var regex = /([^&=]+)=([^&]*)/g, m; while (m = regex.exec(fragmentString)) { params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } if (Object.keys(params).length > 0 && params['state']) { if (params['state'] == localStorage.getItem('state')) { localStorage.setItem('oauth2-test-params', JSON.stringify(params) ); trySampleRequest(); } else { console.log('State mismatch. Possible CSRF attack'); } } // Function to generate a random state value function generateCryptoRandomState() { const randomValues = new Uint32Array(2); window.crypto.getRandomValues(randomValues); // Encode as UTF-8 const utf8Encoder = new TextEncoder(); const utf8Array = utf8Encoder.encode( String.fromCharCode.apply(null, randomValues) ); // Base64 encode the UTF-8 data return btoa(String.fromCharCode.apply(null, utf8Array)) .replace(/\+/g, '-') .replace(/\//g, '_') .replace(/=+$/, ''); } // If there's an access token, try an API request. // Otherwise, start OAuth 2.0 flow. function trySampleRequest() { var params = JSON.parse(localStorage.getItem('oauth2-test-params')); if (params && params['access_token']) { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id,snippet&mine=true' + 'access_token=' + params['access_token']); xhr.onreadystatechange = function (e) { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.response); } else if (xhr.readyState === 4 && xhr.status === 401) { // Token invalid, so prompt for user permission. oauth2SignIn(); } }; xhr.send(null); } else { oauth2SignIn(); } } /* * Create form to request access token from Google's OAuth 2.0 server. */ function oauth2SignIn() { // create random state value and store in local storage var state = generateCryptoRandomState(); localStorage.setItem('state', state); // Google's OAuth 2.0 endpoint for requesting an access token var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth'; // Create element to open OAuth 2.0 endpoint in new window. var form = document.createElement('form'); form.setAttribute('method', 'GET'); // Send as a GET request. form.setAttribute('action', oauth2Endpoint); // Parameters to pass to OAuth 2.0 endpoint. var params = {'client_id': YOUR_CLIENT_ID, 'redirect_uri': YOUR_REDIRECT_URI, 'scope': 'https://www.googleapis.com/auth/youtube.force-ssl', 'state': state, 'include_granted_scopes': 'true', 'response_type': 'token'}; // Add form parameters as hidden input values. for (var p in params) { var input = document.createElement('input'); input.setAttribute('type', 'hidden'); input.setAttribute('name', p); input.setAttribute('value', params[p]); form.appendChild(input); } // Add form to page and submit it to open the OAuth 2.0 endpoint. document.body.appendChild(form); form.submit(); } </script> <button onclick="trySampleRequest();">Try sample request</button> </body></html>
Regole di convalida dell'origine JavaScript
Google applica le seguenti regole di convalida alle origini JavaScript per aiutare gli sviluppatori a proteggere le loro applicazioni. Le tue origini JavaScript devono ottemperare a queste regole. Consulta la sezione 3 RFC 3986 per la definizione di dominio, host e schema, riportata di seguito.
Regole di convalida | |
---|---|
Schema |
Le origini JavaScript devono utilizzare lo schema HTTPS, non il semplice HTTP. Gli URI Localhost (inclusi gli URI degli indirizzi IP localhost) sono esenti da questa regola. |
Host |
Gli host non possono essere indirizzi IP non elaborati. Gli indirizzi IP Localhost sono esenti da questa regola. |
Dominio |
“googleusercontent.com” .goo.gl ), a meno che l'app non sia proprietaria del dominio. |
Informazioni utente |
Le origini JavaScript non possono contenere il sottocomponente userinfo. |
Percorso |
Le origini JavaScript non possono contenere il componente del percorso. |
Query |
Le origini JavaScript non possono contenere il componente della query. |
Frammento |
Le origini JavaScript non possono contenere il componente del frammento. |
Caratteri |
Le origini JavaScript non possono contenere determinati caratteri, tra cui:
|
Autorizzazione incrementale
Nel protocollo OAuth 2.0, la tua app richiede l'autorizzazione per accedere alle risorse, che sono identificate dagli ambiti. È considerata una best practice per l'esperienza utente richiedere l'autorizzazione per le risorse nel momento in cui ne hai bisogno. Per abilitare questa pratica, il server di autorizzazione di Google supporta l'autorizzazione incrementale. Questa funzionalità consente di richiedere gli ambiti in base alle necessità e, se l'utente concede l'autorizzazione per il nuovo ambito, restituisce un codice di autorizzazione che può essere scambiato con un token contenente tutti gli ambiti che l'utente ha concesso al progetto.
Ad esempio, supponiamo che un'app recuperi i dati relativi al canale YouTube dell'utente autenticato e consenta inoltre a un utente di recuperare i dati di YouTube Analytics tramite un flusso speciale. In questo caso, al momento dell'accesso, l'app potrebbe richiedere l'accesso solo all'ambito https://www.googleapis.com/auth/youtube.force-ssl
. Tuttavia, se l'utente provasse ad accedere ai dati di Analytics per il suo canale, l'app potrebbe anche
richiedere l'accesso all'ambito https://www.googleapis.com/auth/yt-analytics.readonly
.
Le seguenti regole si applicano a un token di accesso ottenuto da un'autorizzazione incrementale:
- Il token può essere utilizzato per accedere alle risorse corrispondenti a qualsiasi ambito implementato nella nuova autorizzazione combinata.
- Quando utilizzi il token di aggiornamento per l'autorizzazione combinata per ottenere un token di accesso, il token di accesso rappresenta l'autorizzazione combinata e può essere utilizzato per qualsiasi valore
scope
incluso nella risposta. - L'autorizzazione combinata include tutti gli ambiti che l'utente ha concesso al progetto API anche se le concessioni sono state richieste da client diversi. Ad esempio, se un utente ha concesso l'accesso a un ambito utilizzando il client desktop di un'applicazione e poi ha concesso un altro ambito alla stessa applicazione tramite un client mobile, l'autorizzazione combinata includerà entrambi gli ambiti.
- Se revochi un token che rappresenta un'autorizzazione combinata, l'accesso a tutti gli ambiti di tale autorizzazione per conto dell'utente associato viene revocato contemporaneamente.
Gli esempi di codice riportati di seguito mostrano come aggiungere ambiti a un token di accesso esistente. Questo approccio consente alla tua app di evitare di dover gestire più token di accesso.
Endpoint OAuth 2.0
In questo esempio, l'applicazione chiamante richiede l'accesso per recuperare i dati di YouTube dell'utente in aggiunta a qualsiasi altro accesso che l'utente ha già concesso all'applicazione.
Per aggiungere ambiti a un token di accesso esistente, includi il parametro include_granted_scopes
nella richiesta al server OAuth 2.0 di Google.
Il seguente snippet di codice mostra come farlo. Lo snippet presuppone che tu abbia archiviato
gli ambiti per i quali il token di accesso è valido nello spazio di archiviazione locale del browser. Il codice di esempio completo consente di archiviare un elenco di ambiti per i quali il token di accesso è valido impostando la proprietà oauth2-test-params.scope
nello spazio di archiviazione locale del browser.
Lo snippet confronta gli ambiti per i quali il token di accesso è valido con l'ambito che vuoi utilizzare per una determinata query. Se il token di accesso non copre tale ambito, viene avviato il flusso OAuth 2.0.
In questo caso, la funzione oauth2SignIn
è la stessa fornita nel
passaggio 2 (e fornita più avanti nell'esempio
completo).
var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl'; var params = JSON.parse(localStorage.getItem('oauth2-test-params')); var current_scope_granted = false; if (params.hasOwnProperty('scope')) { var scopes = params['scope'].split(' '); for (var s = 0; s < scopes.length; s++) { if (SCOPE == scopes[s]) { current_scope_granted = true; } } } if (!current_scope_granted) { oauth2SignIn(); // This function is defined elsewhere in this document. } else { // Since you already have access, you can proceed with the API request. }
Revoca di un token
In alcuni casi un utente potrebbe decidere di revocare l'accesso concesso a un'applicazione. Un utente può revocare l'accesso visitando le Impostazioni account. Per ulteriori informazioni, consulta la sezione relativa alla rimozione dell'accesso di siti o app del documento di assistenza per siti e app di terze parti con accesso al tuo account.
È anche possibile che un'applicazione revoca in modo programmatico l'accesso concesso. La revoca programmatica è importante nei casi in cui un utente annulla l'iscrizione o rimuove un'applicazione oppure le risorse API richieste da un'app sono cambiate in modo significativo. In altre parole, parte del processo di rimozione può includere una richiesta API per garantire che le autorizzazioni precedentemente concesse all'applicazione vengano rimosse.
Endpoint OAuth 2.0
Per revocare un token in modo programmatico, l'applicazione invia una richiesta a https://oauth2.googleapis.com/revoke
e include il token come parametro:
curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \ https://oauth2.googleapis.com/revoke?token={token}
Il token può essere un token di accesso o un token di aggiornamento. Se il token è un token di accesso e ha un token di aggiornamento corrispondente, verrà revocato anche il token di aggiornamento.
Se la revoca viene elaborata correttamente, il codice di stato HTTP della risposta è
200
. Per le condizioni di errore, viene restituito un codice di stato HTTP 400
insieme a un codice di errore.
Il seguente snippet JavaScript mostra come revocare un token in JavaScript senza utilizzare la
libreria client delle API di Google per JavaScript. Poiché l'endpoint OAuth 2.0 di Google per la revoca dei token non supporta la condivisione delle risorse tra origini (CORS), il codice crea un modulo e lo invia all'endpoint anziché utilizzare il metodo XMLHttpRequest()
per pubblicare la richiesta.
function revokeAccess(accessToken) { // Google's OAuth 2.0 endpoint for revoking access tokens. var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke'; // Create <form> element to use to POST data to the OAuth 2.0 endpoint. var form = document.createElement('form'); form.setAttribute('method', 'post'); form.setAttribute('action', revokeTokenEndpoint); // Add access token to the form so it is set as value of 'token' parameter. // This corresponds to the sample curl request, where the URL is: // https://oauth2.googleapis.com/revoke?token={token} var tokenField = document.createElement('input'); tokenField.setAttribute('type', 'hidden'); tokenField.setAttribute('name', 'token'); tokenField.setAttribute('value', accessToken); form.appendChild(tokenField); // Add form to page and submit it to actually revoke the token. document.body.appendChild(form); form.submit(); }