Diese Seite wurde von der Cloud Translation API übersetzt.

JavaScript – Kurzanleitung

In den Kurzanleitungen wird erläutert, wie Sie eine App einrichten und ausführen, die eine Google Workspace API aufruft.

In den Google Workspace-Schnellstarts werden die API-Clientbibliotheken verwendet, um einige Details des Authentifizierungs- und Autorisierungsablaufs zu verarbeiten. Wir empfehlen die Verwendung der Clientbibliotheken für Ihre eigenen Apps. In dieser Kurzanleitung wird ein vereinfachter Authentifizierungsansatz verwendet, der für eine Testumgebung geeignet ist. Für eine Produktionsumgebung empfehlen wir, sich mit Authentifizierung und Autorisierung vertraut zu machen, bevor Sie die Zugriffsdaten auswählen, die für Ihre App geeignet sind.

Erstellen Sie eine JavaScript-Webanwendung, die Anfragen an die Google Calendar API sendet.

Lernziele

die Umgebung einrichten
Richten Sie das Beispiel ein.
Führen Sie das Beispiel aus.

Vorbereitung

Node.js und npm müssen installiert sein.
Ein Google Cloud-Projekt.

Ein Google-Konto, in dem Google Kalender aktiviert ist.

Umgebung einrichten

Richten Sie Ihre Umgebung ein, um diese Kurzanleitung abzuschließen.

API aktivieren

Bevor Sie Google APIs verwenden können, müssen Sie sie in einem Google Cloud-Projekt aktivieren. Sie können eine oder mehrere APIs in einem einzelnen Google Cloud-Projekt aktivieren.

Aktivieren Sie in der Google Cloud Console die Google Kalender API.

API aktivieren

OAuth-Zustimmungsbildschirm konfigurieren

Wenn Sie für diese Kurzanleitung ein neues Google Cloud-Projekt verwenden, konfigurieren Sie den OAuth-Zustimmungsbildschirm. Wenn Sie diesen Schritt für Ihr Cloud-Projekt bereits ausgeführt haben, fahren Sie mit dem nächsten Abschnitt fort.

Klicken Sie in der Google Cloud Console auf das Dreistrich-Menü > > Branding.
Zu „Branding“
Wenn Sie die bereits konfiguriert haben, können Sie die folgenden Einstellungen für den OAuth-Zustimmungsbildschirm unter Branding, Zielgruppe und Datenzugriff konfigurieren. Wenn Sie die Meldung Noch nicht konfiguriert sehen, klicken Sie auf Jetzt starten:

Geben Sie unter App-Informationen im Feld App-Name einen Namen für die App ein.
Wählen Sie unter E-Mail-Adresse des Nutzersupports eine Support-E-Mail-Adresse aus, über die Nutzer Sie mit Fragen zu ihrer Einwilligung kontaktieren können.
Klicken Sie auf Weiter.
Wählen Sie unter Zielgruppe die Option Intern aus.
Klicken Sie auf Weiter.
Geben Sie unter Kontaktinformationen eine E-Mail-Adresse ein, unter der Sie über Änderungen an Ihrem Projekt informiert werden können.
Klicken Sie auf Weiter.
Lesen Sie unter Fertigstellen die Nutzerdatenrichtlinie für Google API-Dienste und wählen Sie dann Ich akzeptiere die Richtlinie zu Nutzerdaten für Google API-Dienste aus, wenn Sie zustimmen.
Klicken Sie auf Weiter.
Klicken Sie auf Erstellen.

Sie können das Hinzufügen von Bereichen vorerst überspringen. Wenn Sie in Zukunft eine App für die Verwendung außerhalb Ihrer Google Workspace-Organisation erstellen, müssen Sie den Nutzertyp in Extern ändern. Fügen Sie dann die Autorisierungsbereiche hinzu, die für Ihre App erforderlich sind. Weitere Informationen finden Sie in der vollständigen Anleitung OAuth-Zustimmung konfigurieren.

Anmeldedaten für eine Webanwendung autorisieren

Für die Authentifizierung von Endnutzern und für den Zugriff auf Nutzerdaten in Ihrer Anwendung müssen Sie mindestens eine OAuth 2.0-Client-ID erstellen. Eine Client-ID wird zur Identifizierung einer einzelnen Anwendung bei Googles OAuth-Servern verwendet. Wenn Ihre App auf mehreren Plattformen ausgeführt wird, müssen Sie für jede Plattform eine separate Client-ID erstellen.

