API Instagram Basic Display, то есть базовый интерфейс instagram API — это API для сторонних приложений и веб сайтов, с помощью которого они могут получить данные профиля пользователя Instagram, а также его видео и изображения.
Быстрая навигация:
Принцип работы API такой: сначала вы показываете пользователю окно авторизации, где он проходит процедуру аутентификации и авторизует ваше приложение для доступа к своим данным, а так же дает определенные разрешения. После аутентификации пользователь перенаправляется обратно в ваше приложение (веб сайт), в url которого будет добавлен код авторизации. Вам нужно будет получить этот код и обменять его на access token. Получив этот токен, вы сможете делать запросы к API и использовать данные и медиа, доступ к которым разрешил вам пользователь.
Не все данные пользователя будут доступны вам сразу. Для полноценной работы вашему приложению потребуется получить от пользователя следующие разрешения:.
- instagram_graph_user_profile для получения данных профиля
- instagram_graph_user_media для получения изображений, альбомов и видео.
Для того чтобы вы смогли получать от настоящего пользователя такие разрешения, вашему приложению нужно будет пройти процесс проверки. На проверку приложение необходимо будет направить после того как вы закончите процесс разработки. Сделать это можно будет на вкладке Basic Display > Проверка приложения «Instagram Basic Display»
Давайте начнем разработку.
1 Создание facebook приложения
Для начала перейдите по ссылке https://developers.facebook.com и войдите в свой facebook аккаунт. Затем нажмите вкладку Мои приложения и создайте новое. Или нажмите кнопку Начать, если вы не создавали facebook приложений ранее.
Вы окажетесь в панели facebook для разработчиков, нажмите Настройки, затем Основное. В этой форме нам понадобится заполнить данные:
- прикрепить значок приложения (JPG, GIF или PNG, не более 5 МБ, размером от 512х512 до 1024х1024)
- URL-адрес политики конфиденциальности
- выбрать категорию приложения
- выбрать для чего создается приложение: для нужд вашей компании или для оказания услуг другим компаниям
Прокрутите вниз страницы и нажмите кнопку Добавить платформу. В появившемся окне выберите Веб-сайт.
Введите адрес сайта и сохраните изменения.
2 Настройка Instagram API Basic Display
В боковой панели нажмите кнопку + рядом со словом Продукты. Внизу найдите Instagram нажмите кнопку Настроить.
Перейдите в раздел Basic Display и внизу страницы нажмите кнопку Create New App
Перед нами форма с настройками Basic Display. Желательно заполнить в ней все поля. Приступим:
3 Добавляем тестировщика Instagram
Добавим к нашему приложению пользователя для тестов. Такие пользователи могут проверять приложение только в режиме разработки. В боковой панели нажмите Роли > Роли и прокрутите страницу вниз до раздела Тестировщики Instagram. Нажмите кнопку Добавить тестировщика
Откройте новое приватное окно браузера и войдите в instagram профиль тестировщика. А в панели для разработчиков введите id этого пользователя, чтобы пригласить его. После чего тестировщику придет уведомление, с просьбой принять запрос из вашего приложения, которое тестировщик должен подтвердить. Чтобы это сделать, нужно зайти в профиль инстаграм, нажать Редактировать профиль, выбрать вкладку Приложения и сайты > Приглашения для тестировщиков.
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 часа.
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 - это тот код, который мы получили в предыдущем шаге.
Если вы нигде не ошиблись, вам придет 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 и именем пользователя.
Вы также можете использовать узел 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 может содержать следующие значения:
