JavaScript-Kurzanleitung

In dieser Kurzanleitung wird beschrieben, wie Sie eine einfache Seite einrichten, die Anfragen an die YouTube Data API sendet. Dabei wird erklärt, wie Sie zwei API-Anfragen senden:

  1. Sie verwenden einen API-Schlüssel, der Ihre Anwendung identifiziert, um Informationen zum YouTube-Kanal GoogleDevelopers abzurufen.
  2. Sie verwenden eine OAuth 2.0-Client-ID, um eine autorisierte Anfrage zu senden, mit der Informationen zu Ihrem eigenen YouTube-Kanal abgerufen werden.

Vorbereitung

Für diese Kurzanleitung benötigen Sie Folgendes:

  • Node.js und npm (zum Ausführen eines lokalen 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 Cloud Console aus. Führen Sie in der Cloud Console die folgenden Aufgaben für Ihr Projekt aus:

  1. Suchen Sie im Bereich „Bibliothek“ 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. Sie müssen OAuth 2.0-Anmeldedaten für Anfragen verwenden, für die eine Nutzerautorisierung erforderlich ist. Beispielsweise ist eine Nutzerautorisierung erforderlich, 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

Verwenden Sie das APIs Explorer-Widget in der Seitenleiste, um Beispielcode zum Abrufen von Informationen zum YouTube-Kanal GoogleDevelopers zu erhalten. Bei dieser Anfrage wird ein API-Schlüssel verwendet, um Ihre Anwendung zu identifizieren. Eine Nutzerautorisierung oder spezielle Berechtigungen des Nutzers, der das Beispiel ausführt, sind nicht erforderlich.

  1. Öffnen Sie die Dokumentation für die Methode channels.list der API.

  2. Auf dieser Seite enthält der Abschnitt „Häufige Anwendungsfälle“ eine Tabelle, in der mehrere gängige Verwendungsweisen der Methode erläutert werden. Der erste Eintrag in der Tabelle bezieht sich auf das Auflisten von Ergebnissen nach Kanal-ID.

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

    Bild, das die Position des Links mit dem Codesymbol in der Tabelle zeigt, in der Anwendungsfälle für die channels.list-Dokumentation 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. Auf der linken Seite des Vollbild-APIs Explorer wird Folgendes angezeigt:

    1. Unter der Überschrift Anfrageparameter befindet sich eine Liste der Parameter, die von der Methode unterstützt werden. Die Parameterwerte part und id sollten festgelegt werden. Der Parameterwert id, UC_x5XG1OV2P6uZZ5FSM9Ttw, ist die ID für den YouTube-Kanal GoogleDevelopers.

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

      Bild, das die „Anmeldedaten“ im Vollbild-APIs Explorer und das Drop-down-Menü mit der ausgewählten Option „API-Schlüssel“ zeigt.

  4. Auf der rechten Seite des Vollbild-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 in Ihrem Arbeitsverzeichnis:

    npx http-server -p 8000

  8. Öffnen Sie die Datei „example.html“ in Ihrem Browser. Öffnen Sie außerdem die Entwicklertools des Browsers, z. B. die Entwicklertools in Chrome.

    1. Klicken Sie auf der Seite auf die Schaltfläche load (Laden), um die Google APIs Client Library for 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 execute (Ausführen), um die API-Anfrage zu senden. In der Entwicklerkonsole sollte dann die API-Antwort angezeigt werden.

Schritt 3: Autorisierte Anfrage ausführen

In diesem Schritt ändern Sie Ihr Codebeispiel so, dass anstelle von Informationen zum YouTube-Kanal GoogleDevelopers 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. Dieser Anwendungsfall bezieht sich auf den Aufruf der Methode list für „my channel“ (mein Kanal).

  3. Auch hier sehen Sie auf der linken Seite des Vollbild-APIs Explorer eine Liste von Parametern, gefolgt vom Bereich Anmeldedaten. Es gibt jedoch zwei Änderungen im Vergleich zum Beispiel, in dem Sie Informationen zum GoogleDevelopers-Kanal abgerufen haben:

    1. Im Parameterbereich sollte anstelle des Parameterwerts id der Parameterwert mine auf true gesetzt sein. Dadurch wird der API-Server angewiesen, Informationen zum Kanal des aktuell authentifizierten Nutzers abzurufen.

    2. Im Bereich Anmeldedaten sollte im Drop-down-Menü die Option 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 ausgewählt sein.

      Bild, das Bereiche im Vollbild-APIs Explorer und die Option zur Verwendung von „Google OAuth 2.0“-Anmeldedaten zeigt.

  4. Wählen Sie wie im vorherigen Beispiel den JavaScript Tab 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 in Ihrem Arbeitsverzeichnis:

    npx http-server -p 8000

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

  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 Autorisierungsprozess zu starten. Sie werden aufgefordert, der Anwendung die Berechtigung zu erteilen, Daten aus Ihrem YouTube-Konto zu lesen.

    Wenn Sie die Berechtigung erteilen, sollten in der Entwicklerkonsole Meldungen angezeigt werden, die darauf hinweisen, 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. In der Entwicklerkonsole sollte dann die API-Antwort angezeigt werden.

Weitere Informationen