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

JavaScript
30561
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. Для этого можно воспользоваться этим сервисом.


<span class="code__title">URL</span>
https://api.instagram.com/oauth/authorize?app_id=<span style="color: red;">APP-ID</span>&redirect_uri=<span
        style="color: red;">REDIRECT-URI</span>&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:


<span class="code__title">cURL</span>
curl -X POST \
    https://api.instagram.com/oauth/access_token \
    -F app_id=<span style="color: red;">APP-ID</span> \
    -F app_secret=<span style="color: red;">APP-SECRET</span> \
    -F grant_type=authorization_code \
    -F redirect_uri=<span style="color: red;">REDIRECT-URI</span> \
    -F code=<span style="color: red;">CODE</span>

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


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

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

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

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

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


<span class="code__title">URL</span>
https://graph.instagram.com/<span style="color: red;">USER-ID</span>?fields=id,username&access_token=<span
    style="color: red;">ACCESS-TOKEN</span>

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


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

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


<span class="code__title">URL</span>
https://graph.instagram.com/me?fields=id,username&access_token=<span style="color: red;">ACCESS-TOKEN</span>

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

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