Instagram is one of the most popular photos sharing platform and its users are increasing day by day.
Instagram provides APIs for getting the user details and use it to enable login using Instagram on the website.
For this –
- First, need to register the application to get the Client ID and secret key.
- Authenticate the application.
- Send request to get user details.
I am using PHP for implementing the APIs.
Contents
- Register App
- Get Client ID and Secret key
- Define constant
- Create Class
- Index page
- Callback
- Homepage
- Conclusion
1. Register Application
- To create new application go to Instagram Developer page.
- Login to your existing account and Click on the Register Your Application button.
- Fill the application details and define the valid redirect URLs. Click on the Register button.
- Client ID and a secret key of the application generated after successfully Register.
2. Get Client ID and Secret key
- Click on the Manage.
- Here, you get the Client ID and Client Secret of the application. This will use to authenticate and retrieve user info.
NOTE – The application
Client Statuscurrently in that means only you and selected users will access the application. You need to submit it for review and after successfuly reviewed the application is available publicily.
3. Define constant
Create a new insta_constant.php file.
Here, defines values of Client ID, Client secret, and Redirect URL.
Completed Code
<?php
define('_INSTAGRAM_CLIENT_ID','cc92fd967b794815b7d76cd8e9eefac1');
define('_INSTAGRAM_CLIENT_SECRET','38a17102847946cfa84d8cff1e65322d');
define('_INSTAGRAM_REDIRECT_URL','https://makitweb.com/demo/instagram_login/callback.php');
4. Create Class
Create a new instaClass.php file.
Create a instaClass Class and define 3 methods.
- authInstrgram() – Create authorization URL where pass Client ID, redirect URL and set response_type=code. Redirect to the URL.
- setAccess_token() – Set an Array for token where pass Client ID, Client Secret, grant_type, redirect_uri and code.
- getUserDetails() – Send a curl POST request on
https://api.instagram.com/oauth/access_tokenwhere pass thetoken_array.
This returns a JSON object which contains a user details e.g. username, fullname, bio, profile picture, etc.
Convert it in an Array and return it.
Completed Code
<?php
include "insta_constant.php";
class instaClass{
public $token_array;
// Authentication
public function authInstagram(){
$url = "https://api.instagram.com/oauth/authorize/?client_id="._INSTAGRAM_CLIENT_ID."&redirect_uri="._INSTAGRAM_REDIRECT_URL."&response_type=code";
header('location: '.$url);
}
// Set Access Token
public function setAccess_token($code){
$this->token_array = array("client_id"=>_INSTAGRAM_CLIENT_ID,
"client_secret"=>_INSTAGRAM_CLIENT_SECRET,
"grant_type"=>authorization_code,
"redirect_uri"=>_INSTAGRAM_REDIRECT_URL,
"code"=>$code);
}
// Get user details
public function getUserDetails(){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://api.instagram.com/oauth/access_token");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $this->token_array );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec ($ch);
curl_close ($ch);
return json_decode($result);
}
}
5. Index page
Create a new index.php file.
Define an object of instaClass Class.
On the button click authorize application by calling $obj_insta->authInstagram().
Completed Code
<?php
include "instaClass.php";
$obj_insta = new instaClass();
if(isset($_POST['instagram_login'])){
$obj_insta->authInstagram();
}
?>
<!doctype html>
<html>
<body>
<form method='post' action=''>
<input type='submit' value='Login with Instagram' name='instagram_login'>
</form>
</body>
</html>
6. Callback
Create a new callback.php file.
Page info
This is redirect file which is defined as redirect URL of the Application.
It is called after authorizing the application and also attach a code parameter with the URL.
Which use to set the Token and request user details.
Code Details
Include the instaClass.php.
Create object of instaClass and set the access token by calling setAccess_token() method where pass the $_GET['code'].
Get the user details by calling getUserDetails() method. The method return an array which use to initialize $_SESSION['insta_login'].
Redirect to home.php file.
Completed Code
<?php
session_start();
include "instaClass.php";
if(!isset($_GET['code'])){
header('location: index.php');
}
$obj_insta = new instaClass();
// Set access token
$obj_insta->setAccess_token($_GET['code']);
// Get user details
$result = $obj_insta->getUserDetails();
$_SESSION['insta_login'] = $result;
header('location: home.php');
7. Homepage
Create a new home.php file.
Read the value from $_SESSION['insta_login'] and display user details like – profile image, username, full name, bio, and website.
Completed Code
<?php
session_start();
if(!isset($_SESSION['insta_login'])){
header('location: index.php');
}
?>
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css' type='text/css' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js'></script>
</head>
<body>
<div class='container'>
<div class='row' style='margin-top: 20px;'>
<div class='col-md-3'>
<img src='<?= $_SESSION['insta_login']->user->profile_picture ?>' >
</div>
<div class='col-md-9'>
<p>Username : <?= $_SESSION['insta_login']->user->username; ?></p>
<p>Full Name : <?= $_SESSION['insta_login']->user->full_name ?></p>
<p>Bio : <?= $_SESSION['insta_login']->user->bio ?></p>
<p>Website : <?= $_SESSION['insta_login']->user->website ?></p>
</div>
</div>
</div>
</body>
</html>
The output will look like this where the page show user details.
8. Conclusion
After registering your application you need to submit it for review for making it live otherwise only you and selected users will access it.
If you like this post then don’t forget to share.
