JavaScript-Kurzanleitung

In dieser Kurzanleitung wird erläutert, wie Sie eine einfache Seite einrichten, über die Anfragen an die YouTube Data API gesendet werden. In dieser Kurzanleitung wird tatsächlich erläutert, wie Sie zwei API-Anfragen stellen:

  1. Sie verwenden einen API-Schlüssel, mit dem Sie Ihre Anwendung identifizieren können, um Informationen zum YouTube-Kanal von GoogleDevelopers abzurufen.
  2. Sie verwenden eine OAuth 2.0-Client-ID, um eine autorisierte Anfrage zu senden, die Informationen zu Ihrem eigenen YouTube-Kanal abruft.

Voraussetzungen

Für diese Kurzanleitung benötigen Sie Folgendes:

  • Python 2.4 oder höher (zur Bereitstellung eines Webservers)
  • Zugriff auf das Internet und einen Webbrowser.
  • Ein Google-Konto.

Schritt 1: Projekt und Anmeldedaten einrichten

Erstellen oder wählen Sie ein Projekt in der API-Konsole aus. Führen Sie in der API Console die folgenden Aufgaben für Ihr Projekt aus:

  1. Suchen Sie im Bibliotheksbereich nach der YouTube Data API v3. Klicken Sie auf den Eintrag für diese API und prüfen Sie, ob die API für Ihr Projekt aktiviert ist.

  2. Erstellen Sie im Bereich Anmeldedaten zwei Anmeldedaten:

    1. API-Schlüssel erstellen Sie verwenden den API-Schlüssel, um API-Anfragen zu senden, für die keine Nutzerautorisierung erforderlich ist. Beispielsweise ist keine Nutzerautorisierung erforderlich, um Informationen zu einem öffentlichen YouTube-Kanal abzurufen.

    2. OAuth 2.0-Client-ID erstellen Legen Sie den Anwendungstyp auf Webanwendung fest. Für Anfragen, die eine Nutzerautorisierung erfordern, müssen OAuth 2.0-Anmeldedaten verwendet werden. Sie benötigen beispielsweise die Nutzerautorisierung, um Informationen zum YouTube-Kanal des aktuell authentifizierten Nutzers abzurufen.

      Geben Sie im Feld Autorisierte JavaScript-Quellen die URL http://localhost:8000 ein. Sie können das Feld Autorisierte Weiterleitungs-URIs leer lassen.

Schritt 2: Beispiel einrichten und ausführen

Mit dem APIs Explorer-Widget in der Seitenleiste kannst du Beispielcode zum Abrufen von Informationen zum YouTube-Kanal von GoogleDevelopers abrufen. Diese Anfrage verwendet einen API-Schlüssel, um Ihre Anwendung zu identifizieren. Sie benötigt keine Nutzerautorisierung oder spezielle Berechtigungen von dem Nutzer, der das Beispiel ausführt.

  1. Öffnen Sie die Dokumentation zur Methode channels.list der API.

  2. Auf dieser Seite finden Sie im Abschnitt „Häufige Anwendungsfälle“ eine Tabelle, in der verschiedene gängige Methoden der Methode erläutert werden. Der erste Eintrag in der Tabelle dient zum Auflisten der Ergebnisse nach Kanal-ID.

    Klicken Sie auf das Codesymbol für den ersten Eintrag, um den APIs Explorer im Vollbildmodus zu öffnen und auszufüllen.

    Bild, das die Position des Codesymbollinks in der Tabelle angibt, in der Anwendungsfälle für die Dokumentation zu Channels.list aufgeführt sind. Der Alt-Text für dieses Bild identifiziert das Bild als Codesymbol und gibt den mit diesem Link verknüpften Anwendungsfall an.

  3. Links im APIs Explorer im Vollbildmodus wird Folgendes angezeigt:

    1. Unter dem Header Anfrageparameter finden Sie eine Liste der Parameter, die von der Methode unterstützt werden. Die Parameterwerte part und id sollten festgelegt sein. Der Parameterwert id, UC_x5XG1OV2P6uZZ5FSM9Ttw, ist die ID für den YouTube-Kanal von GoogleDevelopers.

    2. Unterhalb der Parameter befindet sich der Abschnitt Anmeldedaten. Im Drop-down-Menü in diesem Abschnitt sollte der Wert API key angezeigt werden. APIs Explorer verwendet standardmäßig Demo-Anmeldedaten, um Ihnen den Einstieg zu erleichtern. Sie verwenden jedoch Ihren eigenen API-Schlüssel, um das Beispiel lokal auszuführen.

      Abbildung mit den Anmeldedaten im APIs Explorer für den Vollbildmodus und dem Drop-down-Menü, in dem die Option „API-Schlüssel“ ausgewählt ist.

  4. Rechts im APIs Explorer werden Tabs mit Codebeispielen in verschiedenen Sprachen angezeigt. Wählen Sie den Tab JavaScript aus.

  5. Kopieren Sie das Codebeispiel und speichern Sie es in einer Datei mit dem Namen example.html.

  6. Suchen Sie im heruntergeladenen Beispiel nach dem String YOUR_API_KEY und ersetzen Sie ihn durch den API-Schlüssel, den Sie in Schritt 1 dieser Kurzanleitung erstellt haben.

  7. Starten Sie den Webserver mit dem folgenden Befehl aus Ihrem Arbeitsverzeichnis:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  8. Öffnen Sie die Datei beispiel.html in Ihrem Browser. Öffne auch die Entwicklertools des Browsers, z. B. die Entwicklertools im Chrome-Browser.

    1. Klicken Sie auf die Schaltfläche Laden auf der Seite, um die Google APIs-Clientbibliothek für JavaScript zu laden. Nachdem Sie auf die Schaltfläche geklickt haben, sollte in der Entwicklerkonsole ein Hinweis angezeigt werden, dass der GAPI-Client geladen wurde.

    2. Klicken Sie auf die Schaltfläche Ausführen, um die API-Anfrage zu senden. Die Entwicklerkonsole sollte dann die API-Antwort anzeigen.

