Ta strona została przetłumaczona przez Cloud Translation API.

Krótkie wprowadzenie do JavaScriptu

Krótkie wprowadzenie wyjaśniają, jak skonfigurować i uruchomić aplikację, która wywołuje interfejs Google Workspace API.

Krótkie wprowadzenia do Google Workspace wykorzystują biblioteki klienta API do obsługi niektórych szczegółów procesu uwierzytelniania i autoryzacji. Zalecamy używanie bibliotek klienta dla własnych aplikacji. Przed uruchomieniem przykładowej aplikacji każde krótkie wprowadzenie wymaga włączenia uwierzytelniania i autoryzacji. Jeśli nie wiesz, jak uwierzytelnić i autoryzować interfejsy API Google Workspace, przeczytaj artykuł Omówienie uwierzytelniania i autoryzacji.

Utwórz aplikację internetową w języku JavaScript, która wysyła żądania do interfejsu Google Drive API.

Cele

skonfigurować środowisko,
Skonfiguruj przykład.
uruchomić przykład.

Wymagania wstępne

Python 2.4 lub nowszy, aby uruchomić serwer WWW.
Projekt Google Cloud.

konto Google z włączonym Dyskiem Google,

Konfigurowanie środowiska

Aby dokończyć ten krótki przewodnik, skonfiguruj środowisko.

Włącz API

Zanim zaczniesz korzystać z interfejsów API Google, musisz włączyć je w projekcie Google Cloud. W jednym projekcie Google Cloud możesz włączyć jeden lub więcej interfejsów API.

W konsoli Google Cloud włącz interfejs Google Drive API.

Włączanie interfejsu API

Autoryzowanie danych logowania do aplikacji internetowej

Aby uwierzytelnić się jako użytkownik końcowy i uzyskać dostęp do danych użytkownika w aplikacji, musisz utworzyć co najmniej 1 identyfikator klienta OAuth 2.0. Identyfikator klienta służy do identyfikowania jednej aplikacji na serwerach OAuth Google. Jeśli aplikacja działa na wielu platformach, musisz utworzyć oddzielny identyfikator klienta dla każdej z nich.

W konsoli Google Cloud kliknij Menu > Interfejsy API i usługi > Dane logowania.
Otwórz stronę Dane logowania
Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
Kliknij Typ aplikacji > Aplikacja internetowa.
W polu Nazwa wpisz nazwę danych logowania. Ta nazwa jest widoczna tylko w konsoli Google Cloud.
Dodaj autoryzowane identyfikatory URI powiązane z aplikacją:
- Aplikacje po stronie klienta (JavaScript) – w sekcji Autoryzowane źródła JavaScriptu kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI, który będzie używany w żądaniach dotyczących przeglądarki. Określa domeny, z których aplikacja może wysyłać żądania do interfejsu API na serwer OAuth 2.0.
- Aplikacje po stronie serwera (Java, Python i inne) – w sekcji Autoryzowane identyfikatory URI przekierowania kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI punktu końcowego, na który serwer OAuth 2.0 może wysyłać odpowiedzi.
Kliknij Utwórz. Pojawi się ekran utworzony przez klienta OAuth zawierający nowy identyfikator klienta i tajny klucz klienta.
Zapisz identyfikator klienta. Tajne klucze klienta nie są używane w aplikacjach internetowych.
Kliknij OK. Nowo utworzone dane logowania pojawią się w sekcji Identyfikatory klienta OAuth 2.0.

Zanotuj te dane logowania, ponieważ będą potrzebne później w tym krótkim wprowadzeniu.

utworzysz klucz interfejsu API;

W konsoli Google Cloud kliknij Menu > Interfejsy API i usługi > Dane logowania.
Otwórz stronę Dane logowania
Kliknij Utwórz dane logowania > Klucz interfejsu API.
Pojawi się Twój nowy klucz interfejsu API.
- Kliknij Kopiuj , aby skopiować klucz interfejsu API do użycia w kodzie aplikacji. Klucz interfejsu API możesz też znaleźć w sekcji „Klucze interfejsu API” danych logowania do projektu.
- Kliknij Ogranicz klucz, aby zaktualizować ustawienia zaawansowane i ograniczyć użycie klucza interfejsu API. Więcej informacji znajdziesz w sekcji Stosowanie ograniczeń interfejsu API.

Skonfiguruj próbkę

W katalogu roboczym utwórz plik o nazwie index.html.

W pliku index.html wklej ten przykładowy kod:

drive/quickstart/index.html

Wyświetl w GitHubie

<!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 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/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({
          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 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>

Zastąp następujące elementy:

YOUR_CLIENT_ID: identyfikator klienta utworzony podczas autoryzacji danych aplikacji internetowej.
YOUR_API_KEY: klucz interfejsu API utworzony przez Ciebie jako wymagania wstępne.

Uruchom przykład

W katalogu roboczym uruchom serwer WWW:

Python 2.x

python -m SimpleHTTPServer 8000

Python 3.x

python3 -m http.server 8000

W przeglądarce otwórz stronę http://localhost:8000.
Przy pierwszym uruchomieniu próbki pojawi się prośba o autoryzację dostępu:
1. Jeśli nie zalogowano się na konto Google, pojawi się prośba o zalogowanie. Jeśli logujesz się na wiele kont, wybierz to, którego chcesz użyć do autoryzacji.
2. Kliknij Accept (Zaakceptuj).
3. Skopiuj kod z przeglądarki, wklej go w wierszu poleceń i naciśnij Enter.
Informacje o autoryzacji są przechowywane w systemie plików, więc przy następnym uruchomieniu przykładowego kodu nie pojawi się prośba o autoryzację.

Udało Ci się utworzyć pierwszą aplikację JavaScript, która wysyła żądania do interfejsu Google Drive API.