Krótkie wprowadzenie do JavaScript

Utwórz aplikację internetową w 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żyjemy uproszczonego podejścia do uwierzytelniania, które jest odpowiednie w środowisku testowym. W przypadku środowiska produkcyjnego zalecamy zapoznanie się z informacjami o uwierzytelnianiu i autoryzacji przed wybraniem danych logowania odpowiednich dla Twojej aplikacji.

W tym przewodniku Szybki start używane są zalecane biblioteki klienta interfejsu API Google Workspace, które obsługują niektóre szczegóły procesu uwierzytelniania i autoryzacji.

Cele

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

Wymagania wstępne

• Node.js i npm są zainstalowane.
• Projekt Google Cloud.

• konto Google z włączoną usługą Gmail,

Konfigurowanie środowiska

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

Włącz API

Zanim zaczniesz korzystać z interfejsów Google API, musisz je włączyć w projekcie Google Cloud. W jednym projekcie Google Cloud możesz włączyć co najmniej 1 interfejs API.

• W konsoli Google Cloud włącz interfejs Gmail API.

  Włączanie interfejsu API

Konfigurowanie ekranu zgody OAuth

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

1. W konsoli Google Cloud otwórz Menu  > > Branding.

   Otwórz Promowanie marki

2. Jeśli masz już skonfigurowany , możesz skonfigurować te ustawienia ekranu zgody OAuth w sekcjach Branding, Odbiorcy i Dostęp do danych. Jeśli zobaczysz komunikat Jeszcze nie skonfigurowano, kliknij Rozpocznij:
1. W sekcji Informacje o aplikacji w polu Nazwa aplikacji wpisz nazwę aplikacji.
2. W sekcji Adres e-mail pomocy dla użytkowników wybierz adres e-mail, na który użytkownicy mogą pisać, jeśli mają pytania dotyczące ich zgody.
3. Kliknij Dalej.
4. W sekcji Odbiorcy wybierz Wewnętrzny.
5. Kliknij Dalej.
6. W sekcji Dane kontaktowe wpisz adres e-mail, na który będziemy wysyłać powiadomienia o wszelkich zmianach w Twoim projekcie.
7. Kliknij Dalej.
8. W sekcji Zakończ zapoznaj się z zasadami dotyczącymi danych użytkownika w usługach interfejsów API Google i jeśli je akceptujesz, kliknij 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. W przyszłości, gdy będziesz tworzyć aplikację do użytku poza organizacją Google Workspace, musisz zmienić Typ użytkownika na Zewnętrzny. Następnie dodaj zakresy autoryzacji wymagane przez aplikację. Więcej informacji znajdziesz w pełnym przewodniku Konfigurowanie zgody OAuth.

Autoryzowanie danych logowania w aplikacji internetowej

Aby uwierzytelniać użytkowników i uzyskiwać dostęp do danych użytkowników w aplikacji, musisz utworzyć co najmniej 1 identyfikator klienta OAuth 2.0. Identyfikator klienta wskazuje konkretną aplikację na serwerach OAuth Google. Jeśli Twoja aplikacja działa na kilku platformach, musisz utworzyć osobny identyfikator klienta dla każdej z nich.

1. W konsoli Google Cloud otwórz Menu  > > Klienci.

   Otwórz stronę Klienci

2. Kliknij Utwórz klienta.
3. Kliknij Typ aplikacji > Aplikacja internetowa.
4. W polu Nazwa wpisz nazwę danych logowania. Ta nazwa jest widoczna tylko w konsoli Google Cloud.
5. Dodaj autoryzowane identyfikatory URI związane z Twoją aplikacją:
   • Aplikacje po stronie klienta (JavaScript) – w sekcji Autoryzowane źródła JavaScriptu kliknij Dodaj URI. Następnie wpisz identyfikator URI, który ma być używany w żądaniach przeglądarki. Określa domeny, z których aplikacja może wysyłać żądania 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, do którego serwer OAuth 2.0 może wysyłać odpowiedzi.
6. Kliknij Utwórz.

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

   Zapisz identyfikator klienta. W przypadku aplikacji internetowych nie używa się kluczy klienta.

Zapisz te dane logowania, ponieważ będą potrzebne w dalszej części tego krótkiego wprowadzenia.

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 do użycia w kodzie aplikacji. Klucz interfejsu API można też znaleźć w sekcji „Klucze interfejsu API” w danych logowania projektu.
   • Kliknij Ogranicz klucz, aby zaktualizować ustawienia zaawansowane i ograniczyć użycie klucza interfejsu API. Więcej informacji znajdziesz w artykule Stosowanie ograniczeń dotyczących kluczy interfejsu API.

Konfigurowanie próbki

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

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

   gmail/quickstart/index.html

   Wyświetl w GitHubie
   <!DOCTYPE html>
   <html>
     <head>
       <title>Gmail API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Gmail 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/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 = '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 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.getElementById('content').innerText = 'No labels found.';
             return;
           }
           // Flatten to string to display
           const output = labels.reduce(
               (str, label) => `${str}${label.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 następujące elementy:

   • YOUR_CLIENT_ID: identyfikator klienta utworzony podczas autoryzowania danych logowania w aplikacji internetowej.
   • YOUR_API_KEY: klucz interfejsu API utworzony jako wymaganie wstępne.

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
   

3. W przeglądarce otwórz http://localhost:8000.
4. 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 jedno z nich, aby użyć go do autoryzacji.
   2. Kliknij Akceptuję.

Aplikacja JavaScript działa i wywołuje interfejs Gmail API.

Dalsze kroki

• Rozwiązywanie problemów z uwierzytelnianiem i autoryzacją
• Dokumentacja interfejsu Gmail API
• sekcji google-api-javascript-client GitHub.