AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home JavaScript

Login with Instagram using JavaScript SDK

Instagram Client ID

Lakshika Mathur by Lakshika Mathur
December 17, 2019
Reading Time: 7 mins read
0
Login with Instagram using JavaScript SDK

Instagram login via API is the easiest way to integrate the login system into a web application. Login with Instagram permits the user to log into the website with their own Instagram account. Instagram gives you an SDK or API for server-side and client-side authentication that used to implement Instagram Login functionality on the site. Client-side authentication is a user-friendly way to unify Instagram login using JavaScript.

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Confirmation Before Closing of Tab/Browser using JavaScript

The Instagram API permits the user to authenticate with an Instagram account from the web application. Therefore, By Using JavaScript SDK, you can implement the user login system with Instagram on a single page without page refresh. The Instagram API user needs an access_token to get user profile data from Instagram. In this article, we will explain to you how to implement Login with Instagram using JavaScript SDK and store Instagram profile data in the database using Ajax, jQuery, PHP, and MySQL.

Instagram Client ID

Before proceeding to implement Instagram Login with JavaScript API on the website, you need a Client ID. This Client ID requires to be registered on Instagram Developer Panel.

Functionality Overview

The following functions given below will be implemented for social Login with Instagram by using JavaScript API.

  • Firstly, Authorise with the Instagram account.
  • Secondly, retrieve the user’s profile data from Instagram.
  • Thirdly, save profile data in the database using PHP and MySQL.
  • And at last, display the profile data of the user.

Create Database Table

It would be best if you made a table in the database to store the user’s profile data. The following SQL creates a user table with some required fields in the MySQL database.

