Guida rapida di JavaScript

Questa guida rapida spiega come configurare una semplice pagina che invia richieste all'API di dati di YouTube. 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 del tuo progetto:

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

  2. Nel riquadro delle credenziali, crea due credenziali:

    1. Crea una chiave API La utilizzerai per effettuare richieste API che non richiedono l'autorizzazione dell'utente. Ad esempio, non hai bisogno dell'autorizzazione dell'utente per recuperare le 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 avere l'autorizzazione dell'utente per recuperare le 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 campione per recuperare informazioni sul canale YouTube GoogleDevelopers. Questa richiesta utilizza una chiave API per identificare la tua applicazione e non richiede l'autorizzazione dell'utente o alcuna autorizzazione speciale da parte dell'utente che esegue l'esempio.

  1. Apri la documentazione per il metodo channels.list dell'API.

  2. In questa pagina, la sezione "Casi d'uso comuni" contiene una tabella che spiega i diversi metodi di utilizzo del metodo. La prima scheda della tabella riguarda i risultati in base all'ID canale.

    Fai clic sul simbolo del codice della prima scheda per aprire e completare l'Explorer API a schermo intero.

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

  3. La parte sinistra dell'Explorer API a schermo intero mostra quanto segue:

    1. Sotto l'intestazione Parametri di richiesta, è presente un elenco dei 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 Credentials (Credenziali). Il menu a discesa in quella sezione dovrebbe visualizzare il valore Chiave API. Per impostazione predefinita, Explorer API utilizza le credenziali demo per aiutarti a iniziare più facilmente. Tuttavia, utilizzerai la tua chiave API per eseguire l'esempio localmente.

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

  4. La parte destra di Explorer API a schermo intero mostra le schede con esempi di codice in diverse lingue. Seleziona la scheda JavaScript.

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

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

  7. Avvia il server web utilizzando questo comando della 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, come gli "Strumenti per sviluppatori" nel browser Chrome.

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

    2. Fai clic sul pulsante execute per inviare la richiesta API. Nella console dello sviluppatore dovrebbe essere visualizzata 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 di GoogleDevelopers, recuperi le 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 scheda nella tabella. Questo caso d'uso è chiamare il metodo list per "il mio canale".

  3. Ancora una volta, sul lato sinistro di Explorer API a schermo intero, vedrai un elenco di parametri seguiti 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é il valore parametro id impostato, il valore parametro mine deve essere impostato su true. Questo indica al server API di recuperare le informazioni sul canale dell'utente attualmente autenticato.

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

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

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

  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 questo comando della 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 dal tuo account YouTube.

    Se concedi l'autorizzazione, la console dello sviluppatore dovrebbe visualizzare messaggi che indicano che l'accesso è riuscito e che il client API è stato caricato.

  8. Fai clic sul pulsante execute per inviare la richiesta API. Nella console dello sviluppatore dovrebbe essere visualizzata la risposta dell'API.

Per approfondire