Instagram oauth flow in angularjs

Question

I am using angularJs and rending a button to let user authorize to instagram.

I can test by passing https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token iI get the accessToken in the redirectUrl.

The question is how do I invoke this flow in angularJs button click. Currently what I have is as follows:

html Authorize to Instagram

js

app.controller('AdminController', ['$scope', function($scope){
...
    this.authorizeIg = function(){
            console.log('start of authorizeIg implict flow');
            window.location.href = "https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token";
        };

The above will just redirect me to redirect_url after authentication. So, I do not know how to invoke that url within the function and return back a response containing accessToken

Answer 1

A single button click would only redirect the webpage to generate an access token but not save it. Instagram doesn't return a response result with the access token.

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

In angularJS, adding a redirect_uri in above such as : http://localhost/angularapp/:accessToken would redirect your application to this Uri with link such as: http://localhost/angularapp/#access_token=ACCESS-TOKEN on successful authentication.

You could catch this token in the application by using $routeParams directive of angular.

$scope.token = $routeParams.accessToken as defined explicitly in your redirect_uri.