Krótkie wprowadzenie do JavaScript

utworzyć aplikację internetową w języku JavaScript, która wysyła żądania do interfejsu Gmail API;

Przewodniki Szybki start wyjaśniają, jak skonfigurować i uruchomić aplikację, która wywołuje interfejs API Google Workspace. W tym krótkim wprowadzeniu używamy uproszczonego podejścia do uwierzytelniania, które jest odpowiednie dla środowiska testowego. W przypadku środowiska produkcyjnego zalecamy zapoznanie się z informacjami o uwierzytelnianiu i autoryzacji przed wybraniem danych logowania odpowiednich dla Twojej aplikacji.

W tym krótkim wprowadzeniu używamy zalecanych bibliotek klienta interfejsu API Google Workspace do obsługi niektórych szczegółów procesu uwierzytelniania i autoryzacji.

Cele

  • skonfigurować środowisko,
  • Skonfiguruj próbkę.
  • Uruchom przykładowy kod.

Wymagania wstępne

  • Konto Google z włączonym Gmailem.

Konfigurowanie środowiska

Aby ukończyć ten samouczek, skonfiguruj środowisko.

Włącz API

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

Konfigurowanie ekranu zgody OAuth

Jeśli do wykonania zadań z tego krótkiego wprowadzenia posłużył Ci nowy, specjalnie utworzony projekt w chmurze Google Cloud, skonfiguruj ekran zgody protokołu OAuth. Jeśli ten krok został już wykonany w projekcie w chmurze, przejdź do następnej sekcji.

  1. W Konsoli interfejsów API Google kliknij Menu  > Platforma Google Auth > Marka.

    Przejdź na stronę Elementy marki

  2. Jeśli platforma uwierzytelniania Google została już skonfigurowana, możesz skonfigurować te ustawienia ekranu zgody OAuth w sekcjach Marka, Odbiorcy i Dostęp do danych. Jeśli zobaczysz komunikat Platforma uwierzytelniania Google nie została jeszcze skonfigurowana, kliknij Rozpocznij:
    1. W sekcji Informacje o aplikacji w polu Nazwa aplikacji wpisz nazwę aplikacji.
    2. W polu Adres e-mail dla użytkowników potrzebujących pomocy wybierz adres e-mail, na który użytkownicy mogą pisać, aby się z Tobą skontaktować, jeśli mają pytania dotyczące zgody.
    3. Kliknij Dalej.
    4. W sekcji Odbiorcy wybierz Wewnętrzny.
    5. Kliknij Dalej.
    6. W sekcji Informacje kontaktowe wpisz adres e-mail, na który chcesz otrzymywać powiadomienia o zmianach w projekcie.
    7. Kliknij Dalej.
    8. W sekcji Finish (Zakończ) zapoznaj się z zasadami dotyczącymi danych użytkownika w usługach interfejsów API Google i jeśli się z nimi zgadzasz, zaznacz pole I agree to the Google API Services: User Data Policy (Akceptuję zasady dotyczące danych użytkownika w usługach interfejsów API Google).
    9. Kliknij Dalej.
    10. Kliknij Utwórz.
  3. Na razie możesz pominąć dodawanie zakresów. Jeśli w przyszłości utworzysz aplikację do użytku poza organizacją Google Workspace, musisz zmienić Typ użytkownika na Zewnętrzny. Następnie dodaj zakresy autoryzacji, których wymaga Twoja aplikacja. Więcej informacji znajdziesz w pełnym przewodniku Konfigurowanie ekranu zgody OAuth.

Autoryzowanie danych logowania aplikacji internetowej

Aby uwierzytelniać użytkowników i uzyskiwać 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 pojedynczej aplikacji na serwerach OAuth Google. Jeśli aplikacja działa na wielu platformach, musisz utworzyć osobny identyfikator klienta dla każdej z nich.
  1. W konsoli Google Cloud otwórz Menu  > Platforma uwierzytelniania Google > Klienty.

    Otwórz stronę Klienty

  2. Kliknij Utwórz klienta.
  3. Kliknij Typ aplikacji > Aplikacja internetowa.
  4. W polu Nazwa wpisz nazwę danych logowania. Ta nazwa jest wyświetlana tylko w konsoli Google Cloud.
  5. Dodaj autoryzowane identyfikatory URI powiązane z Twoją aplikacją:
    • Aplikacje po stronie klienta (JavaScript) – w sekcji Autoryzowane źródła JavaScript kliknij Dodaj URI. Następnie wpisz identyfikator URI, który ma być używany w przypadku żądań przeglądarki. Identyfikuje domeny, z których aplikacja może wysyłać żądania do interfejsu API do serwera OAuth 2.0.
    • Aplikacje po stronie serwera (Java, Python i inne) – w sekcji Autoryzowane identyfikatory URI przekierowania kliknij Dodaj URI. Następnie wpisz identyfikator URI punktu końcowego, na który serwer OAuth 2.0 może wysyłać odpowiedzi.
  6. Opcjonalnie: jeśli Twoja aplikacja jest agentem AI, który wykonuje działania w imieniu użytkowników, wybierz Używaj tego klienta w przypadku agenta opartego na AI. Jeśli Twoja aplikacja obsługuje zarówno przepływy pracy agenta AI, jak i standardowe funkcje użytkownika, utwórz osobnych klientów OAuth dla każdego z tych przepływów i każdej z tych funkcji. Po utworzeniu klienta nie możesz zmienić tego ustawienia.
  7. Kliknij Utwórz.

    Nowo utworzone dane logowania pojawią się w sekcji Identyfikatory klienta OAuth 2.0.

    Pamiętaj, że klucze klienta nie są używane w aplikacjach internetowych.

  8. Zapisz identyfikator klienta, aby użyć go później w tym krótkim wprowadzeniu.

Tworzenie klucza interfejsu API

  1. W konsoli Google Cloud otwórz Menu  > Interfejsy API i usługi > Dane logowania.

    Przejdź do danych logowania

  2. Kliknij Utwórz dane logowania > Klucz interfejsu API.
  3. Wyświetli się nowy klucz interfejsu API.
    • Kliknij Kopiuj , aby skopiować klucz interfejsu API i użyć go w kodzie aplikacji. Klucz interfejsu API znajdziesz też w sekcji „Klucze interfejsu API” w danych logowania projektu.
    • Aby można było zapobiec nieautoryzowanemu użyciu, zalecamy ograniczenie miejsc i interfejsów API, w których można używać klucza interfejsu API. Więcej informacji znajdziesz w artykule o dodawaniu ograniczeń interfejsu API.

Konfigurowanie przykładu

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

  2. Wklej do pliku index.html ten przykładowy kod:

    gmail/quickstart/index.html
    <!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

    Zastąp te elementy:

Uruchamianie przykładu

  1. W katalogu roboczym zainstaluj pakiet http-server:

    npm install http-server

  2. W katalogu roboczym uruchom serwer WWW:

    npx http-server -p 8000
  1. W przeglądarce otwórz stronę http://localhost:8000.
  2. Zobaczysz prośbę o autoryzację dostępu:
    1. Jeśli nie jesteś zalogowany(-a) na konto Google, zaloguj się, gdy pojawi się prośba. Jeśli korzystasz z kilku kont, wybierz jedno, którego chcesz użyć do autoryzacji.
    2. Kliknij Akceptuję.

Aplikacja w JavaScripcie zostanie uruchomiona i wywoła interfejs Gmail API.

Dalsze kroki