JavaScript-Kurzanleitung

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

In Google Workspace-Kurzanleitungen werden einige Details des Authentifizierungs- und Autorisierungsvorgangs mithilfe der API-Clientbibliotheken verarbeitet. Wir empfehlen, die Clientbibliotheken für Ihre eigenen Anwendungen zu verwenden. In dieser Kurzanleitung wird ein vereinfachter Authentifizierungsansatz verwendet, der für eine Testumgebung geeignet ist. Für eine Produktionsumgebung sollten Sie sich über die Authentifizierung und Autorisierung informieren, bevor Sie die für Ihre Anwendung geeigneten Anmeldedaten auswählen.

JavaScript-Webanwendung erstellen, die Anfragen an die Google Sheets API sendet

Zielsetzungen

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

Voraussetzungen

  • Ein Google-Konto

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 Sheets API.

    API aktivieren

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

  1. Rufen Sie in der Google Cloud Console das Menü auf > APIs und Dienste > OAuth-Zustimmungsbildschirm.

    Zum OAuth-Zustimmungsbildschirm

  2. Wählen Sie den Nutzertyp für Ihre App aus und klicken Sie auf Erstellen.
  3. Füllen Sie das App-Registrierungsformular aus und klicken Sie dann auf Speichern und fortfahren.
  4. Vorerst können Sie das Hinzufügen von Bereichen überspringen und auf Speichern und fortfahren klicken. Wenn Sie in Zukunft eine Anwendung für die Verwendung außerhalb Ihrer Google Workspace-Organisation erstellen, müssen Sie die für die Anwendung erforderlichen Autorisierungsbereiche hinzufügen und überprüfen.

  5. Wenn Sie als Nutzertyp Extern ausgewählt haben, fügen Sie Testnutzer hinzu:
    1. Klicken Sie unter Testnutzer auf Nutzer hinzufügen.
    2. Geben Sie Ihre E-Mail-Adresse und alle weiteren autorisierten Testnutzer ein und klicken Sie dann auf Speichern und fortfahren.
  6. Prüfen Sie die Zusammenfassung der App-Registrierung. Wenn Sie Änderungen vornehmen möchten, klicken Sie auf Bearbeiten. Wenn die Anwendungsregistrierung in Ordnung ist, klicken Sie auf Zurück zum Dashboard.

Anmeldedaten für eine Webanwendung autorisieren

Um Endnutzer zu authentifizieren und auf Nutzerdaten in der Anwendung zuzugreifen, müssen Sie eine oder mehrere OAuth 2.0-Client-IDs erstellen. Eine Client-ID wird zur Identifizierung einer einzelnen Anwendung bei Googles OAuth-Servern verwendet. Wenn Ihre Anwendung auf mehreren Plattformen ausgeführt wird, müssen Sie für jede Plattform eine separate Client-ID erstellen.
  1. Klicken Sie in der Google Cloud Console auf das Dreistrich-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 im 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. Hiermit werden die Domains identifiziert, von denen deine Anwendung API-Anfragen an den OAuth 2.0-Server senden kann.
    • Serverseitige Apps (z. B. Java, Python und andere): 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. Öffnen Sie in der Google Cloud Console das Dreistrich-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 den API-Schlüssel zur Verwendung im Code Ihrer Anwendung zu kopieren. Den API-Schlüssel finden Sie auch in den Anmeldedaten Ihres Projekts im Abschnitt „API-Schlüssel“.
    • Klicken Sie auf Schlüssel einschränken, um die erweiterten Einstellungen zu aktualisieren und die Verwendung des 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:

    sheets/quickstart/index.html
    <!DOCTYPE html>
    <html>
      <head>
        <title>Sheets API Quickstart</title>
        <meta charset="utf-8" />
      </head>
      <body>
        <p>Sheets 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://sheets.googleapis.com/$discovery/rest?version=v4';
    
          // Authorization scopes required by the API; multiple scopes can be
          // included, separated by spaces.
          const SCOPES = 'https://www.googleapis.com/auth/spreadsheets.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 listMajors();
            };
    
            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 names and majors of students in a sample spreadsheet:
           * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
           */
          async function listMajors() {
            let response;
            try {
              // Fetch first 10 files
              response = await gapi.client.sheets.spreadsheets.values.get({
                spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
                range: 'Class Data!A2:E',
              });
            } catch (err) {
              document.getElementById('content').innerText = err.message;
              return;
            }
            const range = response.result;
            if (!range || !range.values || range.values.length == 0) {
              document.getElementById('content').innerText = 'No values found.';
              return;
            }
            // Flatten to string to display
            const output = range.values.reduce(
                (str, row) => `${str}${row[0]}, ${row[4]}\n`,
                'Name, Major:\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:

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
    
  1. Rufen Sie in Ihrem Browser http://localhost:8000 auf.
  2. Sie werden aufgefordert, den Zugriff zu autorisieren:
    1. Wenn Sie noch nicht in Ihrem Google-Konto angemeldet sind, melden Sie sich wieder 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 Accept.

In Ihrer JavaScript-Anwendung wird die Google Sheets API ausgeführt und aufgerufen.

Nächste Schritte