JavaScript

Instagram API Basic Display — получение токена, первый запрос

526
Instagram API Basic Display — получение токена, первый запрос
Active vision

API Instagram Basic Display, то есть базовый интерфейс instagram API — это API для сторонних приложений и веб сайтов, с помощью которого они могут получить данные профиля пользователя Instagram, а также его видео и изображения.

Instagram API Basic Display

Быстрая навигация:

  1. # Создание facebook приложения
  2. # Настройка Instagram API Basic Display
  3. # Добавляем тестировщика Instagram
  4. # Аутентификация тестировщика
  5. # Получение токена Instagram API Basic Display
  6. # Запрос на получения имени пользователя

Принцип работы API такой: сначала вы показываете пользователю окно авторизации, где он проходит процедуру аутентификации и авторизует ваше приложение для доступа к своим данным, а так же дает определенные разрешения. После аутентификации пользователь перенаправляется обратно в ваше приложение (веб сайт), в url которого будет добавлен код авторизации. Вам нужно будет получить этот код и обменять его на access token. Получив этот токен, вы сможете делать запросы к API и использовать данные и медиа, доступ к которым разрешил вам пользователь.

Не все данные пользователя будут доступны вам сразу. Для полноценной работы вашему приложению потребуется получить от пользователя следующие разрешения:.

  1. instagram_graph_user_profile для получения данных профиля
  2. instagram_graph_user_media для получения изображений, альбомов и видео.

Для того чтобы вы смогли получать от настоящего пользователя такие разрешения, вашему приложению нужно будет пройти процесс проверки. На проверку приложение необходимо будет направить после того как вы закончите процесс разработки. Сделать это можно будет на вкладке Basic Display > Проверка приложения «Instagram Basic Display»

Давайте начнем разработку.

1 Создание facebook приложения

Для начала перейдите по ссылке https://developers.facebook.com и войдите в свой facebook аккаунт. Затем нажмите вкладку Мои приложения и создайте новое. Или нажмите кнопку Начать, если вы не создавали facebook приложений ранее.

API инстаграм

Вы окажетесь в панели facebook для разработчиков, нажмите Настройки, затем Основное. В этой форме нам понадобится заполнить данные:

  1. прикрепить значок приложения (JPG, GIF или PNG, не более 5 МБ, размером от 512х512 до 1024х1024)
  2. URL-адрес политики конфиденциальности
  3. выбрать категорию приложения
  4. выбрать для чего создается приложение: для нужд вашей компании или для оказания услуг другим компаниям

Прокрутите вниз страницы и нажмите кнопку Добавить платформу. В появившемся окне выберите Веб-сайт.

Instagram API token

Введите адрес сайта и сохраните изменения.

Instagram API access

2 Настройка Instagram API Basic Display

В боковой панели нажмите кнопку + рядом со словом Продукты. Внизу найдите Instagram нажмите кнопку Настроить.

API Instagram на русском

Перейдите в раздел Basic Display и внизу страницы нажмите кнопку Create New App

API Instagram 2019

Перед нами форма с настройками Basic Display. Желательно заполнить в ней все поля. Приступим:

Клиентские настройки OAuth
Действительные URI переадресации для OAuth — это адрес страницы вашего сайта на котором будет работать приложение. Сохраните его под рукой, так как он нам еще понадобится.
Отменить авторизацию
Деавторизация URL обратного вызова — это адрес страницы, которая будет обрабатывать уведомления о деавторизации пользователей. Пока мы ее не создали, можно просто ввести URL вашего сайта.
Запросы на удаление данных
URL запроса на удаление данных — как и в предыдущем случае введем просто URL сайта, а позже заменим его на страницу, которая будет обрабатывать запрос пользователя на удаление данных.

3 Добавляем тестировщика Instagram

Добавим к нашему приложению пользователя для тестов. Такие пользователи могут проверять приложение только в режиме разработки. В боковой панели нажмите Роли > Роли и прокрутите страницу вниз до раздела Тестировщики Instagram. Нажмите кнопку Добавить тестировщика

