JavaScript-Kurzanleitung

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

Google Workspace-Kurzanleitungen verwenden die API-Clientbibliotheken, um einige Details des Authentifizierungs- und Autorisierungsvorgangs zu verarbeiten. Wir empfehlen, für Ihre eigenen Anwendungen die Clientbibliotheken zu verwenden. In dieser Kurzanleitung wird ein vereinfachter Authentifizierungsansatz verwendet, der sich für eine Testumgebung eignet. In einer Produktionsumgebung sollten Sie sich mit den Informationen zur Authentifizierung und Autorisierung vertraut machen, bevor Sie für Ihre Anwendung geeignete Zugriffsdaten auswählen.

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

Zielsetzungen

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

Voraussetzungen

  • Eine Google Workspace-Domain mit aktiviertem API-Zugriff
  • Ein Google-Konto in dieser Domain mit Administratorberechtigungen.

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 Admin SDK API.

    API aktivieren

Anmeldedaten für eine Webanwendung autorisieren

Damit Sie sich als Endnutzer authentifizieren und auf Nutzerdaten in Ihrer Anwendung zugreifen können, müssen Sie eine oder mehrere OAuth 2.0-Client-IDs erstellen. Mit einer Client-ID kann eine einzelne Anwendung den OAuth-Servern von Google zugeordnet werden. Wenn Ihre App auf mehreren Plattformen ausgeführt wird, müssen Sie für jede Plattform eine separate Client-ID erstellen.
  1. Gehen Sie in der Google Cloud Console zu „Menü“ > APIs und Dienste > Anmeldedaten.

    Zu den Anmeldedaten

  2. Klicken Sie auf Anmeldedaten erstellen > OAuth-Client-ID.
  3. Klicken Sie auf Anwendungstyp > Webanwendung.
  4. Geben Sie in das Feld Name einen Namen für die Anmeldedaten ein. Dieser Name wird nur in der Google Cloud Console angezeigt.
  5. 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 ein, der für Browseranfragen verwendet werden soll. Damit werden die Domains identifiziert, von denen aus Ihre Anwendung API-Anfragen an den OAuth 2.0-Server senden kann.
    • Serverseitige Anwendungen (Java, Python und mehr): 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.
  6. Klicken Sie auf Erstellen. Der Bildschirm „OAuth-Client erstellt“ wird mit Ihrer neuen Client-ID und Ihrem Clientschlüssel angezeigt.

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

  7. Klicken Sie auf OK. Die neu erstellten Anmeldedaten werden unter OAuth 2.0-Client-IDs angezeigt.

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

API-Schlüssel erstellen

  1. Gehen Sie in der Google Cloud Console zu „Menü“ > APIs und Dienste > Anmeldedaten.

    Zu den Anmeldedaten

  2. Klicken Sie auf Anmeldedaten erstellen > API-Schlüssel.
  3. Ihr neuer API-Schlüssel wird angezeigt.
    • Klicken Sie auf „Kopieren“ , um Ihren API-Schlüssel zur Verwendung im Code Ihrer App zu kopieren. Sie finden ihn 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 Nutzung Ihres API-Schlüssels einzuschränken. Weitere Informationen finden Sie unter Einschränkungen für API-Schlüssel anwenden.

Beispielanwendung einrichten

  1. Erstellen Sie in Ihrem Arbeitsverzeichnis eine Datei mit dem Namen index.html.
  2. Fügen Sie den folgenden Beispielcode in die Datei index.html ein:

    adminSDK/verzeichnis/index.html
    <!DOCTYPE html>
    <html>
      <head>
        <title>Directory API Quickstart</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>Directory 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/admin/directory_v1/rest';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/admin.directory.user.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 listUsers();
            };
    
            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 first 10 users in the domain.
           */
          async function listUsers() {
            let response;
            try {
              const request = {
                'customer': 'my_customer',
                'maxResults': 10,
                'orderBy': 'email',
              };
              response = await gapi.client.directory.users.list(request);
            } catch (err) {
              document.getElementById('content').innerText = err.message;
              return;
            }
    
            const users = response.result.users;
            if (!users || users.length == 0) {
              document.getElementById('content').innerText = 'No users found.';
              return;
            }
            // Flatten to string to display
            const output = users.reduce(
                (str, user) => `${str}${user.primaryEmail} (${user.name.fullName})\n`,
                'Users:\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>

    Dabei gilt:

Beispiel ausführen

  1. Installieren Sie in Ihrem Arbeitsverzeichnis das Paket http-server:

    npm install http-server
    
  2. Starten Sie in Ihrem Arbeitsverzeichnis einen Webserver:

    npx http-server -p 8000
    
  3. Rufen Sie http://localhost:8000 in Ihrem Browser auf.

  4. Wenn Sie das Beispiel zum ersten Mal ausführen, werden Sie aufgefordert, den Zugriff zu autorisieren:

    1. Wenn Sie noch nicht in Ihrem Google-Konto angemeldet sind, werden Sie aufgefordert, sich anzumelden. Wenn Sie in mehreren Konten angemeldet sind, wählen Sie ein Konto für die Autorisierung aus.
    2. Klicken Sie auf Akzeptieren.
    3. Kopieren Sie den Code aus dem Browser, fügen Sie ihn in die Eingabeaufforderung ein und drücken Sie Enter.

    Autorisierungsinformationen werden im Dateisystem gespeichert, sodass Sie beim nächsten Ausführen des Beispielcodes nicht zur Autorisierung aufgefordert werden.

Sie haben Ihre erste JavaScript-Anwendung erstellt, die Anfragen an die Admin SDK API sendet.

Nächste Schritte