SPA: Access Instagram authentication code directly in app

Question

I load user profile informations from instagram by the basic api in a local test app. So this actually works like written in the documentations. I used Postman to get along the authentication and token stuff.

The order to access the graph api, to query media fields would be like:

1. Get access code (from authentication window redirect url)
2. Get access token (from acces_token endpoint)
3. Get media data (from graph api by access_token)

I´m using UI5 js framework with UI5 Tooling.

I get a response with data in step 3 from ajax call, but first i have to execute step 1 and step 2 manually.

But i want to do all this authentication-mechanism directly in my app. Including opening this authentication window and acessing the code from the redirect url.

When i do an ajax call in step 1, i get an CORS error of course, because step 1 doesnt respond with the corresponding CORS header (like step 3 does).

Well, anyways i most likely could handle this by a proxy, but whats about the production environment? I dont get how this approach should ever work in a real app. Even when the CORS problems are handled by aproxy in dev environment, it should be still there when a real user uses the app.

So the question is: How can i access or implement this authentication window (on a diffrent origin) in my app? I have seen other apps doing this permission window, but i have no clue how to implement it in a web app.

By clicking "Allow" you get redirected to he redirect_url with the access code

How can i get the access code directly in my app, avoiding CORS in production

Answer 1

I don't have a definite answer, but regarding your CORS issue: It seems like instagram added a CORS policy somewhere last year (see this other question on SO). This means that you would indeed have to build a proxy.

Basically you need something that accepts all the endpoints that the original API accepts, forwards them to instagram, reads the response, and returns the response to the client (aka browser). But your proxy will then not add the CORS headers. Or even better, you add your own CORS headers (assuming your proxy and your app will run on the same server) and no one else will be able to use your proxy from their web app.

Unfortunately I don't know about this authentication window. Maybe this is just a fancy way to hide that they are running a proxy behind the scenes as well? You should be able to see in the network tab where the insta data is coming from after you login. I would guess not directly from their graph API.