Instagram API фото

Откройте новое приватное окно браузера и войдите в instagram профиль тестировщика. А в панели для разработчиков введите id этого пользователя, чтобы пригласить его. После чего тестировщику придет уведомление, с просьбой принять запрос из вашего приложения, которое тестировщик должен подтвердить. Чтобы это сделать, нужно зайти в профиль инстаграм, нажать Редактировать профиль, выбрать вкладку Приложения и сайты > Приглашения для тестировщиков.

Instagram web API

4 Аутентификация тестировщика

Далее нам нужно создать URL для окна авторизации. Подставьте в URL ниже свои данные: APP-ID замените на id своего приложения Instagram (указан в панели для разработчиков на странице Basic Display), REDIRECT-URI замените на тот URI что мы сохранили ранее. URI предварительно нужно закодировать, чтобы он принял подобный вид https%3A%2F%2Factive-vision.ru%2Ftest%2F. Для этого можно воспользоваться этим сервисом.


URL
https://api.instagram.com/oauth/authorize?app_id=APP-ID&redirect_uri=REDIRECT-URI&scope=user_profile,user_media&response_type=code

В новом окне браузера вставьте сгенерированный URL. Должно появиться окно с именем приложения и вашего тестировщика. Нажмите авторизовать, чтобы предоставить приложению доступ к данным вашего профиля. Если все пройдет успешно, вы окажитесь на странице, которую вы указывали в поле URI. Посмотрите на URL, в конце после строки ?code= будет добавлен код авторизации. Скопируйте его без символов #_ в конце и сохраните под рукой. Этот код действует в течении 1 часа.

Instagram API авторизация

5 Получение токена Instagram API Basic Display

Для следующего шага нам понадобится интерфейс командной строки. Для отправки cURL запроса мы будем использовать Cmder. Отправьте следующий POST запрос в Instagram API:


cURL
curl -X POST \
    https://api.instagram.com/oauth/access_token \
    -F app_id=APP-ID \
    -F app_secret=APP-SECRET \
    -F grant_type=authorization_code \
    -F redirect_uri=REDIRECT-URI \
    -F code=CODE

Замените APP-ID и REDIRECT-URI как в прошлом шаге. REDIRECT-URI теперь уже не надо кодировать, убедитесь, что вы скопировали его правильно, включая все косые черты в конце. APP-SECRET можно взять со страницы Basic Display. CODE - это тот код, который мы получили в предыдущем шаге.

как получить API инстаграм

Если вы нигде не ошиблись, вам придет JSON объект содержащий access token и id пользователя-тестировщика. Скопируйте токен, он нам понадобится в следующем шаге.

Токены доступа пользователей Instagram не долговечны и действительны только в течении 1 часа.

6 Запрос на получения имени пользователя

Попробуем получить имя пользователя. Для этого скопируйте url ниже, и замените в нем USER-ID и ACCESS-TOKEN данными, которые мы получили ранее.


URL
https://graph.instagram.com/USER-ID?fields=id,username&access_token=ACCESS-TOKEN

Если вы все сделали правильно, Instagram API вернет вам JSON с id и именем пользователя.

инстаграм API на русском

Вы также можете использовать узел Me, который сам определит id пользователя Instagram, который предоставил токен. Результат будет таким же.


URL
https://graph.instagram.com/me?fields=id,username&access_token=ACCESS-TOKEN

Параметр fields может содержать следующие значения:

account_type
Тип аккаунта пользователя. Может быть BUSINESS, CONSUMER или CREATOR.
id
id пользователя
media_count
Количество медиа пользователя. Требуются права instagram_graph_user_media.
username
Имя пользователя

