Guida rapida di JavaScript

Questa guida rapida spiega come configurare una pagina semplice che invia richieste all'API YouTube Data. Questa guida rapida spiega come effettuare due richieste API:

  1. Utilizzerai una chiave API, che identifica la tua applicazione, per recuperare informazioni sul canale YouTube GoogleDevelopers.
  2. Utilizzerai un ID client OAuth 2.0 per inviare una richiesta autorizzata che recupera informazioni sul tuo canale YouTube.

Prerequisiti

Per eseguire questa guida rapida, devi disporre di:

  • Python 2.4 o versioni successive (per fornire un server web)
  • Accesso a internet e a un browser web.
  • Un Account Google.

Passaggio 1: configura il progetto e le credenziali

Crea o seleziona un progetto nella console API. Completa le seguenti attività nella console API per il tuo progetto:

  1. Nel riquadro della libreria, cerca l'API YouTube Data v3. Fai clic sulla scheda dell'API e assicurati che sia abilitata per il tuo progetto.

  2. Nel pannello credenziali, crea due credenziali:

    1. Crea una chiave API Utilizzerai la chiave API per effettuare richieste API che non richiedono l'autorizzazione dell'utente. Ad esempio, non è necessaria l'autorizzazione dell'utente per recuperare informazioni su un canale YouTube pubblico.

    2. Crea un ID client OAuth 2.0 Imposta il tipo di applicazione su Applicazione web. Devi utilizzare le credenziali OAuth 2.0 per le richieste che richiedono l'autorizzazione dell'utente. Ad esempio, devi disporre dell'autorizzazione dell'utente per recuperare informazioni sul canale YouTube dell'utente attualmente autenticato.

      Nel campo Origini JavaScript autorizzate, inserisci l'URL http://localhost:8000. Puoi lasciare vuoto il campo URI di reindirizzamento autorizzati.

Passaggio 2: configura ed esegui l'esempio

Utilizza il widget Explorer API nel riquadro laterale per ottenere un codice di esempio per recuperare informazioni sul canale YouTube GoogleDevelopers. Questa richiesta utilizza una chiave API per identificare l'applicazione e non richiede l'autorizzazione dell'utente o autorizzazioni speciali da parte dell'utente che esegue l'esempio.

  1. Apri la documentazione del metodo channels.list dell'API.

  2. In questa pagina, la sezione "Casi d'uso comuni" contiene una tabella che spiega diversi modi comuni in cui viene utilizzato il metodo. Il primo elenco nella tabella riguarda i risultati degli elenchi per ID canale.

    Fai clic sul simbolo del codice per il primo elenco per aprire e compilare Explorer API a schermo intero.

    Immagine che identifica la posizione del link al simbolo del codice nella tabella che elenca i casi d'uso per la documentazione channels.list. Il testo alternativo dell'immagine la identifica come simbolo di codice e specifica il caso d'uso associato al link.

  3. Il lato sinistro di Explorer API a schermo intero mostra quanto segue:

    1. Sotto l'intestazione Parametri della richiesta, è presente un elenco di parametri supportati dal metodo. I valori dei parametri part e id devono essere impostati. Il valore del parametro id, UC_x5XG1OV2P6uZZ5FSM9Ttw, è l'ID del canale YouTube GoogleDevelopers.

    2. Sotto i parametri, c'è una sezione denominata Credenziali. Il menu a discesa in questa sezione dovrebbe mostrare il valore Chiave API. L'API Explorer utilizza le credenziali demo per impostazione predefinita per semplificare l'inizio. Tuttavia, utilizzerai la tua chiave API per eseguire l'esempio in locale.

      Immagine che mostra le "Credenziali" in Explorer API a schermo intero e il menu a discesa con l'opzione "Chiave API" selezionata.

  4. Il lato destro di Explorer API a schermo intero mostra schede con esempi di codice in diverse lingue. Seleziona la scheda JavaScript.

  5. Copia il codice di esempio e salvalo in un file denominato example.html.

  6. Nell'esempio che hai scaricato, trova la stringa YOUR_API_KEY e sostituiscila con la chiave API che hai creato nel passaggio 1 di questa guida rapida.

  7. Avvia il server web utilizzando il seguente comando dalla tua directory di lavoro:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  8. Apri il file example.html nel browser. Apri anche gli strumenti per sviluppatori del browser, ad esempio "Strumenti per sviluppatori" nel browser Chrome.

    1. Fai clic sul pulsante Carica nella pagina per caricare la libreria client delle API di Google per JavaScript. Dopo aver fatto clic sul pulsante, nella console per sviluppatori dovrebbe essere visualizzata una nota che indica che il client GAPI è stato caricato.

    2. Fai clic sul pulsante Esegui per inviare la richiesta API. La console dello sviluppatore dovrebbe quindi mostrare la risposta dell'API.

Passaggio 3: esegui una richiesta autorizzata

In questo passaggio, modificherai l'esempio di codice in modo che, anziché recuperare informazioni sul canale YouTube GoogleDevelopers, recuperi informazioni sul tuo canale YouTube. Questa richiesta richiede l'autorizzazione dell'utente.

  1. Torna alla documentazione del metodo channels.list dell'API.

  2. Nella sezione "Casi d'uso comuni", fai clic sul simbolo del codice per la terza voce dell'elenco nella tabella. Questo caso d'uso consiste nel chiamare il metodo list per "il mio canale".

  3. Anche in questo caso, sul lato sinistro di APIs Explorer a schermo intero, vedrai un elenco di parametri seguito dalla sezione Credenziali. Tuttavia, ci sono due modifiche rispetto all'esempio in cui hai recuperato informazioni sul canale GoogleDevelopers:

    1. Nella sezione dei parametri, anziché impostare il valore del parametro id, il valore del parametro mine deve essere impostato su true. In questo modo il server API recupera le informazioni sul canale dell'utente attualmente autenticato.

    2. Nella sezione Credenziali, il menu a discesa dovrebbe selezionare l'opzione per Google OAuth 2.0.

      Inoltre, se fai clic sul link Mostra ambiti, l'ambito https://www.googleapis.com/auth/youtube.readonly deve essere selezionato.

      Immagine che mostra gli ambiti nell'Explorer API a schermo intero e l'opzione per utilizzare le credenziali "Google OAuth 2.0" selezionata.

  4. Come nell'esempio precedente, seleziona la scheda JavaScript, copia l'esempio di codice e salvalo in example.html.

    Nel codice, trova la stringa YOUR_CLIENT_ID e sostituiscila con l'ID client che hai creato nel passaggio 1 di questa guida rapida.

  5. Avvia il server web utilizzando il seguente comando dalla tua directory di lavoro:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  6. Vai al file http://localhost:8000/example.html nel browser. Apri gli strumenti per sviluppatori del browser, ad esempio "Strumenti per sviluppatori" nel browser Chrome.

  7. Fai clic sul pulsante Autorizza e carica nella pagina per caricare la libreria client delle API di Google per JavaScript e avviare il flusso di autorizzazione. Ti verrà chiesto di concedere all'applicazione l'autorizzazione a leggere i dati del tuo account YouTube.

    Se concedi l'autorizzazione, la console per gli sviluppatori dovrebbe visualizzare messaggi che indicano che l'accesso è andato a buon fine e che il client API è stato caricato.

  8. Fai clic sul pulsante Esegui per inviare la richiesta API. La console dello sviluppatore dovrebbe quindi mostrare la risposta dell'API.

Per approfondire