Быстрый старт JavaScript

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

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

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

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

  • Python 2.4 или более поздней версии (для предоставления веб-сервера)
  • Доступ к Интернету и веб-браузеру.
  • Аккаунт Google.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. Под параметрами есть раздел Credentials . В раскрывающемся меню этого раздела должно отображаться значение API-ключа . API-интерфейс по умолчанию использует демонстрационные учетные данные, чтобы упростить начало работы. Но для локального запуска примера вы будете использовать свой собственный ключ API.

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

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

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

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

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

    Питон 2.x 

    python -m SimpleHTTPServer 8000

    Питон 3.x

    python -m http.server 8000

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

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

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

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

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

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

  2. В разделе «Распространенные варианты использования» щелкните символ кода третьего списка в таблице. Этот вариант использования — вызов метода list для «моего канала».

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

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

    2. В разделе «Учетные данные» в раскрывающемся меню следует выбрать опцию Google OAuth 2.0 .

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

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

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

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

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

    Питон 2.x 

    python -m SimpleHTTPServer 8000

    Питон 3.x

    python -m http.server 8000

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

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

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

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

Дальнейшее чтение