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

JavaScript
23933
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
Имя пользователя

34 комментария

  • 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
        Спасибо большое!
      • Александр Толкачев Новый пользователь
        20 сентября 2020 22:46
        А если я получу токен долгосрочный. Под видом приложения, которое находится в разработке, у меня доступ ведь не закроют??? ну и токен получаю под видом тестестеровщика этого приложения
  • Игорь Хайлов Новый пользователь
    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 для доступа к галерее
  • Ильгиз Мухамедов Новый пользователь
    11 декабря 2019 03:46
    здрасьте. помогите, пожалуйста, кто чем может.
    вот потребовалось реализовать логин с инсты. в порядок с кодом я умею. но. дурацкое но я хочу через токен аля имплицит флоу.
    есть бэк на пайтоне, есть фронт на реакте, между ними прокинут рест. и на бэк для простоты удобства мне нужно передать уже готовый токен. генерить его на фронте и палить секрет инсты я не хочу. дополнительную логику для бэкенда с переработкой кода в токен тоже не хочу. а ендпоинт для имплицит флоу найти не могу. и у меня такое вот подозрение, что его вообще порезали или я просто в глаза долблюсь?

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

    и что же это за оаут2, если тут нельзя просто токен на фронт запросить или это всё-таки я криво что-то делаю? ткните пальцем, господа.
  • Александр Бакулин Новый пользователь
    20 января 2020 23:00
    Здравствуйте.
    Все хорошо, очень доступно написано. Спасибо
    Только вот застрял на интерфейсе командной строки. У меня windows я установил cmder для win7
    Но при вводе в первой строке выводится "git-for-windows\bin\bash.exe не совместимо с вашей версией windows"
    И дальше так:
    curl: (6) Could not resolve host: \https
    curl: (6) Could not resolve host: \-F
    curl: (6) Could not resolve host: app_id=524390985899230
    curl: (6) Could not resolve host: \-F
    .....

    Никак не проходит ... и ответов нигде нет
    • Дмитрий Белов Миллиардер, филантроп
      Active-Vision 21 января 2020 00:49
      Не обязательно использовать Сmder. Вам нужно отправить запрос с помощью cURL - это утилита командной строки. Почитайте о ней подробнее.
  • Fedor Nikolenko Новый пользователь
    8 февраля 2020 17:32
    Всем доброго времени суток, подскажите пожалуйста, нигде не могу найти нужно мне информации...
    Пишу CRM систему, в неё необходимо внедрить инсту, так же как в Битриксе24,
    аккаунт инсты - бизнес аккаунт.
    Мне необходимо чтобы если кто-то прислал сообщение в Direct инсты, сообщение отображалось в интерфейсе CRM,
    и можно было отвечать на эти сообщение и нужна возможность мониторить новые комментарии под фотками и если появился новый коммент, то информация сразу отображалась в CRM и так же была возможность на него отвечать.
    Такое вообще возможно? Средствами API инстаграма который есть сейчас или как-то по-другому решать подобную задачу?
    • Дмитрий Белов Миллиардер, филантроп
      Active-Vision 9 февраля 2020 12:20
      Если у вас бизнес аккаунт, то вы можете использовать API Graph для Instagram. Посмотрите его возможности в документации
  • badyi badyi Новый пользователь
    20 марта 2020 17:34
    Здравствуйте, дошел до момента когда получил уже long-lived access token + могу получить username,media_count, id постов и тд.
    Но не могу понять как получить фото профиля и bio.
    Подскажите, пожалуйста.
  • buu Новый пользователь
    19 апреля 2020 17:00
    Здравствуйте. Все корректно работает, единственный момент интересен с правами instagram_graph_user_media.

    Мне необходимо выгрузить все записи из одного аккаунта инсты (к которому у меня есть доступ). Чтобы выдать эти права в ЛК, необходимо заполнить некоторые поля (логотип приложения, ссылка на политику конфиденциальности, скринкаст работы приложения на сайте и тд), которые явно предназначены для того, чтобы приложение на сайте позволяло авторизовываться (грубо говоря привязывать свой инст к аккаунту на сайту).

    Но мне такой функционал совсем не нужен, мне необходим лишь доступ к 1 конкретному аккаунту с 1 конкретного сайта. Есть какой-нибудь способ дать самому себе же эти права или хотя бы получить доступ к своим же публикациям?)
    • buu Новый пользователь
      20 апреля 2020 00:02
      Сам спросил, сам и отвечу.

      Чтобы просто получить посты своего же аккаунта, не нужно проходить проверку приложения в фб. Достаточно сгенерировать токен для тестера на вкладке Basic Display http://joxi.ru/1A5MWgBFGp8MvA . Там есть баг - после генерации токен не будет отображаться в списке (возможно это только у меня такая проблема), но доступ с помощью него получить можно.

      Ну и затем смотрим функционал вот здесь https://developers.facebook.com/docs/instagram-basic-display-api/guides/getting-profiles-and-media .

      Важный момент, если curl из консоли вам ничего не возвращает, попробуйте использовать запрос на обычной странице (я делал через php).

      Если совсем ленитесь, можете взять следующий код:

       
      <?php
      $myCurl = curl_init();
      curl_setopt_array($myCurl, array(
      CURLOPT_URL => 'https://graph.instagram.com/me/media?fields=id,caption,media_url,permalink,timestamp&access_token=TOKEN',
      CURLOPT_RETURNTRANSFER => true,
      ));
      $response = curl_exec($myCurl);
      curl_close($myCurl);

      $arResonse = json_decode($response, true);


      Вернет по 25 постов, остальные можете получить с помощью пагинации (в response есть уже сформированный url, просто в цикле подставляете, пока он не перестанет генерироваться)

      Надеюсь, кому-нибудь поможет.
  • Александр Толкачев Новый пользователь
    20 сентября 2020 23:01
    Появились вопросы. Если получить токен пользователя под видом тестера. 1. Сколько будет работать данный способ? 2. Не закроют ли его если данное приложение так и будет работать в режиме тестирования или разработки? 3. Если данный способ не будет работать есть ли где то подробное описание того как нужно подвердить компанию а то, что-то у меня совсем не выходит, ну или как это использовать бесплатно физ. лицу.
    • Nikita Galochkin Новый пользователь
      5 января 2021 14:52
      Александр, удалось ли разобраться, как получить права на instagram_basic без создания/подтверждения компании?
      • Андрей Хмелёв Новый пользователь
        4 мая 2021 09:56
        про инстаграм можно уже забыть
  • Alexander Koryttsev Новый пользователь
    27 мая 2021 15:57
    Спасибо за статью!

    Подскажите, как получить доступ не к своему профилю, а к чужому по UserID ?

    Насколько я смог понять, нужны права 'instagram_graph_user_profile,instagram_graph_user_media', но чтобы их получить, нужно пройти ревью! А чтобы пройти ревью, нужно уже их применить на практике и показать результат. Якобы документация намекает, что эти права не нужны в режиме разработки, НО!

    При попытке получить данные по чужому пользователю, я натыкаюсь на ошибки 400

    "data": Object {
    "error": Object {
    "code": 100,
    "error_subcode": 33,
    "fbtrace_id": "AYaezQJlaXoaudxgfaDgpqW",
    "message": "Unsupported get request. Object with ID '17841433804563064' does not exist, cannot be loaded due to missing permissions, or does not support this operation",
    "type": "IGApiException",
    },
    }

    Использование генерированного в админке токена не помогает

    И так же не могу авторизоваться с этими правами,

    {
    "error_type": "OAuthException",
    "code": 400,
    "error_message": "Invalid scope: ['instagram_graph_user_media', 'instagram_graph_user_profile']"
    }

    Захожу Тестовыми пользователем, добавленным в приложение Facebook.

    Подскажите, что я упустил?...
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]
  • Lolaces Lolaces Новый пользователь
    Сегодня 11:21
    [url=http://moskplenka.ru/]сколько метров в 1 кг стрейч пленки[/url]

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