Back4App

Instagram Basic Display API Tutorial

Introduction

The Instagram Basic Display API is an HTTP-based API that apps can use to get an Instagram user’s profile, images, videos, and albums.
Since October 15, 2019, new client registration and permission review on Instagram API platform are discontinued in favor of the Instagram Basic Display API and you should use this method from now on.

Prerequisites

To begin with this tutorial, you will need:

Step 1 - Create a New Back4App App

First of all, it’s necessary to make sure that you have an existing app created at Back4App. However, if you are a new user, you can check this tutorial to learn how to create one.

Step 2 - Present the Authorization Window

The Authorization Window allows app users to grant your app permissions and short-lived Instagram User Access Tokens. After a user logs in and chooses which data to allow your app to access, we will redirect the user to your app and include an Authorization Code, which you can then exchange for a short-lived access token.

To begin the process, get the Authorization Window and present it to the user:

1
2
3
4
5
6
https://api.instagram.com/oauth/authorize
  ?client_id={instagram-app-id}
  &redirect_uri={redirect-uri}
  &scope={scope}
  &response_type=code
  &state={state}        //Optional

All parameters except state are required.

If authorization is successful, we will redirect the user to your redirect_uri and pass you an Authorization Code through the code query string parameter. Capture the code so your app can exchange if for a short-lived Instagram User Access Token.

Authorization Codes are valid for 1 hour and can only be used once.

A sample Authorization Code would be:

https://myapp.back4app.io/auth/?code=AQBx-hBsH3…#_

Note that #_ will be appended to the end of the redirect URI, but it is not part of the code itself, so strip it out.

Step 3 - Retrieve your Token

Once you receive a code, exchange it for a short-lived access token by sending a POST request to the following endpoint:

1
 POST https://api.instagram.com/oauth/access_token

A sample request would be like this:

1
2
3
4
5
6
7
 curl -X POST \
  https://api.instagram.com/oauth/access_token \
  -F client_id=990602627938098 \
  -F client_secret=eb8c7... \
  -F grant_type=authorization_code \
  -F redirect_uri=https://socialsizzle.herokuapp.com/auth/ \
  -F code=AQBx-hBsH3...

and a successful response will look similar to this:

1
2
3
4
{
  "access_token": "IGQVJ...",
  "user_id": 17841405793187218
}

Step 4 - Start the development

Now that the Sign In with Instagram is configured, you can start the development process passing the Access Token you retrieved for authentication.
The format for AUTHDATA is:

1
2
3
4
5
6
{
  "instagram": {
    "id": "user's Instagram id (string)",
    "access_token": "an authorized Instagram access token for the user"
  }
}

Here is the method for the iOS SDK:

1
2
3
PFUser.logInWithAuthType(inBackground: "instagram", authData: ["access_token":tokenString, "id": user]).continueWith { task -> Any? in
    
}

And here for the Android SDK:

1
2
3
4
5
6
Map<string, string> authData = new HashMap<string, string>(); 
authData.put("access_token", tokenString);
authData.put("id", user);
ParseUser.logInWithInBackground("instagram", authData){

}