JavaScript – krótkie wprowadzenie

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

Krótkie wprowadzenie do Google Workspace wykorzystuje biblioteki klienta API do obsługi niektórych szczegóły procesu uwierzytelniania i autoryzacji. Zalecamy używasz bibliotek klienta we własnych aplikacjach. W tym krótkim wprowadzeniu użyto uproszczone metody uwierzytelniania odpowiednie do testowania dla środowiska. W środowisku produkcyjnym zalecamy zapoznanie się z uwierzytelnianie i autoryzacja przed wybór danych logowania odpowiednie dla Twojej aplikacji.

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

Cele

• skonfigurować środowisko,
• Skonfiguruj sampel.
• Uruchom przykład.

Wymagania wstępne

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

• konto Google;

Konfigurowanie środowiska

Aby ukończyć to krótkie wprowadzenie, skonfiguruj środowisko.

Włącz API

Zanim zaczniesz korzystać z interfejsów API Google, musisz je włączyć 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 Google Arkusze API.

  Włączanie interfejsu API

Konfigurowanie ekranu zgody OAuth

Jeśli korzystasz z nowego projektu Google Cloud, skonfiguruj ekranu zgody OAuth i dodaj siebie jako użytkownika testowego. Jeśli masz już konto Google ten krok został wykonany w Twoim projekcie Cloud, przejdź do następnej sekcji.

1. W konsoli Google Cloud otwórz menu menu. > Interfejsy API i Usługi > Ekran zgody OAuth.

   Otwórz ekran zgody OAuth

2. Jako Typ użytkownika wybierz Wewnętrzny i 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. w przyszłości, gdy utworzysz aplikację do użytku poza swoim Google Workspace, musisz zmienić Typ użytkownika na Zewnętrzny, a następnie: dodaj zakresy autoryzacji wymagane przez aplikację.

5. Przejrzyj podsumowanie rejestracji aplikacji. Aby wprowadzić zmiany, kliknij Edytuj. Jeśli aplikacja z rejestracji wszystko jest w porządku, kliknij Back to Dashboard (Powrót do panelu).

Autoryzacja danych logowania w aplikacji internetowej

Aby uwierzytelniać użytkowników i uzyskiwać dostęp do ich danych w aplikacji, musisz: utwórz co najmniej jeden identyfikator klienta OAuth 2.0. Identyfikator klienta służy do identyfikowania z jedną aplikacją na serwery OAuth Google. Jeśli Twoja aplikacja działa na wielu platformach, musisz utworzyć oddzielny identyfikator klienta dla każdej platformy.

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

   Przejdź do danych 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 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 identyfikator URI. Następnie wpisz identyfikator URI, którego chcesz używać w przypadku żądań przeglądarki. Identyfikuje 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 tworzenia klienta OAuth z nowym identyfikatorem klienta i tajnym kluczem klienta.

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

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

Zanotuj 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 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ę Twój nowy klucz interfejsu API.
   • Kliknij Kopiuj content_copy. aby skopiować klucz interfejsu API i użyć go w kodzie aplikacji. Kluczem interfejsu API może być również w „kluczach interfejsu API” danych logowania do projektu.
   • Kliknij Ogranicz klucz, aby zaktualizować ustawienia zaawansowane i ograniczyć korzystanie z klucza swojego 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. W pliku index.html wklej ten przykładowy kod:

   sheets/quickstart/index.html

   Wyświetl w GitHubie

   <!DOCTYPE html>
   <html>
     <head>
       <title>Sheets API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Sheets 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://sheets.googleapis.com/$discovery/rest?version=v4';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/spreadsheets.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 listMajors();
           };
   
           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 names and majors of students in a sample spreadsheet:
          * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
          */
         async function listMajors() {
           let response;
           try {
             // Fetch first 10 files
             response = await gapi.client.sheets.spreadsheets.values.get({
               spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
               range: 'Class Data!A2:E',
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
           const range = response.result;
           if (!range || !range.values || range.values.length == 0) {
             document.getElementById('content').innerText = 'No values found.';
             return;
           }
           // Flatten to string to display
           const output = range.values.reduce(
               (str, row) => `${str}${row[0]}, ${row[4]}\n`,
               'Name, Major:\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 przez Ciebie. gdy autoryzowane dane logowania dla aplikacji internetowej.
   • YOUR_API_KEY: klucz interfejsu API utworzony przez Ciebie jako warunek wstępny.

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 wejdź na http://localhost:8000.
4. Pojawi się prośba o autoryzację dostępu:
   1. Jeśli wyświetli się prośba o zalogowanie się na konto Google, zaloguj się. Jeśli używasz wielu kont, wybierz jedno konto do autoryzacji.
   2. Kliknij Accept (Zaakceptuj).

Aplikacja JavaScript zostanie uruchomiona i wywoła interfejs API Arkuszy Google.

Dalsze kroki

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