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

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

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

Предпосылки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Питон 2.х

    python -m SimpleHTTPServer 8000

    Питон 3.х

    python -m http.server 8000

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

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

    python -m SimpleHTTPServer 8000

    Питон 3.х

    python -m http.server 8000

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

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

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

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

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