Краткое руководство по JavaScript

В кратких руководствах объясняется, как настроить и запустить приложение, вызывающее API Google Workspace.

В кратких руководствах по Google Workspace клиентские библиотеки API используются для обработки некоторых деталей процесса аутентификации и авторизации. Мы рекомендуем вам использовать клиентские библиотеки для ваших собственных приложений. В этом кратком руководстве используется упрощенный подход к аутентификации, подходящий для среды тестирования. В производственной среде мы рекомендуем изучить аутентификацию и авторизацию, прежде чем выбирать учетные данные доступа , подходящие для вашего приложения.

Создайте веб-приложение JavaScript, которое отправляет запросы к API Google Classroom.

Цели

• Настройте свою среду.
• Настройте образец.
• Запустите образец.

Предварительные условия

• Node.js и npm установлены.
• Проект Google Cloud .

• Учетная запись Google for Education с включенным Google Classroom.

Настройте свою среду

Чтобы завершить это краткое руководство, настройте свою среду.

Включить API

Прежде чем использовать API Google, вам необходимо включить их в проекте Google Cloud. Вы можете включить один или несколько API в одном проекте Google Cloud.

• В консоли Google Cloud включите API Google Classroom.

  Включить API

Настройка экрана согласия OAuth

Если для выполнения этого краткого руководства вы используете новый проект Google Cloud, настройте экран согласия OAuth. Если вы уже выполнили этот шаг для своего облачного проекта, перейдите к следующему разделу.

1. В консоли Google Cloud перейдите в Меню > > Брендинг .

   Перейти к Брендингу

2. Если вы уже настроили вы можете настроить следующие параметры экрана согласия OAuth в разделах «Брендинг» , «Аудитория» и «Доступ к данным» . Если вы видите сообщение, в котором говорится еще не настроено , нажмите «Начать» :
1. В разделе «Информация о приложении» в поле «Имя приложения» введите имя приложения.
2. В разделе «Электронная почта поддержки пользователей» выберите адрес электронной почты службы поддержки, по которому пользователи смогут связаться с вами, если у них возникнут вопросы относительно их согласия.
3. Нажмите Далее .
4. В разделе «Аудитория» выберите «Внутренняя» .
5. Нажмите Далее .
6. В разделе «Контактная информация » введите адрес электронной почты , по которому вы сможете получать уведомления о любых изменениях в вашем проекте.
7. Нажмите Далее .
8. В разделе «Готово » ознакомьтесь с Политикой пользовательских данных служб Google API и, если вы согласны, выберите Я согласен с Политикой пользовательских данных служб Google API: Политика пользовательских данных .
9. Нажмите Продолжить .
10. Нажмите Создать .
3. На данный момент вы можете пропустить добавление областей. В будущем, когда вы создадите приложение для использования за пределами вашей организации Google Workspace, вам необходимо изменить тип пользователя на Внешний . Затем добавьте области авторизации, необходимые вашему приложению. Дополнительные сведения см. в полном руководстве по настройке согласия OAuth .

Авторизация учетных данных для веб-приложения

Чтобы аутентифицировать конечных пользователей и получить доступ к пользовательским данным в вашем приложении, вам необходимо создать один или несколько идентификаторов клиентов OAuth 2.0. Идентификатор клиента используется для идентификации одного приложения на серверах Google OAuth. Если ваше приложение работает на нескольких платформах, вам необходимо создать отдельный идентификатор клиента для каждой платформы.

1. В консоли Google Cloud перейдите в Меню > > Клиенты .

   Перейти к Клиентам

2. Нажмите Создать клиента .
3. Щелкните Тип приложения > Веб-приложение .
4. В поле Имя введите имя учетных данных. Это имя отображается только в консоли Google Cloud.
5. Добавьте авторизованные URI, связанные с вашим приложением:
   • Клиентские приложения (JavaScript). В разделе «Авторизованные источники JavaScript» нажмите «Добавить URI» . Затем введите URI, который будет использоваться для запросов браузера. Это определяет домены, из которых ваше приложение может отправлять запросы API на сервер OAuth 2.0.
   • Серверные приложения (Java, Python и т. д.) – в разделе «Авторизованные URI перенаправления » нажмите «Добавить URI» . Затем введите URI конечной точки, на который сервер OAuth 2.0 может отправлять ответы.
6. Нажмите Создать .

   Вновь созданные учетные данные появятся в разделе «Идентификаторы клиентов OAuth 2.0» .

   Обратите внимание на идентификатор клиента. Секреты клиента не используются для веб-приложений.

Запишите эти учетные данные, поскольку они понадобятся вам позже в этом кратком руководстве.

Создайте ключ API

1. В консоли Google Cloud выберите > API и службы > Учетные данные .

   Перейти к учетным данным

2. Нажмите Создать учетные данные > Ключ API .
3. Отобразится ваш новый ключ API.
   • Нажмите «Копировать , чтобы скопировать ключ API для использования в коде вашего приложения. Ключ API также можно найти в разделе «Ключи API» учетных данных вашего проекта.
   • Нажмите «Ограничить ключ» , чтобы обновить дополнительные настройки и ограничить использование вашего ключа API. Дополнительные сведения см. в разделе «Применение ограничений ключей API» .

Настройка образца

1. В своем рабочем каталоге создайте файл с именем index.html .

2. В файл index.html вставьте следующий пример кода:

   класс/quickstart/index.html

   Посмотреть на GitHub
   <!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>

   Замените следующее:

   • YOUR_CLIENT_ID : идентификатор клиента, который вы создали при авторизации учетных данных для веб-приложения .
   • YOUR_API_KEY : ключ API, который вы создали в качестве предварительного условия .

Запустите образец

1. В свой рабочий каталог установите пакет http-сервера :

   npm install http-server
   

2. В рабочем каталоге запустите веб-сервер:

   npx http-server -p 8000
   

3. В браузере перейдите по адресу http://localhost:8000 .
4. Вы увидите запрос на авторизацию доступа:
   1. Если вы еще не вошли в свою учетную запись Google, войдите в систему, когда будет предложено. Если вы вошли в несколько учетных записей, выберите одну учетную запись, которая будет использоваться для авторизации.
   2. Нажмите Принять .

Ваше приложение JavaScript запускается и вызывает API Google Classroom.

Следующие шаги

• Устранение проблем с аутентификацией и авторизацией
• Справочная документация по API Класса
• раздел google-api-javascript-client на GitHub