Authenticate the Test User { "error_type": "OAuthException", "code": 400, "error_message": "Invalid platform app" }

Question

I'm trying to recover the access token via the Instagram Basic Display API but when trying to authenticate the test user I get this error:

{
    "error_type": "OAuthException",
    "code": 400,
    "error_message": "Invalid platform app"
}

I expect to see the app authorization screen

Answer 1

Felice!

When setting up an Instagram app, you should use the platform-specific App ID and not the generic one set up on Facebook.

In your Facebook app Dashboard go to Products > Instagram > Basic Display and should see the Instagram App ID.

Use that in your authorization URL and it should work.

Answer 2

I had a similar issue and was able to resolve it by setting the content type of the request to application/x-www-form-urlencoded. below is a c# example showing how to execute the request:

public async Task<UserTokenResponseModel> GetUserToken(string code)
    {
        var url =
            $"https://api.instagram.com/oauth/access_token";

        var request = new HttpRequestMessage(HttpMethod.Post, url);

        var client = _httpClientFactory.CreateClient();

        var requestContent = new List<KeyValuePair<string, string>>();
        requestContent.Add(new KeyValuePair<string, string>("client_id", ClientId));
        requestContent.Add(new KeyValuePair<string, string>("client_secret", Secret));
        requestContent.Add(new KeyValuePair<string, string>("grant_type", "authorization_code"));
        requestContent.Add(new KeyValuePair<string, string>("code", code));
        requestContent.Add(new KeyValuePair<string, string>("redirect_uri", "https://localhost:44315/instagram/authorizecallback"));

        request.Content = new FormUrlEncodedContent(requestContent);

        var response = await client.SendAsync(request);
        var content = await response.Content.ReadAsStringAsync();

        if (!response.IsSuccessStatusCode)
        {
            throw new Exception(content);
        }

        return JsonConvert.DeserializeObject<UserTokenResponseModel>(content);
    }

Answer 3

Passing parameters through the body and in x-www-form-urlencoded works fine as you can see in the picture below

Answer 4

As mentioned in other answer as well, problem was with the form body which is supposed to be send in x-www-form-urlencoded format. It was working fine for me in postman but to implement the same in angular is slightly typical. Here the post request body first has to converted in the HttpParams format and then pass on to the 'body ' parameter of post request as string like this..

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class appService {

  constructor(private http: HttpClient) { }

  public getInstaAccessToken(formData) {
    let full_url = "https://api.instagram.com/oauth/access_token";
    let body = new HttpParams()
      .set("client_id" , "YOUR_CLIENT_ID")
      .set("client_secret","YOUR_CLIENT_SECRET")
      .set("code","code received from redirect url")
      .set("grant_type","authorization_code")
      .set("redirect_uri","your redirect uri")
    const requestOptions = {
      headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
    }
    return this.http.post(full_url, body.toString(), requestOptions).subscribe(data=>{
      console.log(data);
      /* 
        {
          "access_token": "IGQVJ...",
          "user_id": 17841405793187218
        }
      */
    })
  }

}

Answer 5

If you are getting this error with Instagram Basic Display API then this answer is for you.

Problem was I was using the Facebook App ID and App Secret instead of the Instagram App ID & App Secret. You must go to the "Instagram Basic Display" section on the Facebook developer's site then scroll down until you find the Instagram App ID & Secret.