logo
post image

Login with Instagram using PHP

You can implement Login with Instagram feature in your web application using its API. In this tutorial I will discuss its implementation.

Allowing users to Login with Instagram is a good option for web applications related to photograhpy.

Through the Instagram APIs you can get user information such as username, ID, name, profile picture and a few more. However you cannot get email of the user.

Important Thing to Note

After building your application, you need to get it approved from Instagram so that it becomes live to all. Until the application goes live, only the application creator and a few selected users can use it.
Submitting your application for review does not sound fun, but with increasing cases of API abuse it is slowly becoming a reality (a review is also required in Facebook & Pinterest apps). However using just the login API is a very basic thing (as compared to extended features like commenting, following users) and in this case I think Instagram should approve your application quite easily.

Creating an Instagram Application

The first step would be to create a Instagram web application :

  • Create an Instagram application on Instagram Developer
  • Enter the fields Application Name, Description, Website URL and Valid redirect URIs. You can fill the rest of the fields later when you submit the application for review.
  • In the field Valid redirect URIs, add the url which points to the redirect url script. Redirect url specifies where Instagram redirects users after they choose to authenticate your application. You can even add a localhost url for testing purposes.
  • In the Security tab, leave the default settings (Disable implicit OAuth should be checked & Enforce signed requests should be unchecked).
  • After the application is created, you will get the Client ID & Client Secret.

Basic Understanding of the Login Process

Like most of the web applications Instagram API also uses OAuth2 for authentication. OAuth2 works in a manner like :

  1. You add a link in your HTML code that will redirect to Instagram's servers for login / authorization.
  2. You provide a redirect url. Instagram will redirect the user to this url after he authorizes your application. Instagram will also pass an authorization code to this redirect url.
  3. You use the authorization code to get an access token from Instagram.
  4. You use the access token to get user information such as username, ID, name, picture etc.

Step 1 : Save the App Client ID and Client Secret

Use a settings.php file to save Client ID, Client Secret and Redirect Url

<?php /* Instagram App Client Id */ define('INSTAGRAM_CLIENT_ID', 'xxxxxxxxxxxxxxxxxxxx'); /* Instagram App Client Secret */ define('INSTAGRAM_CLIENT_SECRET', 'xxxxxxxxxxxxxxxxxxxx'); /* Instagram App Redirect Url */ define('INSTAGRAM_REDIRECT_URI', 'xxxxxxxxxxxxxxxxxxxx'); ?>

Step 2 : Add Link to Instagram Login URL in HTML

Add the link to Instagram login url in your HTML code. You can also use PHP's header or Javascript's document.location to redirect to the login url.

<?php require_once('settings.php'); $login_url = 'https://api.instagram.com/oauth/authorize/?client_id=' . INSTAGRAM_CLIENT_ID . '&redirect_uri=' . urlencode(INSTAGRAM_REDIRECT_URI) . '&response_type=code&scope=basic'; ?> <body> ..... <a href="<?= $login_url ?>">Login with Instagram</a> ..... </body> </html>

The login url is basically https://api.instagram.com/oauth/authorize with four parameters :

  • redirect_uri : Your redirect url
  • response_type : Set it to the default value of "code"
  • client_id : Your Instagram App Client ID
  • scope : Scope is basically what you are looking to do or get from the user. Instagram provides 6 scopes that you can request from the user. These scopes are related to getting basic information of the user, getting and posting comments, following or un-following on behalf of the user etc. For detailed information see Login Permissions (Scopes)
    For user login and getting his basic information you just need a single scope - basic
    In case you are requesting for multiple scopes the login url will be in the form : $login_url = 'https://api.instagram.com/oauth/authorize/?client_id=' . INSTAGRAM_CLIENT_ID . '&redirect_uri=' . urlencode(INSTAGRAM_REDIRECT_URI) . '&response_type=code&scope=' . urlencode('basic comments likes');

Clicking on the login link will redirect the user to Instagram where he logins to Instagram and authorizes your application. After this, Instagram redirects the user to the redirect url that you have provided. The redirect url script will handle the next steps.

Step 3 : Preparing the Redirect Url Script

On redirecting the user to your given redirect url Instagram passes an authorization code as a GET parameter named code. You must use this code and make an API call to get an access token.

After you get the access token you can make another API call to get the user profile information.

<?php session_start(); // Instagram passes a parameter 'code' in the Redirect Url if(isset($_GET['code'])) { try { $instagram_ob = new InstagramApi(); // Get the access token $access_token = $instagram_ob->GetAccessToken(INSTAGRAM_CLIENT_ID, INSTAGRAM_REDIRECT_URI, INSTAGRAM_CLIENT_SECRET, $_GET['code']); // Get user information $user_info = $instagram_ob->GetUserProfileInfo($access_token); echo '<pre>';print_r($user_info); echo '</pre>'; // Now that the user is logged in you may want to start some session variables $_SESSION['logged_in'] = 1; // You may now want to redirect the user to the home page of your website // header('Location: home.php'); } catch(Exception $e) { echo $e->getMessage(); exit; } } ?>

API call to get access token using authorization code :

function GetAccessToken($client_id, $redirect_uri, $client_secret, $code) { $url = 'https://api.instagram.com/oauth/access_token'; $curlPost = 'client_id='. $client_id . '&redirect_uri=' . $redirect_uri . '&client_secret=' . $client_secret . '&code='. $code . '&grant_type=authorization_code'; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_POSTFIELDS, $curlPost); $data = json_decode(curl_exec($ch), true); $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); if($http_code != '200') throw new Exception('Error : Failed to receieve access token'); return $data['access_token']; }

API call to get user profile information using access token :

function GetUserProfileInfo($access_token) { $url = 'https://api.instagram.com/v1/users/self/?access_token=' . $access_token; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); $data = json_decode(curl_exec($ch), true); $http_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); if($data['meta']['code'] != 200 || $http_code != 200) throw new Exception('Error : Failed to get user information'); return $data['data']; }

Making the Application Live

The application you've created is in sandbox mode — it won't work for all users. Only the creator of the application and a few sandbox users are allowed to test the application. To make the application live to all, you must approve the application from Instagram. It has been said that Instagram approves apps within a day or two.

You can submit your application for review from the Permissions tab of the application's settings.