Erste Schritte

In diesem Tutorial wird dir gezeigt, wie du im App-Dashboard eine App konfigurieren, einen kurzfristigenZugriffsschlüssel für Instagram-Nutzer*innen abrufen und damit dann über die API das Profil von einem*einer Instagram-Nutzer*in abfragen kannst. Wenn du das Tutorial abschließt, verfügst du über grundlegende Kenntnisse darüber, wie du Zugriffsschlüssel und Berechtigungen von deinen App-Nutzer*innen abfragen und einfache Abfragen mit der API durchführen kannst.

Voraussetzung für das Tutorial ist, dass du einfache cURL-Anfragen mit einem Befehlszeilentool oder einer entsprechenden App wie Postman durchführen kannst.

Bevor du beginnst

Voraussetzungen:

• Ein Facebook-Entwicklungskonto.
• Ein Instagram-Konto mit Medien.
• Eine öffentliche Website, die dir gehört. Dies kann eine gewöhnliche, kostenlose Website wie Github Page oder Heroku sein, oder deine eigene Website.
• Ein Befehlszeilentool wie Terminal oder eine App wie Postman, die cURL-Anfragen stellen kann.

Schritt 1: Facebook-App erstellen

Rufe die Seite developers.facebook.com auf, klicke auf Meine Apps, erstelle eine neue App und wähle den App-TypVerbraucher oder Keine aus.

Sobald du die App erstellt hast und im App-Dashboard bist, navigiere zu Einstellungen > Grundlegend, scrolle zum Ende der Seite und klicke auf Plattform hinzufügen.

Wähle Website aus, füge die URL deiner Website hinzu und speichere deine Änderungen. Du kannst die Plattform später wechseln, wenn du willst. Für dieses Tutorial solltest du aber Website verwenden.

Schritt 2: Instagram Basic Display konfigurieren

Klicke auf Produkte, suche das Produkt Instagram Basic Display und klicke auf Einrichten, um es zu deiner App hinzuzufügen.

Scrolle zum Ende der Seite und klicke auf Neue App erstellen.

Fülle in dem daraufhin angezeigten Formular jeden Abschnitt anhand der folgenden Richtlinien aus.

Display-Name

Gib den Namen der gerade erstellten Facebook-App ein.

Gültige OAuth Redirect URIs

Gib die URL deiner Website ein. Normalerweise wäre dies eine spezifische URI, die Umleitungs-Abfrage-String-Parameter aufnehmen kann, aber im Rahmen dieses Tutorials kannst du die URL deiner Website verwenden.

Zum Beispiel: https://socialsizzle.heroku.com/auth/

Speichere deine Änderungen nach Eingabe einer URL und prüfe die URL erneut. Je nach deiner URL-Struktur ist denkbar, dass wir einen nachgestellten Schrägstrich angefügt haben. Kopiere die vollständige URL an einen beliebigen Ort, denn du wirst sie später zum Abrufen von Autorisierungscodes und Zugriffsschlüsseln benötigen.

Deauthorize Callback URL

Gib erneut die URL deiner Website ein. Irgendwann musst du diese in eine URL ändern, die Deautorisierungsbenachrichtigungen verarbeiten kann. Für dieses Tutorial kannst du aber noch einmal deine Website-URL verwenden.

Data Deletion Request Callback URL

Gib erneut die URL deiner Website ein. Wie bei der Deauthorize Callback URL musst du diese irgendwann in eine URL ändern, die Datenlöschungsanfragen verarbeiten kann. Für dieses Tutorial kannst du aber noch einmal deine Website-URL verwenden.

App-Review

Überspringe diesen Bereich erst einmal, da du die App im Tutorial nicht in den Live-Modus schaltest.

Schritt 3: Instagram-Testnutzer hinzufügen

Navigiere zu Rollen > Rollen und scrolle nach unten zum Abschnitt mit Instagram-Testern. Klicke auf Instagram-Tester hinzufügen, gib den Benutzungsnamen des Instagram-Kontos ein und sende die Einladung.

Öffne einen neuen Webbrowser, gehe zu www.instagram.com und melde dich bei deinem Instagram-Konto an, das du gerade eingeladen hast. Navigiere zu (Profilsymbol) > Profil bearbeiten > Apps und Websites > Tester-Einladungen und nimm die Einladung an.

Auf dein Instagram-Konto kann nun von deiner Facebook-App aus zugegriffen werden, wenn sie sich im Entwicklungsmodus befindet.

Schritt 4: Testnutzer authentifizieren

