Search code examples
c#xamarinxamarin.formsinstagraminstagram-api

Xamarin form - Instagram login: getting Invalid redirect_uri error, how to fix it?


I have integrate Instagram login using Xamarin.Auth, I have referred: Instagram basic display api - Getting Started and in that first I was getting:

{"error_type": "OAuthException", "code": 400, "error_message": "Invalid scope field(s): basic"}

Then I have got this post: C# Instagram - Invalid Scope

So I have updated everything and I have created New App in developers.facebook.com console under Instagram Basic Display product as mentioned in Instagram Getting Started document.

Then in code I have used that new App's App ID and also changed redirect url, also added Instagram Test users and they have accept invitations too, but now I am getting

{"error_type": "OAuthException", "code": 400, "error_message": "Invalid redirect_uri"}

Auth code:

var authenticator = new OAuth2Authenticator(
    clientId: Keys.InstagramClientId,  
    scope: "basic",  
    authorizeUrl: new Uri("https://api.instagram.com/oauth/authorize/?client_id=" + Keys.InstagramClientId + "&redirect_uri=https://localhost:3000/callback&response_type=token"),
    redirectUrl: new Uri("https://localhost:3000/callback"))
{
    AllowCancel = true,
    ShowErrors = false,
    ClearCookiesBeforeLogin = true
};

AuthenticationState.Authenticator = authenticator;

authenticator.Error += (sender, eventArgs) =>
{
    activity.Finish();
};

authenticator.Completed += (sender, eventArgs) =>
{
    if (eventArgs.IsAuthenticated)
    {
        App.AccountType = "Instagram";
        App.SaveAccount(eventArgs.Account, view.IsFromReauthentication);
    }
};

var presenter = new Xamarin.Auth.Presenters.OAuthLoginPresenter();
presenter.Login(authenticator);


Output:

enter image description here


Solution

  • Finally I have make it work, sharing this as it might be help for someone looking for the solution!


    var authenticator = new OAuth2Authenticator(
    
    // Id & App Secret of App you have created on FB developer console in Instagram Basic Display
    clientId: Keys.InstagramAppId,
    clientSecret: Keys.InstagramAppSecret,
    
    // Basic scope is not supported anymore, this will fix Invalid scope error:
    scope: "user_profile, user_media",
    
    authorizeUrl: new Uri("https://api.instagram.com/oauth/authorize/?client_id=" + Keys.InstagramAppId + "&redirect_uri=https://business.instagram.com/abc&response_type=token"),
    
    accessTokenUrl: new Uri("https://api.instagram.com/oauth/access_token/"),
    
    // Make sure that your redirect Url needs to register in developer console and it must be valid one
    redirectUrl: new Uri("https://business.instagram.com/abc"))
    {
        AllowCancel = true,
        ShowErrors = false,
        ClearCookiesBeforeLogin = true,
        IsLoadableRedirectUri = false
    };
    
    AuthenticationState.Authenticator = authenticator;
    
    authenticator.Error += (sender, eventArgs) =>
    {
        Debug.WriteLine($"Error - {eventArgs.Message}");
    };
    
    authenticator.Completed += (sender, eventArgs) =>
    {
        if (eventArgs.IsAuthenticated)
        {
            var userid = eventArgs.Account.Properties["user_id"];
            var access_token = eventArgs.Account.Properties["access_token"];
        }
    };
    
    var presenter = new Xamarin.Auth.Presenters.OAuthLoginPresenter();
    presenter.Login(authenticator);
    
    

    To get user information:

    Request details using :

    https://graph.instagram.com/me?fields=id,username&access_token
    

    Sample Response :

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

    Note: I have not got the way to get user's profile_picture, so if anyone know that solution please let me know.