JavaScript – Kurzanleitung

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

In Kurzanleitungen wird beschrieben, wie Sie eine App 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 Authentifizierung und Autorisierung vertraut zu machen, bevor Sie die für Ihre App geeigneten Zugangsdaten auswählen.

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

Ziele

• Umgebung einrichten
• Beispiel einrichten
• Beispiel ausführen

Vorbereitung

• Node.js & npm installiert.
• Ein Google Cloud Projekt.

• Ein Google-Konto mit aktiviertem Google Drive

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

  API aktivieren

OAuth-Zustimmungsbildschirm konfigurieren

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

1. Gehen Sie in der Google API Console zu „Menü“ menu > Google Auth Platform > Branding.

   Zum Branding

2. 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 die Meldung Google Auth Platform noch nicht konfiguriert angezeigt wird, klicken Sie auf Jetzt starten:
1. Geben Sie unter Anwendungsinformationen im Feld Anwendungsname einen Namen für die App ein.
2. Wählen Sie unter E‑Mail-Adresse für Nutzersupport eine E‑Mail-Adresse für den Support aus, über die Nutzer Sie kontaktieren können, wenn sie Fragen zu ihrer Einwilligung haben.
3. Klicken Sie auf Weiter.
4. Wählen Sie unter Zielgruppe die Option Intern aus.
5. Klicken Sie auf Weiter.
6. Geben Sie unter Kontaktdaten eine E‑Mail-Adresse ein, über die Sie über Änderungen an Ihrem Projekt benachrichtigt werden können.
7. Klicken Sie auf Weiter.
8. Lesen Sie unter Abschließen die Richtlinie zu Nutzerdaten für Google API-Dienste. Wenn Sie damit einverstanden sind, wählen Sie Ich akzeptiere die Richtlinie zu Nutzerdaten für Google API-Dienste aus.
9. Klicken Sie auf Weiter.
10. Klicken Sie auf Erstellen.
3. Sie können das Hinzufügen von Bereichen vorerst überspringen. Wenn Sie später 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 in der vollständigen Anleitung zum Konfigurieren des OAuth-Zustimmungsbildschirms.

Anmeldedaten für eine Webanwendung autorisieren

Für die Authentifizierung als Endnutzer 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.

1. Gehen Sie in der Google API Console zu „Menü“ menu > Google Auth Platform > Clients.

   Zu „Clients“

2. Klicken Sie auf Client erstellen.
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 API Console angezeigt.
5. Fügen Sie autorisierte URIs hinzu, die mit Ihrer App verknüpft sind:
   • 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. Dadurch 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.
6. 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 für Webanwendungen nicht verwendet.

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

Beispiel einrichten

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

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

   drive/quickstart/index.html

   Auf GitHub ansehen
   <!DOCTYPE html>
   <html>
     <head>
       <title>Drive API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Drive 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 from the Developer Console
         const CLIENT_ID = '<YOUR_CLIENT_ID>';
   
         // Discovery doc URL for APIs used by the quickstart
         const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.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({
             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 listFiles();
           };
   
           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 metadata for first 10 files.
          */
         async function listFiles() {
           let response;
           try {
             response = await gapi.client.drive.files.list({
               'pageSize': 10,
               'fields': 'files(id, name)',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const files = response.result.files;
           if (!files || files.length == 0) {
             document.getElementById('content').innerText = 'No files found.';
             return;
           }
           // Flatten to string to display
           const output = files.reduce(
               (str, file) => `${str}${file.name} (${file.id})\n`,
               'Files:\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 erstellt haben als Sie Anmeldedaten für eine Webanwendung autorisiert haben.

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 in Ihrem Browser http://localhost:8000 auf.
4. 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 Drive API auf.

Nächste Schritte

• Google Workspace APIs im APIs Explorer ausprobieren
  • Probleme mit Authentifizierung und Autorisierung beheben
  • Referenzdokumentation zur Drive API
  • google-api-javascript-client Abschnitt auf GitHub