Back4App

Instagram OAuth Tutorial

Introduction

Instagram OAuth enables users to sign in to Apps using their Instagram account through OAuth.

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 - Create a new Instagram App Client

Log into your Instagram Developer account and sign up as a Developer.
Enter your website, telephone and a description for your App. Accept the terms to proceed.

Go to Overview. Click on Register Your Application

Click on Register a New Client

Fill up the Application Name, Description, Company Name, Website URL, Redirect URIs, Privacy Policy URL and Contact email.

For the Valid redirect URIs, if you are only trying to retrieve your access token, you can leave it as

1
http://localhost

Otherwise you should use the production URI for redirection

At this point you should have a Client like the image below

Click on Menage and under the Security tab, uncheck the Disable Implicit OAuth

Step 3 - Retrieve your Token

If you left your Redirect URIs as localhost, there are two ways you can retrieve your token.
First one is using your Browser of choice, and going to the following URL:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code

just change the CLIENT-ID and REDIRECT-URI using the values you got from your newly created Client.
This will redirect you to an invalid page, but show you the access token in the URL:

The other way to retrieve such token is to run the following CURL command, replacing the CLIENT-ID, CLIENT-SECRET and REDIRECT-URI for your own values:

1
2
3
4
5
6
curl \-F 'client_id=CLIENT-ID' \
    -F 'client_secret=CLIENT-SECRET' \
    -F 'grant_type=authorization_code' \
    -F 'redirect_uri=REDIRECT-URI' \
    -F 'code=CODE' \
    https://api.instagram.com/oauth/access_token

That command will also output your Access Token.

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){

}