Krótkie wprowadzenie do JavaScript

Przewodniki szybkiego startu wyjaśniają, jak skonfigurować i uruchamiać aplikację, która wywołuje interfejs Google Workspace API.

Szybkie porady dotyczące Google Workspace korzystają z bibliotek klienta interfejsu API do obsługi niektórych szczegółów procesu uwierzytelniania i autoryzacji. Zalecamy używanie bibliotek klienta w przypadku własnych aplikacji. W tym krótkim wprowadzeniu użyjemy uproszczonego podejścia do uwierzytelniania, które jest odpowiednie dla środowiska testowego. W przypadku środowiska produkcyjnego zalecamy zapoznanie się z informacjami na temat uwierzytelniania i autoryzacji, zanim wybierzesz odpowiednie dla swojej aplikacji poświadczenia dostępu.

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

Cele

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

Wymagania wstępne

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

• konto Google for Education z włączoną usługą Google Classroom,

Konfigurowanie środowiska

Aby rozpocząć 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 Classroom API.

  Włączanie interfejsu API

Konfigurowanie ekranu zgody OAuth

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

1. W konsoli Google Cloud otwórz Menu menu > > Identyfikacja marki.

   Przejdź do sekcji Promowanie marki

2. Jeśli masz już skonfigurowany projekt , możesz skonfigurować te ustawienia ekranu zgody OAuth: Markowanie, Odbiorcy i Dostęp do danych. Jeśli zobaczysz komunikat nie skonfigurowano, kliknij Rozpocznij:
1. W sekcji Informacje o aplikacji w polu Nazwa aplikacji wpisz nazwę aplikacji.
2. W sekcji Adres e-mail zespołu pomocy wybierz adres e-mail zespołu pomocy, na który użytkownicy będą mogli się z Tobą kontaktować w sprawie pytań dotyczących 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ędą wysyłane powiadomienia o zmianach w projekcie.
7. Kliknij Dalej.
8. W sekcji Zakończ zapoznaj się z zasadami dotyczącymi danych użytkownika w usługach interfejsu API Google, a potem, jeśli się z nimi zgadzasz, kliknij Akceptuję zasady dotyczące danych użytkownika w usługach interfejsu API Google.
9. Kliknij Dalej.
10. Kliknij Utwórz.
3. Na razie możesz pominąć dodawanie zakresów. Gdy w przyszłości 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 przypadku aplikacji internetowej

Aby uwierzytelniać użytkowników i dostępować do ich danych 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 kliknij Menu menu > > Klienci.

   Otwórz stronę Klientów

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 JavaScriptu kliknij Dodaj identyfikator URI. Następnie wpisz identyfikator URI, który ma być używany do żądań przeglądarki. Określa 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 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. Tajne klucze klienta nie są używane w przypadku aplikacji internetowych.

Zapisz 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 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 API.
   • Kliknij Kopiuj content_copy, 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 zaktualizować ustawienia zaawansowane i ograniczyć użycie klucza API, kliknij Ogranicz klucz. Więcej informacji znajdziesz w artykule Stosowanie ograniczeń 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:

   classroom/quickstart/index.html

   Wyświetl w GitHubie
   <!DOCTYPE html>
   <html>
     <head>
       <title>Classroom API Quickstart</title>
       <meta charset="utf-8" />
     </head>
     <body>
       <p>Classroom 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://classroom.googleapis.com/$discovery/rest';
   
         // Authorization scopes required by the API; multiple scopes can be
         // included, separated by spaces.
         const SCOPES = 'https://www.googleapis.com/auth/classroom.courses.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 listCourses();
           };
   
           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 of the first 10 courses the user has access to. If
          * no courses are found an appropriate message is printed.
          */
         async function listCourses() {
           let response;
           try {
             response = await gapi.client.classroom.courses.list({
               pageSize: 10,
             });
           } catch (err) {
             document.getElementById('content').innerText = err.message;
             return;
           }
   
           const courses = response.result.courses;
           if (!courses || courses.length == 0) {
             document.getElementById('content').innerText = 'No courses found.';
             return;
           }
           // Flatten to string to display
           const output = courses.reduce(
               (str, course) => `${str}${course.name}\n`,
               'Courses:\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 logowania w aplikacji internetowej.
   • YOUR_API_KEY: klucz interfejsu API utworzony przez Ciebie jako wymagany wstępnie.

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. Otwórz stronę http://localhost:8000 w przeglądarce.
4. Pojawi się prośba o autoryzację dostępu:
   1. Jeśli nie zalogowano się na konto Google, zaloguj się, gdy pojawi się taka prośba. Jeśli logujesz się na kilka kont, wybierz jedno konto, którego chcesz użyć do autoryzacji.
   2. Kliknij Accept (Zaakceptuj).

Twoja aplikacja JavaScript uruchamia się i wywołuje interfejs Google Classroom API.

Dalsze kroki

• Rozwiązywanie problemów z uwierzytelnianiem i autoryzacją
• Dokumentacja Classroom API
• sekcja google-api-javascript-client w GitHubie,