Schritt 3: Autorisierte Anfrage ausführen

In diesem Schritt ändern Sie das Codebeispiel so, dass anstelle der Informationen zum YouTube-Kanal für Google-Entwickler Informationen zu Ihrem YouTube-Kanal abgerufen werden. Für diese Anfrage ist eine Nutzerautorisierung erforderlich.

  1. Kehren Sie zur Dokumentation für die Methode channels.list der API zurück.

  2. Klicken Sie im Abschnitt „Häufige Anwendungsfälle“ auf das Codesymbol für den dritten Eintrag in der Tabelle. In diesem Anwendungsfall wird die Methode list für "Mein Kanal" aufgerufen.

  3. Wieder sehen Sie auf der linken Seite des APIs Explorer-Vollbild eine Liste der Parameter gefolgt vom Abschnitt Anmeldedaten. Es gibt jedoch zwei Änderungen aus dem Beispiel, bei denen du Informationen zum GoogleDevelopers-Kanal abgerufen hast:

    1. Im Parameterbereich muss anstelle des Parameterwerts id der Parameter mine auf true festgelegt werden. Dadurch wird der API-Server angewiesen, Informationen zum Kanal des aktuell authentifizierten Nutzers abzurufen.

    2. Im Abschnitt Anmeldedaten sollte im Drop-down-Menü die Option für Google OAuth 2.0 ausgewählt sein.

      Wenn Sie außerdem auf den Link Bereiche anzeigen klicken, sollte der Bereich https://www.googleapis.com/auth/youtube.readonly aktiviert sein.

      Abbildung mit den Bereichen im APIs Explorer für den Vollbildmodus und der Option zur Verwendung von ausgewählten „Google OAuth 2.0“-Anmeldedaten.

  4. Wählen Sie wie im vorherigen Beispiel den Tab JavaScript aus, kopieren Sie das Codebeispiel und speichern Sie es in example.html.

    Suchen Sie im Code nach dem String YOUR_CLIENT_ID und ersetzen Sie ihn durch die Client-ID, die Sie in Schritt 1 dieser Kurzanleitung erstellt haben.

  5. Starten Sie den Webserver mit dem folgenden Befehl aus Ihrem Arbeitsverzeichnis:

    Python 2.x

    python -m SimpleHTTPServer 8000

    Python 3.x

    python -m http.server 8000

  6. Rufen Sie im Browser die Datei http://localhost:8000/example.html auf. Öffnen Sie die Entwicklertools des Browsers, z. B. die Entwicklertools im Chrome-Browser.

  7. Klicken Sie auf der Seite auf die Schaltfläche Autorisieren und laden, um die Google APIs-Clientbibliothek für JavaScript zu laden und den Autorisierungsvorgang zu starten. Sie sollten die Anwendung dazu auffordern, Daten aus Ihrem YouTube-Konto zu lesen.

    Wenn Sie die Berechtigung erteilen, sollte die Entwicklerkonsole Meldungen anzeigen, die angeben, dass die Anmeldung erfolgreich war und der API-Client geladen wurde.

  8. Klicken Sie auf die Schaltfläche Ausführen, um die API-Anfrage zu senden. Die Entwicklerkonsole sollte dann die API-Antwort anzeigen.

Weitere Informationen