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

В этом руководстве рассказывается, как создать простую страницу, которая отправляет запросы к YouTube Data API. В этом руководстве рассказывается, как сделать два запроса к API:

  1. Вы будете использовать ключ API, который идентифицирует ваше приложение, чтобы получить информацию о канале GoogleDevelopers на YouTube.
  2. Вы будете использовать идентификатор клиента OAuth 2.0, чтобы отправить авторизованный запрос на получение информации о вашем канале YouTube.

Требования

Чтобы выполнить инструкции из этого руководства, вам потребуется:

  • Node.js и npm (для запуска локального веб-сервера).
  • Доступ к интернету и веб-браузер.
  • Аккаунт Google.

Шаг 1. Настройте проект и учетные данные

Создайте или выберите проект в Cloud Console. Выполните следующие задачи в консоли Cloud для своего проекта:

  1. На панели библиотеки найдите YouTube Data API v3. Нажмите на API и убедитесь, что он включен для вашего проекта.

  2. На панели учетных данных создайте две учетные записи:

    1. Создайте ключ API. Он понадобится для выполнения запросов к API, не требующих авторизации пользователя. Например, вам не нужно разрешение пользователя, чтобы получить информацию об общедоступном канале YouTube.

    2. Создайте идентификатор клиента OAuth 2.0 Установите для приложения тип Веб-приложение. Для запросов, требующих авторизации пользователя, необходимо использовать учетные данные OAuth 2.0. Например, чтобы получить информацию о канале YouTube, принадлежащем пользователю, который прошел аутентификацию, необходимо разрешение этого пользователя.

      В поле Разрешенные источники JavaScript введите URL http://localhost:8000. Поле Разрешенные URI перенаправления можно оставить пустым.

Шаг 2. Настройте и запустите пример

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

  1. Откройте документацию по методу channels.list.

  2. На этой странице в разделе "Примеры использования" приведена таблица с описанием нескольких распространенных способов применения этого метода. Первый список в таблице предназначен для вывода результатов по идентификатору канала.

    Нажмите на значок кода для первого адреса, чтобы открыть и заполнить полноэкранный API Explorer.

    Изображение, которое указывает на местоположение ссылки на символ кода в таблице, где перечислены варианты использования для документации по методу channels.list. Альтернативный текст для этого изображения определяет его как символ кода и указывает на вариант использования, связанный с этой ссылкой.

  3. В левой части полноэкранного режима API Explorer показано следующее:

    1. Под заголовком Параметры запроса приведен список параметров, которые поддерживает метод. Значения параметров part и id должны быть заданы. Значение параметра id – UC_x5XG1OV2P6uZZ5FSM9Ttw – это идентификатор канала GoogleDevelopers на YouTube.

    2. Под параметрами находится раздел Учетные данные. В раскрывающемся меню в этом разделе должно быть выбрано значение Ключ API. По умолчанию в API Explorer используются демонстрационные учетные данные. Однако для локального запуска примера вам понадобится собственный ключ API.

      Изображение, на котором показан раздел "Учетные данные" в полноэкранном режиме API Explorer и раскрывающееся меню с выбранным вариантом "Ключ API".

  4. В правой части окна API Explorer в полноэкранном режиме показаны вкладки с примерами кода на разных языках. Перейдите на вкладку JavaScript.

  5. Скопируйте пример кода и сохраните его в файле с названием example.html.

  6. В скачанном образце найдите строку YOUR_API_KEY и замените ее на ключ API, созданный на шаге 1.

  7. Запустите веб-сервер из своего рабочего каталога. Для этого используйте следующую команду:

    npx http-server -p 8000

  8. Откройте файл example.html в браузере. Также откройте инструменты разработчика в браузере, например в Chrome.

    1. Нажмите кнопку load (загрузить), чтобы загрузить клиентскую библиотеку API Google для JavaScript. После нажатия кнопки в консоли разработчика должно появиться уведомление о том, что клиент GAPI загружен.

    2. Нажмите кнопку Выполнить, чтобы отправить запрос к API. В консоли разработчика должен появиться ответ API.

Шаг 3. Выполните авторизованный запрос

На этом шаге вы измените пример кода так, чтобы он получал информацию не о канале GoogleDevelopers, а о вашем канале YouTube. Для этого запроса требуется авторизация пользователя.

  1. Вернитесь к документации по методу channels.list API.

  2. В разделе "Распространенные варианты использования" нажмите на значок кода для третьего элемента в таблице. В этом случае вызывается метод list для "моего канала".

  3. В левой части полноэкранного API Explorer вы увидите список параметров, а затем раздел Учетные данные. Однако в этом случае есть два отличия от примера, в котором вы получали информацию о канале GoogleDevelopers:

    1. В разделе параметров вместо значения параметра id должно быть задано значение параметра mine – true. Это указывает серверу API на то, что нужно получить информацию о канале текущего авторизованного пользователя.

    2. В разделе Credentials (Учетные данные) в раскрывающемся меню выберите Google OAuth 2.0.

      Кроме того, если вы нажмете на ссылку Показать области действия, должна быть выбрана область действия https://www.googleapis.com/auth/youtube.readonly.

      Изображение, на котором показаны области действия в полноэкранном режиме Google API Explorer и выбран вариант использования учетных данных Google OAuth 2.0.

  4. Как и в предыдущем примере, выберите вкладку JavaScript, скопируйте образец кода и сохраните его в файле example.html.

    В коде найдите строку YOUR_CLIENT_ID и замените ее идентификатором клиента, который вы создали на шаге 1 этого краткого руководства.

  5. Запустите веб-сервер из своего рабочего каталога. Для этого используйте следующую команду:

    npx http-server -p 8000

  6. Откройте файл http://localhost:8000/example.html в браузере. Откройте инструменты разработчика в браузере, например в Chrome.

  7. Нажмите кнопку authorize and load (авторизовать и загрузить) на странице, чтобы загрузить клиентскую библиотеку Google API для JavaScript и запустить процесс авторизации. Вам будет предложено предоставить приложению разрешение на чтение данных из вашего аккаунта YouTube.

    Если вы предоставите разрешение, в консоли разработчика появятся сообщения об успешном входе и загрузке API-клиента.

  8. Нажмите кнопку Выполнить, чтобы отправить запрос к API. В консоли разработчика должен появиться ответ API.

Дополнительные сведения