Klicken Sie in der Google Cloud Console auf das Dreistrich-Menü > > Kunden.
Zu „Kunden“
Klicken Sie auf Create client (Client erstellen).
Klicken Sie auf Anwendungstyp > Webanwendung.
Geben Sie im Feld Name einen Namen für die Anmeldedaten ein. Dieser Name wird nur in der Google Cloud Console angezeigt.
Fügen Sie autorisierte URIs zu Ihrer App hinzu:
- Clientseitige Apps (JavaScript): Klicken Sie unter Autorisierte JavaScript-Quellen auf URI hinzufügen. Geben Sie dann einen URI für Browseranfragen ein. Damit werden die Domains angegeben, von denen aus Ihre Anwendung API-Anfragen an den OAuth 2.0-Server senden kann.
- Serverseitige Apps (Java, Python usw.): Klicken Sie unter Autorisierte Weiterleitungs-URIs auf URI hinzufügen. Geben Sie dann einen Endpunkt-URI ein, an den der OAuth 2.0-Server Antworten senden kann.
Klicken Sie auf Erstellen.
Die neu erstellten Anmeldedaten werden unter OAuth 2.0-Client-IDs angezeigt.

Notieren Sie sich die Client-ID. Clientschlüssel werden nicht für Webanwendungen verwendet.

Notieren Sie sich diese Anmeldedaten, da Sie sie später in dieser Kurzanleitung benötigen.

API-Schlüssel erstellen

Gehen Sie in der Google Cloud Console zu „Menü“ > APIs und Dienste > Anmeldedaten.
Zu den Anmeldedaten
Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.
Ihr neuer API-Schlüssel wird angezeigt.
- Klicken Sie auf „Kopieren“ , um den API-Schlüssel für die Verwendung im Code Ihrer App zu kopieren. Den API-Schlüssel finden Sie auch im Bereich „API-Schlüssel“ der Anmeldedaten Ihres Projekts.
- Klicken Sie auf Schlüssel einschränken, um die erweiterten Einstellungen zu aktualisieren und die Verwendung Ihres API-Schlüssels einzuschränken. Weitere Informationen finden Sie unter Einschränkungen für API-Schlüssel anwenden.

Beispielanwendung einrichten

Erstellen Sie in Ihrem Arbeitsverzeichnis eine Datei mit dem Namen index.html.

Fügen Sie in der Datei index.html den folgenden Beispielcode ein:

calendar/quickstart/index.html

Auf GitHub ansehen

<!DOCTYPE html>
<html>
  <head>
    <title>Google Calendar API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Google Calendar API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '<YOUR_CLIENT_ID>';
      const API_KEY = '<YOUR_API_KEY>';

      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],
        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,
          callback: '', // defined later
        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listUpcomingEvents();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print the summary and start datetime/date of the next ten events in
       * the authorized user's calendar. If no events are found an
       * appropriate message is printed.
       */
      async function listUpcomingEvents() {
        let response;
        try {
          const request = {
            'calendarId': 'primary',
            'timeMin': (new Date()).toISOString(),
            'showDeleted': false,
            'singleEvents': true,
            'maxResults': 10,
            'orderBy': 'startTime',
          };
          response = await gapi.client.calendar.events.list(request);
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
        }

        const events = response.result.items;
        if (!events || events.length == 0) {
          document.getElementById('content').innerText = 'No events found.';
          return;
        }
        // Flatten to string to display
        const output = events.reduce(
            (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
            'Events:\n');
        document.getElementById('content').innerText = output;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>

Ersetzen Sie Folgendes:

YOUR_CLIENT_ID: die Client-ID, die Sie beim Autorisieren von Anmeldedaten für eine Webanwendung erstellt haben.
YOUR_API_KEY: den API-Schlüssel, den Sie als Voraussetzung erstellt haben.

Beispiel ausführen

Installieren Sie das Paket http-server in Ihrem Arbeitsverzeichnis:
```
npm install http-server
```
Starten Sie einen Webserver in Ihrem Arbeitsverzeichnis:
```
npx http-server -p 8000
```

Rufen Sie in Ihrem Browser http://localhost:8000 auf.
Sie werden aufgefordert, den Zugriff zu autorisieren:
1. Wenn Sie noch nicht in Ihrem Google-Konto angemeldet sind, melden Sie sich an, wenn Sie dazu aufgefordert werden. Wenn Sie in mehreren Konten angemeldet sind, wählen Sie ein Konto für die Autorisierung aus.
2. Klicken Sie auf Akzeptieren.

Ihre JavaScript-Anwendung wird ausgeführt und ruft die Google Calendar API auf.