Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

JavaScript – Kurzanleitung

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

In den Kurzanleitungen wird beschrieben, wie Sie eine Anwendung einrichten und ausführen, die eine Google Workspace API aufruft. In dieser Kurzanleitung wird ein vereinfachter Authentifizierungsansatz verwendet, der für eine Testumgebung geeignet ist. Für eine Produktionsumgebung empfehlen wir, sich mit der Authentifizierung und Autorisierung vertraut zu machen, bevor Sie die Zugriffsanmeldedaten auswählen, die für Ihre Anwendung geeignet sind.

In dieser Kurzanleitung werden die empfohlenen API-Clientbibliotheken von Google Workspace verwendet, um einige Details des Authentifizierungs- und Autorisierungsablaufs zu verarbeiten.

Ziele

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

Vorbereitung

Node.js und npm sind installiert.
Ein Google Cloud-Projekt

Ein Google-Konto mit aktiviertem Gmail.

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 Gmail 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.

Öffnen Sie in der Google API Console das Menü > Google Auth-Plattform > Branding.
Zum Branding
Wenn Sie die Google Auth Platform bereits konfiguriert haben, können Sie die folgenden Einstellungen für den OAuth-Zustimmungsbildschirm unter Branding, Zielgruppe und Datenzugriff konfigurieren. Wenn Sie die Meldung Google Auth Platform 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 für Nutzersupport 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 Kontaktdaten eine E‑Mail-Adresse ein, unter der Sie über Änderungen an Ihrem Projekt benachrichtigt werden können.
Klicken Sie auf Weiter.
Lesen Sie unter Abschließen die Richtlinie zu Nutzerdaten für Google API-Dienste und wählen Sie 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 Ihre App benötigt. Weitere Informationen finden Sie im vollständigen Leitfaden 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 den OAuth-Servern von Google verwendet. Wenn Ihre App auf mehreren Plattformen ausgeführt wird, müssen Sie für jede Plattform eine separate Client-ID erstellen.

Öffnen Sie in der Google Cloud Console das Menü > Google Auth-Plattform > Clients.
Zu „Clients“
Klicken Sie auf 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 für Ihre 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 identifiziert, von denen 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.
Optional: Wenn Ihre App ein KI-Agent ist, der Aktionen im Namen von Nutzern ausführt, wählen Sie Diesen Client für einen KI-basierten Agenten verwenden aus. Wenn Ihre App sowohl KI-Agent-Workflows als auch Standardnutzerfunktionen unterstützt, erstellen Sie für jeden einen separaten OAuth-Client. Sie können diese Einstellung nach dem Erstellen des Clients nicht mehr ändern.
Klicken Sie auf Erstellen.
Die neu erstellten Anmeldedaten werden unter OAuth 2.0-Client-IDs angezeigt.

Clientschlüssel werden nicht für Webanwendungen verwendet.
Speichern Sie die Client-ID für die spätere Verwendung in dieser Kurzanleitung.

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 zur Verwendung im Code Ihrer App zu kopieren. Der API-Schlüssel ist auch im Bereich „API-Schlüssel“ der Anmeldedaten Ihres Projekts zu finden.
- Damit eine nicht autorisierte Verwendung verhindert wird, sollten Sie einschränken, wo und für welche APIs der API-Schlüssel verwendet werden kann. Weitere Informationen finden Sie unter API-Einschränkungen hinzufügen.

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:

gmail/quickstart/index.html

Auf GitHub ansehen

<!DOCTYPE html>
<html>
  <head>
    <title>Gmail API Quickstart</title>
    <meta charset="utf>-8&<quot;> /
<  /h>ead
 < >body
    pGmail API <Qu>icksta<rt/p

    !--Add buttons to initiate auth sequence and >sign <out--
    button id="authorize_button" onclick>="ha<ndleAut>hClic<k()"Authorize/button
    button id="signout_but>ton"<; oncli>ck=&qu<ot;handleSignoutClick()"Sign Out/button

 ><   p>re id=<"content" style=&qu>ot;white-space: pre-wrap;"/pre

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

      // TODO(developer): S<et to client I>D and API key from the Dev<eloper Conso>le
      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/gmail/v1/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/gmail.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 = 'vis>ible';
        }
      }

      /**
       *  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 listLabels();
        };

        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 all Labels in the authorized user's inbox. If no labels
       * are found an appropriate message is printed.
       */
      async function listLabels() {
        let response;
        try {
          response = await gapi.client.gmail.users.labels.list({
            'userId': 'me',
          });
        } catch (err) {
          document.getElementById('content').innerText = err.message;
          return;
   >     }
        const labels = response.result.labels;
        if (!labels || labels.length == 0) {
          document.getElemen<tById(&>#39;c<ontent').innerText = 'No labels found.';
          return;
        }><
      >  // <Flatten to string to display
        const output = labels.reduce(
            (str,>< label)> = <`${st>r<}${la>bel.name}\n`,
            'Labels:\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: der API-Schlüssel, den Sie erstellt haben.

Beispiel ausführen

Installieren Sie in Ihrem Arbeitsverzeichnis das Paket http-server:
```
npm install http-server
```
Starten Sie in Ihrem Arbeitsverzeichnis einen Webserver:
```
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 Gmail API auf.

Nächste Schritte

Google Workspace APIs im APIs Explorer ausprobieren

JavaScript – Kurzanleitung Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.