11 комментариев

  • Evgeny Sharaev Новый пользователь
    25 ноября 2019 14:49
    Проверил, все работает. Токен и username пришли. Дмитрий, а можете посоветовать рабочий backend для автоматизации этой процедуры? Большинство статей на эту тему написано до ноябрьских изменений в инстаграмме, и у меня не получается настроить с помощью них этот процесс. С Facebook все запустилось нормально а вот инста выдает ошибку что не правильный client ID.
    • Дмитрий Белов Миллиардер, филантроп
      Active vision 25 ноября 2019 18:44
      Мы опубликуем продолжение на следующей неделе) Также возможно вам поможет код из нашей прошлой статьи о получении фотографий из Instagram API с помощью jQuery.
    • Vitaliy Tkachuk Новый пользователь
      28 ноября 2019 18:21
      Столкнулся с той же проблемой, хоть мое приложение создано в https://developers.facebook.com/ (где предусмотрены app_id и app_secret), при запросе токена через https://api.instagram.com/oauth/access_token мне приходит ответ "error_message": "You must provide a client_id" . А ведь в официальной документации говорится что ему должно хватать app_id и app_secret https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

      Очень странная ситуация.
      • Vitaliy Tkachuk Новый пользователь
        29 ноября 2019 13:13
        UPDATE: получал ошибку "You must provide a client_id" из за того, что не правильно отправлял запрос и app_id не передававлся вовсе (и, кстати, как оказалось client_id и app_id это одно и то же).
        • Игорь Хайлов Новый пользователь
          29 ноября 2019 16:41
          Да, они там application/x-www-form-urlencoded кушают
  • Konstantin Kononenko Новый пользователь
    27 ноября 2019 19:25
    Дмитрий, спасибо за инструкцию!
    Подскажите - "Этот код действует в течении 1 часа." - а что будет через 1 час?
    Доступ закроется?
    Я хочу у себя на сайте выводить картинки из своего Инстаграм...
    • Дмитрий Белов Миллиардер, филантроп
      Active vision 28 ноября 2019 12:15
      Instagram API Basic Display подразумевает, что вы на своем сайте делаете кнопку, допустим "Войти через Instagram", пользователь авторизуется и получает доступ к своим фото. А через час ему нужно будет войти заново. Для ваших целей есть другое решение, мы написали небольшой туториал как вывести фото из Инстаграм на сайт без API
      • Konstantin Kononenko Новый пользователь
        8 декабря 2019 17:16
        Спасибо большое!
  • Игорь Хайлов Новый пользователь
    29 ноября 2019 16:38
    Добрый день
    Правильно ли я понял, что у них там есть каких-то два вида входа и разрешений? Вариант с instagram_graph_user_profile (+ instagram_graph_user_media) и instagram_basic (+ дополнительные)?
    • Сергей Зимин Что, прости?
      Active vision 29 ноября 2019 18:43
      Вход один, вы показываете пользователю окно авторизации. В этом окне он должен дать вам разрешения: instagram_graph_user_profile для того, чтобы вы смогли получить доступ к его профилю. И instagram_graph_user_media для доступа к галерее
  • Ильгиз Мухамедов Новый пользователь
    Сегодня 03:46
    здрасьте. помогите, пожалуйста, кто чем может.
    вот потребовалось реализовать логин с инсты. в порядок с кодом я умею. но. дурацкое но я хочу через токен аля имплицит флоу.
    есть бэк на пайтоне, есть фронт на реакте, между ними прокинут рест. и на бэк для простоты удобства мне нужно передать уже готовый токен. генерить его на фронте и палить секрет инсты я не хочу. дополнительную логику для бэкенда с переработкой кода в токен тоже не хочу. а ендпоинт для имплицит флоу найти не могу. и у меня такое вот подозрение, что его вообще порезали или я просто в глаза долблюсь?

    я так увидел, что вот буквально недавно фейсбушеры решили перелопатить апи инсты.
    {"error_type": "OAuthException", "code": 400, "error_message": "Invalid response type: token"} когда меняю респонс тайп с кода на токен. если меняю app_id на client_id то получаю "Invalid Client ID".

    и что же это за оаут2, если тут нельзя просто токен на фронт запросить или это всё-таки я криво что-то делаю? ткните пальцем, господа.

Написать комментарий