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

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

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

Предпосылки

Для запуска этого быстрого старта вам понадобится:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2. Под параметрами находится раздел « Учётные данные» . В раскрывающемся меню этого раздела должно отображаться значение «Ключ 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. Нажмите кнопку «Загрузить» на странице, чтобы загрузить клиентскую библиотеку Google API для JavaScript. После нажатия кнопки в консоли разработчика должно появиться сообщение о загрузке клиента GAPI.

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

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

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

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

  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. Нажмите кнопку «Авторизовать и загрузить» на странице, чтобы загрузить клиентскую библиотеку Google API для JavaScript и начать процесс авторизации. Вам будет предложено предоставить приложению разрешение на чтение данных из вашего аккаунта YouTube.

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

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

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