JavaScript – krótkie wprowadzenie

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

Krótkie wprowadzenia do Google Workspace wykorzystują biblioteki klienta interfejsu API do obsługi niektórych szczegółów procesu uwierzytelniania i autoryzacji. Zalecamy używanie bibliotek klienta do własnych aplikacji. W tym krótkim wprowadzeniu użyto uproszczonej metody uwierzytelniania, która jest odpowiednia dla środowiska testowego. W przypadku środowiska produkcyjnego zalecamy zapoznanie się z uwierzytelnianiem i autoryzacją przed wybraniem danych logowania odpowiednich dla aplikacji.

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

Cele

• skonfigurować środowisko,
• Skonfiguruj sampel.
• Uruchom próbkę.

Wymagania wstępne

• Zainstalowano Node.js i npm.
• Projekt Google Cloud.

• domenę Google Workspace z włączonym dostępem przez interfejsy API,
• Konto Google w tej domenie z uprawnieniami administratora.

Konfigurowanie środowiska

Aby skorzystać z tego krótkiego wprowadzenia, 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ć 1 lub więcej interfejsów API.

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

  Włączanie interfejsu API

Konfigurowanie ekranu zgody OAuth

Jeśli do wykonania tego krótkiego wprowadzenia używasz nowego projektu Google Cloud, skonfiguruj ekran zgody OAuth i dodaj siebie jako użytkownika testowego. Jeśli masz już za sobą ten etap w przypadku Twojego projektu Cloud, przejdź do następnej sekcji.

1. W konsoli Google Cloud otwórz Menu > Interfejsy API i usługi > Ekran akceptacji OAuth.

   Otwórz ekran zgody OAuth

2. Wybierz typ użytkownika aplikacji, a następnie kliknij Utwórz.
3. Wypełnij formularz rejestracji aplikacji, a potem kliknij Zapisz i kontynuuj.

4. Na razie możesz pominąć dodawanie zakresów i kliknąć Zapisz i kontynuuj. Gdy w przyszłości będziesz tworzyć aplikację do użytku poza organizacją Google Workspace, musisz dodać i zweryfikować zakresy autoryzacji wymagane przez tę aplikację.

5. Jeśli jako typ użytkownika wybierzesz Zewnętrzny, dodaj użytkowników testowych:
   1. W sekcji Użytkownicy testowi kliknij Dodaj użytkowników.
   2. Wpisz swój adres e-mail i innych upoważnionych użytkowników testowych, a następnie kliknij Zapisz i kontynuuj.
6. Przejrzyj podsumowanie rejestracji aplikacji. Aby wprowadzić zmiany, kliknij Edytuj. Jeśli rejestracja aplikacji wygląda dobrze, kliknij Back to Dashboard (Powrót do panelu).

Autoryzacja danych logowania dla aplikacji internetowej

Aby uwierzytelnić się jako użytkownik 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 pojedynczej aplikacji na serwerach OAuth Google. Jeśli Twoja aplikacja działa na wielu platformach, musisz utworzyć oddzielny identyfikator klienta dla każdej z nich.

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

   Otwórz stronę Dane logowania

2. Kliknij Utwórz dane logowania > Identyfikator klienta OAuth.
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 powiązane z aplikacją:
   • Aplikacje po stronie klienta (JavaScript) – w sekcji Autoryzowane źródła JavaScript kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI, którego chcesz używać na potrzeby żądań przeglądarki. Identyfikuje ona domeny, z których aplikacja może wysyłać żądania interfejsu API do serwera 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, do którego serwer OAuth 2.0 może wysyłać odpowiedzi.
6. Kliknij Utwórz. Pojawi się ekran utworzony przez klienta OAuth z nowym identyfikatorem klienta i tajnym kluczem klienta.

   Zapisz identyfikator klienta. Tajne klucze klienta nie są używane w przypadku aplikacji internetowych.

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

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

Tworzenie klucza interfejsu API

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

   Otwórz stronę Dane logowania

2. Kliknij Utwórz dane logowania > Klucz interfejsu API.
3. Zostanie wyświetlony 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” w danych logowania do projektu.
   • Kliknij Ogranicz klucz, aby zaktualizować ustawienia zaawansowane i ograniczyć wykorzystanie klucza interfejsu API. Więcej informacji znajdziesz w artykule Stosowanie ograniczeń klucza interfejsu API.

Konfigurowanie fragmentu

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

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

   people/quickstart/index.html

   Wyświetl w GitHubie

   <!DOCTYPE html>
   <html>
     <head>
       <title>People API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>People 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/people/v1/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/contacts.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 listConnectionNames();
           };
   
           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 display name if available for 10 connections.
          */
         async function listConnectionNames() {
           let response;
           try {
             // Fetch first 10 files
             response = await gapi.client.people.people.connections.list({
               'resourceName': 'people/me',
               'pageSize': 10,
               'personFields': 'names,emailAddresses',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const connections = response.result.connections;
           if (!connections || connections.length == 0) {
             document.getElementById('content').innerText = 'No connections found.';
             return;
           }
           // Flatten to string to display
           const output = connections.reduce(
               (str, person) => {
                 if (!person.names || person.names.length === 0) {
                   return `${str}Missing display name\n`;
                 }
                 return `${str}${person.names[0].displayName}\n`;
               },
               'Connections:\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 stronę http://localhost:8000.
4. Pojawi się prośba o autoryzację dostępu:
   1. W razie potrzeby zaloguj się na konto Google, gdy pojawi się taka prośba. Jeśli w danym momencie korzystasz z wielu kont, wybierz jedno, którego chcesz użyć do autoryzacji.
   2. Kliknij Accept (Zaakceptuj).

Twoja aplikacja JavaScript uruchamia i wywołuje interfejs People API.

Dalsze kroki

• Rozwiązywanie problemów z uwierzytelnianiem i autoryzacją
• Dokumentacja API People API
• Sekcja google-api-javascript-client na GitHubie