Login with Instagram using Javascript

Login with Instagram using Javascript

Welcome folks I am back with another blog post. In this Post we will be making a complete Application in which we will be doing Login with Instagram using Javascript. Basically we will be integrating Instagram Auth with pure Javascript. So let’s get started with the application.

 

First of all we will be getting the access token to the Instagram API so that we can get the basic information regarding the user i.e. profile information including photo, username, bio, and website. So to get that we first of all get the access token. First of all you should create a Instagram Account if don’t have one and then go to the Instagram Developer Page to create a new Application. The steps are as follows.

 

 

 

 

As you can see that we have created a simple application. We have given a simple name and description and also most important thing to notice we have provided a redirect url this redirect url will be used by instagram to redirect the user to the screen where user can allow your application. Make sure you provide this url correctly. After that click on the Register button to register the application.

 

 

 

After you register your application you get your client id make sure save this. We will be using this client id later in the application. Click on the Manage button to also get the Client Secret of the application we will also need it in the application. And also don’t share this info with others.

 

 

After getting this information we will be starting the project. First of all we will be starting the server xampp. Start the server by hitting start button. My port number is 8080. Generally it will start at Port 80. You need to change it accordingly in the redirect url of your application.

 

 

After starting the server we will be creating files and folder for our project. Create project folder in the xampp htdocs folder.

 

 

 

<!DOCTYPE html>
<html>
<head>
    <title>User Profile</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div style="text-align:center;" class="well">
            User Profile Information
        </div>
        <div id="result"></div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="redirectscript.js"></script>
</script>
</html>

 

So as you can see in the figure we have created four files namely index.js, script.js, redirect.js and redirect.js. First of all we will be making index.html page just copy paste the code written below in index.js

 

 

So you can see in the above code in index.html we have just one heading and one button Which will trigger all the process of Authentication of Instagram. Now we will write code of handling what will happen if we press the login button so we will write in script.js file. Just copy paste this code in script.js file.

 

$(document).ready(function(){


$("button").click(function(){

var CLIENT_ID = "6ef2fb34d251417d835fc8cdaf8b8679";
var REDIRECT_URI = "http://localhost:8080/InstagramAuth/redirect.html";

var url = "https://api.instagram.com/oauth/authorize/?client_id="+ CLIENT_ID + "&redirect_uri="+REDIRECT_URI+"&response_type=code&scope=basic+likes+comments+follower_list+public_content";

window.location = url;

});  

});

 

Now in this code we are writing the code whenever the button is pressed by the user in this function we are just making a get request to the instagram api containing client id , and some scopes variables including basic , likes, comments, followers and much more. Scopes are basically what kind of information you are requesting from the user. After that we are just redirecting the user to this url. Now you will see a popup window generated by Instagram asking you to grant permission to this app. You can see this figure right below.

 

 

 

Now we will making the redirect url page to which users will go after granting access to your application. Just copy paste the below code to redirect.html.

 

<!DOCTYPE html>
<html>
<head>
    <title>User Profile</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div style="text-align:center;" class="well">
            User Profile Information
        </div>
        <div id="result"></div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="redirect.js"></script>
</script>
</html>

 

After this we wil making the last file which is redirect.js which will handle the part which contains displaying user information with the help of bootstrap classes in a nice way. Just copy paste below code in redirect.js file.

 

$(document).ready(function(){


var code = getCode("code");
var result;


var CLIENT_ID = "2106fa27fc544f96aa5e3e3b23f3d273";
var REDIRECT_URI = "http://localhost:8080/SocialAuth/redirect.html";
var CLIENT_SECRET = "8ae8df70d9974906982cbcffe7871b3a";

var url = "https://api.instagram.com/oauth/access_token";

$.ajax({
    url:  url,
    type: "POST",
    data: 
    {
     client_id:CLIENT_ID,
     client_secret:CLIENT_SECRET,
     redirect_uri:REDIRECT_URI,
     grant_type:"authorization_code",
     code:code
    },
    async:false,
    success: function(data){
       console.log(data);
       result = 
       `
            <img src="${data.user.profile_picture}" class="img-rounded">
            <p>UserName: ${data.user.username}</p>
            Bio:<p>Bio: ${data.user.bio}</p>
            Website:<p>Website: ${data.user.website}</p>
           `;
       $("#result").append(result);
    }
 }
);

 

function getCode(c){
        var fullUrl = window.location.search.substring(1);
        var parametersArray = fullUrl.split("&");
        for(var i = 0; i<parametersArray.length;i++)
        {
            var currentParameter = parametersArray[i].split("=");
            if(currentParameter[0] == c){
                return currentParameter[1];
            }
        }
    }


});

 

Now if you click the authorize button and go to the profile page of the user you will see the information about the user. The figure is right below.

 

 

Congratulations we are done making Login with Instagram using Javascript Application from Scratch. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.

 

Leave a Reply

Close Menu