Android Instagram login integration

Question

I'm trying to perform social login via Instagram without Graph API and read all the necessary stuff related to it from the Instagram documentation and StackOverflow.

Following are the things I have done in my project till now:

1. Login developer account of Instagram via my username password.

2. Manage client > Register new client and add generated Client Id, Secret key and redirect URL in my constant file.

3. And for the web view, my complete URL is: https://api.instagram.com/oauth/authorize/?client_id=af7efcca661e43459b1e502af7ddb689&redirect_url=https://instagram.com/&response_type=token&scope=basic+public_content

4. When I enter the username and password in WebView rather than to navigate it on redirect URL it is continuously showing me error on WebView as: {"error_type": "OAuthException", "code": 400, "error_message": "You must include a valid client_id, response_type, and redirect_uri parameters"}

5. I want to receive access_token but it is showing my error.

Below is my needed code:

MainActivity.java

public class MainActivity extends AppCompatActivity implements AuthenticationListener {

    private AuthenticationDialog authDialog;
    private Context context;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        context = this;
    }

    @Override
    public void onCodeReceived(String token) {
        if (token == null)
            return;
    }

    @OnClick(R.id.buttonLogin)
    public void loginClick() {
        authDialog = new AuthenticationDialog(this, this);
        authDialog.setCancelable(true);
        authDialog.getWindow().setLayout(((getWidth(context) / 100) * 90), LinearLayout.LayoutParams.MATCH_PARENT);
        authDialog.getWindow().setGravity(Gravity.CENTER);
        authDialog.show();
    }

    public static int getWidth(Context context) {
        DisplayMetrics displayMetrics = new DisplayMetrics();
        WindowManager windowmanager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        windowmanager.getDefaultDisplay().getMetrics(displayMetrics);
        return displayMetrics.widthPixels;
    }
}

AuthenticationDialog.java

public class AuthenticationDialog extends Dialog {
    private String TAG = AuthenticationDialog.class.getSimpleName();
    private AuthenticationListener listener;
    private Context context;
    private WebView webView;

    private final String url = Constants.BASE_URL + "oauth/authorize/?client_id=" +
            Constants.INSTAGRAM_CLIENT_ID
            + "&redirect_url="
            + Constants.REDIRECT_URL
            + "&response_type=token"
            + "&scope=basic+public_content";

    public AuthenticationDialog(@NonNull Context context, AuthenticationListener listener) {
        super(context);

        this.context = context;
        this.listener = listener;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.setContentView(R.layout.auth_dialog);
        initializeWebView();
    }

    private void initializeWebView() {
        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setLoadWithOverviewMode(true);

        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(url);
        Log.d(TAG, "url: " + url);
        //webView.loadUrl("http://api.instagram.com/");
        //webView.loadUrl("https://api.instagram.com/oauth/authorize/?client_id=af7efcca661e43459b1e502af7ddb689&redirect_uri=https://instagram.com/&response_type=token&scope=basic+public_content");
        webView.setWebViewClient(new WebViewClient() {

            String access_token;
            boolean authComplete;

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.d(TAG, "onPageStarted called");
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.d(TAG, "onPageFinished called");
                if (url.contains("#access_token=") && !authComplete) {
                    Log.d(TAG, " inside access_token");
                    Uri uri = Uri.parse(url);
                    access_token = uri.getEncodedFragment();
                    //get the whole token after "=" sign
                    access_token = access_token.substring(access_token.lastIndexOf("=") + 1);
                    Log.d(TAG, "token: " + access_token);
                    authComplete = true;
                    listener.onCodeReceived(access_token);
                    dismiss();
                } else if (url.contains("?error")) {
                    Log.d(TAG, "getting error fetching access token");
                    dismiss();
                } else {
                    Log.d(TAG, "outside both" + url.toString());
                }
            }
        });
    }
}

and according to logs the code is coming in last else "outside both" Also the WebView is showing the error which I mentioned in point no. 4.

Can anyone please help?

Answer 1

Well, You can simply test it out on Web Browser with the URL to check if the URL is valid or not. And I guess It's not a java code problem but your setting problem in the Manage Clients

Make sure if the client_id is correct and redirect_url is the same in the setting on the instagram developer site.