Oct 9, 2018
Allow users to see their Instagram photos from your web app — OAuth 2.0
Today we gonna discuss about retrieving user resources from Instagram over the OAuth 2.0 implicit grant type.
We try to view user photos for the demonstration.
Initially, We need to get register our client app with instagram developer portal (https://www.instagram.com/developer/) as follows.
- Go to the Instagram Developer Portal: https://www.instagram.com/developer/
- Then go to ‘Manage Clients’ > ‘Register New Client’
3. Fill the form with required values and click on ‘Register’.
You could use fake values to fill this form because it will create only an sandbox app that won’t be able to use as live app. But you need to add valid redirect URL because it is where the application get redirected with the access token once the authentication is succeed. As an example, If i put the redirect URI as http://localhost/DemoApp/instagram, It will redirected with the access token as follows:
http://localhost/DemoApp/instagram#access_token=4259466592.9f36259.c0524353be16445d81307efa1524dd27
Please refer here to read more about sandbox mode. Simply this is an environment for development and apps in sandbox mode are not visible to the general public. Only pre-defined users can test and authenticate the app.
Once the registration is success, client is visible as follows (DemoApp)
Secondly, we need to obtain the access token…...
Since we are going to handle client-side OAuth flow, the implicit OAuth should be enabled by unticking the following check box:
Then we can obtain the access tokenvia a get request to the following url with specified parameters (client_id — Client id of the application, redirect_uri, response_type — ‘token’ since we are using implicit grant type).
I have used some sample values for mentioned parameters as per to the my client. You may need to add those per your app.
Check the following javascript based simple application that I have implemented for the demonstration purpose.
I have set up a simple login page in index.html to direct the browser to the previously mentioned endpoint to obtain the access token as follows.
$('#btnLogin').click(function(){
location.href="https://api.instagram.com/oauth/authorize/?client_id=2b5c5ce6e1bc4c9382b30b6d63325328&redirect_uri=http://localhost/DemoApp/instagram.html&response_type=token";
})Then if the user is not logged into instagram(in browser), Instagram login page is prompted.
Once the user logged in, the user consent page will be displayed requesting permissions.
Once the user authorize it, browser will be redirected to the URI (http://localhost/DemoApp/instagram.html) that we set during the registration of client app as follows.
Then we could extract the access token via URL fragment get user photos via GET request as follows:
all the endpoint details could be found in official doumentation in https://www.instagram.com/developer/endpoints/
When it comes to demo app, I have used instagrid.css and instafeed.js as well to come-up with following output.
Hope you got the understanding on how to retrieve user resources from Instagram over the OAuth 2.0 implicit grant type.