CREATE TABLE `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `oauth_provider` enum('instagram','facebook','google','linkedin','') COLLATE utf8_unicode_ci NOT NULL,
 `oauth_uid` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `first_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `last_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `gender` varchar(5) COLLATE utf8_unicode_ci NOT NULL,
 `picture` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `link` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Login with Instagram using JavaScript SDK

JavaScript Code:

 The example code uses Ajax and jQuery, include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The JavaScript code given below handles the Instagram authentication process.

  • Authenticate with Instagram API.
  • Get the access token via OAuth API.
  • Retrieve profile data by the access token.
  • Display user data in the web page.
  • Save profile data in the database.
  • Now, store user data in the session using window sessionStorage property.
// Access token is required to make any endpoint calls,
// http://instagram.com/developer/endpoints/
var accessToken = null;
var authenticateInstagram = function(instagramClientId, instagramRedirectUri, callback) {
    // Pop-up window size, change if you want
    var popupWidth = 700,
        popupHeight = 500,
        popupLeft = (window.screen.width - popupWidth) / 2,
        popupTop = (window.screen.height - popupHeight) / 2;
    // Url needs to point to instagram_auth.php
    var popup = window.open('instagram_auth.php', '', 'width='+popupWidth+',height='+popupHeight+',left='+popupLeft+',top='+popupTop+'');
    popup.onload = function() {
        // Open authorize url in pop-up
        if(window.location.hash.length == 0) {
            popup.open('https://instagram.com/oauth/authorize/?client_id='+instagramClientId+'&redirect_uri='+instagramRedirectUri+'&response_type=token', '_self');
        }
        // An interval runs to get the access token from the pop-up
        var interval = setInterval(function() {
            try {
                // Check if hash exists
                if(popup.location.hash.length) {
                    // Hash found, that includes the access token
                    clearInterval(interval);
                    accessToken = popup.location.hash.slice(14); //slice #access_token= from string
                    popup.close();
                    if(callback != undefined && typeof callback == 'function'){
                        callback();
                    }
                }
            }
            catch(evt) {
                // Permission denied
            }
        }, 100);
    };
};

function login_callback(){
    //alert("You are successfully logged in! Access Token: "+accessToken);
    $.ajax({
        type: "GET",
        dataType: "jsonp",
        url: "https://api.instagram.com/v1/users/self/?access_token="+accessToken,
        success: function(response){
            // Change button and show status
            $('.instagramLoginBtn').attr('onclick','instagramLogout()');
            $('.btn-text').text('Logout from Instagram');
            $('#status').text('Thanks for logging in, ' + response.data.username + '!');
            
            // Display user data
            displayUserProfileData(response.data);
            
            // Save user data
            saveUserData(response.data);
            
            // Store user data in sessionStorage
            sessionStorage.setItem("userLoggedIn", "1");
            sessionStorage.setItem("provider", "instagram");
            sessionStorage.setItem("userData", JSON.stringify(response.data));
        }
      });
}

 

 The use of the  instagramLogin()  the function requires specifying the client ID and the redirect URL in the authenticateInstagram() function.

// Authenticate instagram
function instagramLogin() {
    authenticateInstagram(
        'InstagramClientID',
        'InstagramRedirectURI',
        login_callback //optional - a callback function
    );
    return false;
}

The saveUserData() function post the user’s profile data to the  userData.php  file using jQuery and Ajax.

// Save user data to the database
function saveUserData(userData){
    $.post('userData.php', {oauth_provider:'instagram',userData: JSON.stringify(userData)}, function(data){ return true; });
}

The  displayUserProfileData()the function shows the retrieved profile information to the user.

// Display user profile details
function displayUserProfileData(userData){
    $('#userData').html('<p><b>Instagram ID:</b> '+userData.id+'</p><p><b>Name:</b> '+userData.full_name+'</p><p><b>Picture:</b> <img src="'+userData.profile_picture+'"/></p><p><b>Instagram Profile:</b> <a target="_blank" href="https://www.instagram.com/'+userData.username+'">click to view profile</a></p>');
}

After refreshing the page, if the user already logged in with Instagram, the user data will be retrieved from the sessionStorage.

// Get user data from session storage
$(document).ready(function(){
    if(typeof(Storage) !== "undefined"){
        var userLoggedIn = sessionStorage.getItem("userLoggedIn");
        if(userLoggedIn == '1'){
            // Get user data from session storage
            var provider = sessionStorage.getItem("provider");
            var userInfo = sessionStorage.getItem("userData");
            var userData = $.parseJSON(userInfo);
            
            // Change button and show status
            $('.instagramLoginBtn').attr('onclick','instagramLogout()');
            $('.btn-text').text('Logout from Instagram');
            $('#status').text('Thanks for logging in, ' + userData.username + '!');
            
            // Display user data
            displayUserProfileData(userData);
        }
    }else{
        console.log("Sorry, your browser does not support Web Storage...");
    }
});

The instagramLogout() function log out the user from the login session of Instagram.

// Logout from instagram
function instagramLogout() {
    // Remove user data from sessionStorage
    sessionStorage.removeItem("userLoggedIn");
    sessionStorage.removeItem("provider");
    sessionStorage.removeItem("userData");
    sessionStorage.clear();
    
    $('.instagramLoginBtn').attr('onclick','instagramLogin()');
    $('.btn-text').text('Login with Instagram');
    $('#status').text('You have successfully logout from Instagram.');
    $('#userData').html('');
}

HTML Code:

Firstly, the Login with the Instagram button will be shown. Secondly, by clicking the button, Instagram authentication popup will appear. At last, if the Login is successful, the login status and the user profile data will be shown.

<!-- Display login status -->
<div id="status"></div>

<!-- Instagram login or logout button -->
<a href="javascript:void(0)" onclick="instagramLogin();">Login with Instagram</a>

<!-- Display user profile data -->
<div id="userData"></div>

Store Profile Data in the Database

dbConfig.php

 To connect and select the database you have to use the dbConfig.php file is used.

<?php
// Database configuration
$dbHost     = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName     = "codexworld";

//Create connection and select DB
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

if ($db->connect_error) {
    die("Unable to connect database: " . $db->connect_error);
}
?>

userData.php

It decodes the JSON data posted by using the json_decode () function in PHP. Based on oauth_provider and oauth_uid, we will check if the user already exists in the database and update the user data in the user’s table using PHP and MySQL.

<?php
// Load the database configuration file
include 'dbConfig.php';

// Decode json data
$userData = json_decode($_POST['userData']);

// If user data not empty
if(!empty($userData)){
    // User profile info
    $oauth_provider = $_POST['oauth_provider'];
    $full_name = $userData->full_name;
    $full_name_arr = explode(' ',$full_name);
    $first_name = !empty($full_name_arr[0])?$full_name_arr[0]:'';
    $last_name = !empty($full_name_arr[1])?$full_name_arr[1]:'';
    $link = 'https://www.instagram.com/'.$userData->username;
    
    // Check whether the user data already exists in the database
    $prevQuery = "SELECT * FROM users WHERE oauth_provider = '".$oauth_provider."' AND oauth_uid = '".$userData->id."'";
    $prevResult = $db->query($prevQuery);
    
    if($prevResult->num_rows > 0){ 
        // Update user data if already exists
        $query = "UPDATE users SET first_name = '".$first_name."', last_name = '".$last_name."', email = '', gender = '', picture = '".$userData->profile_picture."', link = '".$link."', modified = '".date("Y-m-d H:i:s")."' WHERE oauth_provider = '".$oauth_provider."' AND oauth_uid = '".$userData->id."'";
        $update = $db->query($query);
    }else{
        // Insert user data in the database
        $query = "INSERT INTO users SET oauth_provider = '".$oauth_provider."', oauth_uid = '".$userData->id."', first_name = '".$first_name."', last_name = '".$last_name."', email = '', gender = '', picture = '".$userData->profile_picture."', link = '".$link."', created = '".date("Y-m-d H:i:s")."', modified = '".date("Y-m-d H:i:s")."'";
        $insert = $db->query($query);
    }
}
?>

Conclusion

Our instance code will help you to integrate Instagram Login on the website without page refresh. The user can log in with their Instagram account on a single page without any page reload. If you want to extend the social login accounts availability, add Instagram to the existing social login system.

 

Also, read our previous blog- Login with Instagram using PHP

Tags: InstagramSDK
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Confirmation Before Closing of Tab/Browser using JavaScript
JavaScript

Confirmation Before Closing of Tab/Browser using JavaScript

January 2, 2020
496
Create a Digital Clock with Date using JavaScript
JavaScript

Create a Digital Clock with Date using JavaScript

January 2, 2020
182
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
Next Post
Google Invisible reCAPTCHA with PHP

Google Invisible reCAPTCHA with PHP

Integrate new Google reCAPTCHA Checkbox with PHP

Integrate new Google reCAPTCHA Checkbox with PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version