Erstelle die Autorisierungsfenster-URL unten, wobei du {app-id} durch die ID deiner Instagram-App (über das Feld App-Dashboard > Produkte > Instagram > Basic Display > Instagram App-ID) und {redirect-uri} durch die URL deiner Website ersetzt, die du in Schritt 2 angegeben hast („Gültige OAuth Redirect URIs“). Die URL muss absolut identisch sein.

https://api.instagram.com/oauth/authorize
  ?client_id={app-id}
  &redirect_uri={redirect-uri}
  &scope=user_profile,user_media
  &response_type=code

Zum Beispiel:

https://api.instagram.com/oauth/authorize
  ?client_id=684477648739411
  &redirect_uri=https://socialsizzle.herokuapp.com/auth/
  &scope=user_profile,user_media
  &response_type=code

Öffne ein neues Browserfenster und lade die Autorisierungsfenster-URL. Das Fenster sollte angezeigt werden und den Namen des Instagram-Testnutzers, den Namen der App und eine Beschreibung der Berechtigungen enthalten, die von deiner App angefordert werden.

Authentifiziere deinen Instagram-Testnutzer, indem du dich beim Autorisierungsfenster anmeldest und dann auf Autorisieren klickst, um deiner App Zugriff auf die Daten deines Profils zu gewähren. War der Vorgang erfolgreich, leitet dich die Seite zur Weiterleitungs-URI weiter, die du im vorherigen Schritt angegeben hast, und hängt einen Autorisierungscode an. Zum Beispiel:

https://socialsizzle.herokuapp.com/auth/?code=AQDp3TtBQQ...#_

Beachte, dass #_ am Ende des Weiterleitungs-URI angehängt wurde, aber nicht Teil des eigentlichen Codes ist. Kopiere den Code (ohne #_ portion), damit du ihn im nächsten Schritt verwenden kannst.

Schritt 5: Den Code gegen einen Schlüssel tauschen

Öffne dein Befehlszeilentool oder eine Befehlszeilen-App, die cURL-Anfragen unterstützt, und sende die folgende POST-Anfrage an die API.

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id={app-id} \
  -F client_secret={app-secret} \
  -F grant_type=authorization_code \
  -F redirect_uri={redirect-uri} \
  -F code={code}

Ersetze {app-id}, {app-secret}, {redirect-uri} und {code} durch deine Instagram App-ID, deinen Instagram App-Geheimcode, deine Weiterleitungs-URI und den Code, den wir dir gesendet haben. Achte darauf, dass deine Weiterleitungs-URI genau mit der URI übereinstimmt, die du im vorherigen Schritt angegeben hast. Schließe auch Schrägstriche am Ende ein, wenn das App-Dashboard diese beim Konfigurieren deiner Instagram-App hinzugefügt hat.

Zum Beispiel:

curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id=684477648739411 \
  -F client_secret=eb8c7... \
  -F grant_type=authorization_code \
  -F redirect_uri=https://socialsizzle.herokuapp.com/auth/ \
  -F code=AQDp3TtBQQ...

Wenn der Vorgang erfolgreich war, gibt die API ein JSON-codiertes Objekt zurück, das einen kurzfristigen Instagram-Nutzer-Zugriffsschlüssel (Gültigkeit eine Stunde) und die ID deines Instagram-Testnutzers enthält:

{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

Kopiere den Zugriffsschlüssel und die Nutzer-ID, damit du sie im nächsten Schritt verwenden kannst.

Schritt 6: Nutzer-Node abfragen

Verwende dein Befehlszeilentool oder die App und die cURL-Anfrage unten, um die ID und den Benutzer*innennamen deines Nutzers im Nutzer-Node abzufragen. Ersetze {user-id} und {access-token} durch die ID und den Zugriffsschlüssel, die du im letzten Schritt erhalten hast.

curl -X GET \
  'https://graph.instagram.com/{user-id}?fields=id,username&access_token={access-token}'

Zum Beispiel:

curl -X GET \
  'https://graph.instagram.com/17841405793187218?fields=id,username&access_token=IGQVJ...'

Alternativ kannst du den Me-Node abfragen, der deinen Schlüssel prüft, die ID des Instagram-Nutzers ermittelt, der den Schlüssel ausgestellt hat, und diesen Nutzer abfragt. Zum Beispiel:

curl -X GET \
  'https://graph.instagram.com/me?fields=id,username&access_token=IGQVJ...'

War der Vorgang erfolgreich, antwortet die API mit der ID und dem Benutzernamen des Instagram-Nutzers:

{
  "id": "17841405793187218",
  "username": "jayposiris"
}

Nächste Schritte

Nachdem du nun weißt, wie du einen Schlüssel abrufen und eine einfache Abfrage durchführen kannst, lies unsere Leitfäden, um mehr darüber zu erfahren, was du mit der API machen kannst.