{"id":3213,"date":"2018-05-01T20:03:12","date_gmt":"2018-05-01T20:03:12","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3213"},"modified":"2018-05-01T20:12:15","modified_gmt":"2018-05-01T20:12:15","slug":"login-with-instagram-using-javascript-sdk","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/","title":{"rendered":"Login with Instagram using JavaScript SDK"},"content":{"rendered":"<p>Instagram Login through API is the easiest way to integrate login system in the web application. Login with Instagram allows the user to log into the website with their Instagram account without registration. Instagram provides API or SDK for server-side and client-side authentication that used to implement Instagram Login functionality on the website. Client-side authentication is a user-friendly way to integrate <b>Instagram Login using JavaScript<\/b>.<\/p>\n<p>The Instagram API allows the user to authenticate with an Instagram account from the web application. Using JavaScript SDK, you can implement the user login system with Instagram on a single page without page refresh. The Instagram API authentication require an access_token to get the user profile data from Instagram. In this tutorial, we will show you how to implement Login with Instagram using JavaScript SDK and store the Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.<\/p>\n<h2>Instagram Client ID<\/h2>\n<p>Before get started to implement Instagram Login with JavaScript API on the website, you need a Client ID. This Client ID needs to be registered on <a href=\"https:\/\/www.instagram.com\/developer\/\" target=\"_blank\">Instagram Developer Panel<\/a>.<\/p>\n<p>If you don&#8217;t already register your Instagram Application, follow this step-by-step tutorial to register new Client ID &#8211; <a href=\"https:\/\/www.codexworld.com\/how-to\/register-instagram-app-create-client-id\/\">How to register Instagram App and create Client ID<\/a><\/p>\n<h2>Functionality Overview<\/h2>\n<p>The following functionality will be implemented for social login with Instagram using JavaScript API.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Authenticate with the Instagram account.<\/li>\n<li>Retrieve the user&#8217;s profile data from Instagram.<\/li>\n<li>Save profile data in the database using PHP and MySQL.<\/li>\n<li>Display the profile data of the user.<\/li>\n<\/ul>\n<h2>Create Database Table<\/h2>\n<p>To store the user&#8217;s profile data, a table needs in the database. The following SQL creates a users table with some basic fields in the MySQL database.<\/p>\n<pre><span style=\"color:#794938\">CREATE<\/span> <span style=\"color:#794938\">TABLE<\/span> `<span style=\"color:#bf4f24\">users<\/span>` (\r\n <span style=\"color:#0b6125\">`id`<\/span> <span style=\"color:#a71d5d;font-style:italic\">int<\/span>(<span style=\"color:#811f24;font-weight:700\">11<\/span>) <span style=\"color:#794938\">NOT NULL<\/span> AUTO_INCREMENT,\r\n <span style=\"color:#0b6125\">`oauth_provider`<\/span> enum(<span style=\"color:#0b6125\">'instagram'<\/span>,<span style=\"color:#0b6125\">'facebook'<\/span>,<span style=\"color:#0b6125\">'google'<\/span>,<span style=\"color:#0b6125\">'linkedin'<\/span>,<span style=\"color:#0b6125\">''<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`oauth_uid`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">100<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`first_name`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">50<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`last_name`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">50<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`email`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">100<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`gender`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">5<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`picture`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">255<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`link`<\/span> <span style=\"color:#a71d5d;font-style:italic\">varchar<\/span>(<span style=\"color:#811f24;font-weight:700\">255<\/span>) COLLATE utf8_unicode_ci <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`created`<\/span> datetime <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#0b6125\">`modified`<\/span> datetime <span style=\"color:#794938\">NOT NULL<\/span>,\r\n <span style=\"color:#a71d5d;font-style:italic\">PRIMARY KEY<\/span> (<span style=\"color:#0b6125\">`id`<\/span>)\r\n) ENGINE<span style=\"color:#794938\">=<\/span>InnoDB DEFAULT CHARSET<span style=\"color:#794938\">=<\/span>utf8 COLLATE<span style=\"color:#794938\">=<\/span>utf8_unicode_ci;\r\n<\/pre>\n<h2>Login with Instagram using JavaScript SDK<\/h2>\n<p><b>JavaScript Code:<\/b><br \/>\nThe example code uses jQuery and Ajax, include the jQuery library first.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>The following JavaScript code handles the Instagram authentication process.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Authenticate with Instagram API.<\/li>\n<li>Get the access token via OAuth API.<\/li>\n<li>Retrieve profile data by the access token.<\/li>\n<li>Display user data in the web page.<\/li>\n<li>Save profile data in the database.<\/li>\n<li>Store user data in the session using window sessionStorage property.<\/li>\n<\/ul>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ Access token is required to make any endpoint calls,<\/span>\r\n<span style=\"color:#5a525f;font-style:italic\">\/\/ http:\/\/instagram.com\/developer\/endpoints\/<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> accessToken <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">null<\/span>;\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> <span style=\"color:#bf4f24\">authenticateInstagram<\/span> <span style=\"color:#794938\">=<\/span> <span style=\"color:#a71d5d;font-style:italic\">function<\/span>(instagramClientId, instagramRedirectUri, callback) {\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/ Pop-up window size, change if you want<\/span>\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> popupWidth <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">700<\/span>,\r\n        popupHeight <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">500<\/span>,\r\n        popupLeft <span style=\"color:#794938\">=<\/span> (<span style=\"color:#691c97\">window<\/span>.<span style=\"color:#691c97\">screen<\/span><span style=\"color:#693a17\">.width<\/span> <span style=\"color:#794938\">-<\/span> popupWidth) \/ <span style=\"color:#811f24;font-weight:700\">2<\/span>,\r\n        popupTop <span style=\"color:#794938\">=<\/span> (<span style=\"color:#691c97\">window<\/span>.<span style=\"color:#691c97\">screen<\/span><span style=\"color:#693a17\">.height<\/span> <span style=\"color:#794938\">-<\/span> popupHeight) \/ <span style=\"color:#811f24;font-weight:700\">2<\/span>;\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/ Url needs to point to instagram_auth.php<\/span>\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> popup <span style=\"color:#794938\">=<\/span> <span style=\"color:#691c97\">window<\/span>.<span style=\"color:#693a17\">open<\/span>(<span style=\"color:#0b6125\">'instagram_auth.php'<\/span>, <span style=\"color:#0b6125\">''<\/span>, <span style=\"color:#0b6125\">'width='<\/span><span style=\"color:#794938\">+<\/span>popupWidth<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">',height='<\/span><span style=\"color:#794938\">+<\/span>popupHeight<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">',left='<\/span><span style=\"color:#794938\">+<\/span>popupLeft<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">',top='<\/span><span style=\"color:#794938\">+<\/span>popupTop<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">''<\/span>);\r\n    <span style=\"color:#691c97\">popup<\/span>.<span style=\"color:#bf4f24\">onload<\/span> <span style=\"color:#794938\">=<\/span> <span style=\"color:#a71d5d;font-style:italic\">function<\/span>() {\r\n        <span style=\"color:#5a525f;font-style:italic\">\/\/ Open authorize url in pop-up<\/span>\r\n        <span style=\"color:#794938\">if<\/span>(<span style=\"color:#691c97\">window<\/span>.<span style=\"color:#b4371f\">location<\/span>.<span style=\"color:#b4371f\">hash<\/span><span style=\"color:#693a17\">.length<\/span> <span style=\"color:#794938\">==<\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span>) {\r\n            popup.<span style=\"color:#693a17\">open<\/span>(<span style=\"color:#0b6125\">'https:\/\/instagram.com\/oauth\/authorize\/?client_id='<\/span><span style=\"color:#794938\">+<\/span>instagramClientId<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'&amp;redirect_uri='<\/span><span style=\"color:#794938\">+<\/span>instagramRedirectUri<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'&amp;response_type=token'<\/span>, <span style=\"color:#0b6125\">'_self'<\/span>);\r\n        }\r\n        <span style=\"color:#5a525f;font-style:italic\">\/\/ An interval runs to get the access token from the pop-up<\/span>\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> interval <span style=\"color:#794938\">=<\/span> <span style=\"color:#693a17\">setInterval<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span>() {\r\n            <span style=\"color:#794938\">try<\/span> {\r\n                <span style=\"color:#5a525f;font-style:italic\">\/\/ Check if hash exists<\/span>\r\n                <span style=\"color:#794938\">if<\/span>(popup.<span style=\"color:#b4371f\">location<\/span>.<span style=\"color:#b4371f\">hash<\/span><span style=\"color:#693a17\">.length<\/span>) {\r\n                    <span style=\"color:#5a525f;font-style:italic\">\/\/ Hash found, that includes the access token<\/span>\r\n                    <span style=\"color:#693a17\">clearInterval<\/span>(interval);\r\n                    accessToken <span style=\"color:#794938\">=<\/span> popup.<span style=\"color:#b4371f\">location<\/span>.<span style=\"color:#b4371f\">hash<\/span><span style=\"color:#693a17\">.slice<\/span>(<span style=\"color:#811f24;font-weight:700\">14<\/span>); <span style=\"color:#5a525f;font-style:italic\">\/\/slice #access_token= from string<\/span>\r\n                    popup.<span style=\"color:#693a17\">close<\/span>();\r\n                    <span style=\"color:#794938\">if<\/span>(callback <span style=\"color:#794938\">!<\/span><span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">undefined<\/span> <span style=\"color:#794938\">&amp;<\/span><span style=\"color:#794938\">&amp;<\/span> <span style=\"color:#794938\">typeof<\/span> callback <span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">'function'<\/span>){\r\n                        callback();\r\n                    }\r\n                }\r\n            }\r\n            <span style=\"color:#794938\">catch<\/span>(evt) {\r\n                <span style=\"color:#5a525f;font-style:italic\">\/\/ Permission denied<\/span>\r\n            }\r\n        }, <span style=\"color:#811f24;font-weight:700\">100<\/span>);\r\n    };\r\n};\r\n\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">login_callback<\/span>(){\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/alert(\"You are successfully logged in! Access Token: \"+accessToken);<\/span>\r\n    <span style=\"color:#794938\">$<\/span><span style=\"color:#693a17\">.ajax<\/span>({\r\n        type: <span style=\"color:#0b6125\">\"GET\"<\/span>,\r\n        dataType: <span style=\"color:#0b6125\">\"jsonp\"<\/span>,\r\n        url: <span style=\"color:#0b6125\">\"https:\/\/api.instagram.com\/v1\/users\/self\/?access_token=\"<\/span><span style=\"color:#794938\">+<\/span>accessToken,\r\n        <span style=\"color:#bf4f24\">success<\/span>: <span style=\"color:#a71d5d;font-style:italic\">function<\/span>(response){\r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Change button and show status<\/span>\r\n            <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.instagramLoginBtn<\/span>')<span style=\"color:#693a17\">.attr<\/span>(<span style=\"color:#0b6125\">'onclick'<\/span>,<span style=\"color:#0b6125\">'instagramLogout()'<\/span>);\r\n            <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.btn-text<\/span>')<span style=\"color:#693a17\">.text<\/span>(<span style=\"color:#0b6125\">'Logout from Instagram'<\/span>);\r\n            <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#status<\/span>')<span style=\"color:#693a17\">.text<\/span>(<span style=\"color:#0b6125\">'Thanks for logging in, '<\/span> <span style=\"color:#794938\">+<\/span> response.<span style=\"color:#b4371f\">data<\/span>.username <span style=\"color:#794938\">+<\/span> <span style=\"color:#0b6125\">'!'<\/span>);\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Display user data<\/span>\r\n            displayUserProfileData(response.<span style=\"color:#b4371f\">data<\/span>);\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Save user data<\/span>\r\n            saveUserData(response.<span style=\"color:#b4371f\">data<\/span>);\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Store user data in sessionStorage<\/span>\r\n            sessionStorage.setItem(<span style=\"color:#0b6125\">\"userLoggedIn\"<\/span>, <span style=\"color:#0b6125\">\"1\"<\/span>);\r\n            sessionStorage.setItem(<span style=\"color:#0b6125\">\"provider\"<\/span>, <span style=\"color:#0b6125\">\"instagram\"<\/span>);\r\n            sessionStorage.setItem(<span style=\"color:#0b6125\">\"userData\"<\/span>, JSON.stringify(response.<span style=\"color:#b4371f\">data<\/span>));\r\n        }\r\n      });\r\n}\r\n<\/pre>\n<p>The <code>instagramLogin()<\/code> function is used to authenticate with Instagram account. The client ID and redirect URL need to be specified in the <code>authenticateInstagram()<\/code> function.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ Authenticate instagram<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">instagramLogin<\/span>() {\r\n    authenticateInstagram(\r\n        <span style=\"color:#0b6125\">'InstagramClientID'<\/span>,\r\n        <span style=\"color:#0b6125\">'InstagramRedirectURI'<\/span>,\r\n        login_callback <span style=\"color:#5a525f;font-style:italic\">\/\/optional - a callback function<\/span>\r\n    );\r\n    <span style=\"color:#794938\">return<\/span> <span style=\"color:#811f24;font-weight:700\">false<\/span>;\r\n}<\/pre>\n<p>The <code>saveUserData()<\/code> function post the user&#8217;s profile data to the <code>userData.php<\/code> file using jQuery and Ajax.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ Save user data to the database<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">saveUserData<\/span>(userData){\r\n    <span style=\"color:#794938\">$<\/span><span style=\"color:#693a17\">.post<\/span>(<span style=\"color:#0b6125\">'userData.php'<\/span>, {oauth_provider:<span style=\"color:#0b6125\">'instagram'<\/span>,userData: JSON.stringify(userData)}, <span style=\"color:#a71d5d;font-style:italic\">function<\/span>(data){ <span style=\"color:#794938\">return<\/span> <span style=\"color:#811f24;font-weight:700\">true<\/span>; });\r\n}\r\n<\/pre>\n<p>The <code>displayUserProfileData()<\/code> function show the retrieved profile information to the user. <\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ Display user profile details<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">displayUserProfileData<\/span>(userData){\r\n    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#userData<\/span>')<span style=\"color:#693a17\">.html<\/span>(<span style=\"color:#0b6125\">'&lt;p>&lt;b>Instagram ID:&lt;\/b> '<\/span><span style=\"color:#794938\">+<\/span>userData.<span style=\"color:#b4371f\">id<\/span><span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'&lt;\/p>&lt;p>&lt;b>Name:&lt;\/b> '<\/span><span style=\"color:#794938\">+<\/span>userData.full_name<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'&lt;\/p>&lt;p>&lt;b>Picture:&lt;\/b> &lt;img src=\"'<\/span><span style=\"color:#794938\">+<\/span>userData.profile_picture<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'\"\/>&lt;\/p>&lt;p>&lt;b>Instagram Profile:&lt;\/b> &lt;a target=\"_blank\" href=\"https:\/\/www.instagram.com\/'<\/span><span style=\"color:#794938\">+<\/span>userData.username<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">'\">click to view profile&lt;\/a>&lt;\/p>'<\/span>);\r\n}\r\n<\/pre>\n<p>After the page refresh, if the user already logged in with Instagram, the user data will be retrieved from the sessionStorage.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ Get user data from session storage<\/span>\r\n<span style=\"color:#691c97\">$<\/span>(<span style=\"color:#691c97\">document<\/span>)<span style=\"color:#693a17\">.ready<\/span>(<span style=\"color:#a71d5d;font-style:italic\">function<\/span>(){\r\n    <span style=\"color:#794938\">if<\/span>(<span style=\"color:#794938\">typeof<\/span>(Storage) <span style=\"color:#794938\">!<\/span><span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">\"undefined\"<\/span>){\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> userLoggedIn <span style=\"color:#794938\">=<\/span> sessionStorage.getItem(<span style=\"color:#0b6125\">\"userLoggedIn\"<\/span>);\r\n        <span style=\"color:#794938\">if<\/span>(userLoggedIn <span style=\"color:#794938\">==<\/span> <span style=\"color:#0b6125\">'1'<\/span>){\r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Get user data from session storage<\/span>\r\n            <span style=\"color:#a71d5d;font-style:italic\">var<\/span> provider <span style=\"color:#794938\">=<\/span> sessionStorage.getItem(<span style=\"color:#0b6125\">\"provider\"<\/span>);\r\n            <span style=\"color:#a71d5d;font-style:italic\">var<\/span> userInfo <span style=\"color:#794938\">=<\/span> sessionStorage.getItem(<span style=\"color:#0b6125\">\"userData\"<\/span>);\r\n            <span style=\"color:#a71d5d;font-style:italic\">var<\/span> userData <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">$<\/span>.parseJSON(userInfo);\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Change button and show status<\/span>\r\n            <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.instagramLoginBtn<\/span>')<span style=\"color:#693a17\">.attr<\/span>(<span style=\"color:#0b6125\">'onclick'<\/span>,<span style=\"color:#0b6125\">'instagramLogout()'<\/span>);\r\n            <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.btn-text<\/span>')<span style=\"color:#693a17\">.text<\/span>(<span style=\"color:#0b6125\">'Logout from Instagram'<\/span>);\r\n            <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#status<\/span>')<span style=\"color:#693a17\">.text<\/span>(<span style=\"color:#0b6125\">'Thanks for logging in, '<\/span> <span style=\"color:#794938\">+<\/span> userData.username <span style=\"color:#794938\">+<\/span> <span style=\"color:#0b6125\">'!'<\/span>);\r\n            \r\n            <span style=\"color:#5a525f;font-style:italic\">\/\/ Display user data<\/span>\r\n            displayUserProfileData(userData);\r\n        }\r\n    }<span style=\"color:#794938\">else<\/span>{\r\n        <span style=\"color:#bf4f24\">console<\/span><span style=\"color:#693a17\">.log<\/span>(<span style=\"color:#0b6125\">\"Sorry, your browser does not support Web Storage...\"<\/span>);\r\n    }\r\n});\r\n<\/pre>\n<p>The <code>instagramLogout()<\/code> function log out the user from the login session of Instagram.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">\/\/ Logout from instagram<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">instagramLogout<\/span>() {\r\n    <span style=\"color:#5a525f;font-style:italic\">\/\/ Remove user data from sessionStorage<\/span>\r\n    sessionStorage.removeItem(<span style=\"color:#0b6125\">\"userLoggedIn\"<\/span>);\r\n    sessionStorage.removeItem(<span style=\"color:#0b6125\">\"provider\"<\/span>);\r\n    sessionStorage.removeItem(<span style=\"color:#0b6125\">\"userData\"<\/span>);\r\n    sessionStorage.<span style=\"color:#693a17\">clear<\/span>();\r\n    \r\n    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.instagramLoginBtn<\/span>')<span style=\"color:#693a17\">.attr<\/span>(<span style=\"color:#0b6125\">'onclick'<\/span>,<span style=\"color:#0b6125\">'instagramLogin()'<\/span>);\r\n    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">.btn-text<\/span>')<span style=\"color:#693a17\">.text<\/span>(<span style=\"color:#0b6125\">'Login with Instagram'<\/span>);\r\n    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#status<\/span>')<span style=\"color:#693a17\">.text<\/span>(<span style=\"color:#0b6125\">'You have successfully logout from Instagram.'<\/span>);\r\n    <span style=\"color:#691c97\">$<\/span>('<span style=\"color:#bf4f24\">#userData<\/span>')<span style=\"color:#693a17\">.html<\/span>(<span style=\"color:#0b6125\">''<\/span>);\r\n}\r\n<\/pre>\n<p><b>HTML Code:<\/b><br \/>\nInitially, the Login with Instagram button will be displayed. By clicking the button, Instagram authentication popup will appear. If the login is successful, the login status and the user profile data will be shown.<\/p>\n<pre><span style=\"color:#5a525f;font-style:italic\">&lt;!-- Display login status --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"status\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- Instagram login or logout button --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"javascript:void(0)\"<\/span> <span style=\"color:#bf4f24\">onclick<\/span>=<span style=\"color:#0b6125\">\"instagramLogin();\"<\/span>>Login with Instagram&lt;\/<span style=\"color:#bf4f24\">a<\/span>>\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">&lt;!-- Display user profile data --><\/span>\r\n&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"userData\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<h2>Store Profile Data in the Database<\/h2>\n<p><b><code>dbConfig.php<\/code><\/b><br \/>\nThe <code>dbConfig.php<\/code> file is used to connect and select the database.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php<br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Database&nbsp;configuration<br \/><\/span><span style=\"color: #0000BB\">$dbHost&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"localhost\"<\/span><span style=\"color: #007700\">;<br \/><\/span><span style=\"color: #0000BB\">$dbUsername&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">;<br \/><\/span><span style=\"color: #0000BB\">$dbPassword&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"root\"<\/span><span style=\"color: #007700\">;<br \/><\/span><span style=\"color: #0000BB\">$dbName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"codexworld\"<\/span><span style=\"color: #007700\">;<br \/><br \/><\/span><span style=\"color: #FF8000\">\/\/Create&nbsp;connection&nbsp;and&nbsp;select&nbsp;DB<br \/><\/span><span style=\"color: #0000BB\">$db&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;new&nbsp;<\/span><span style=\"color: #0000BB\">mysqli<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$dbHost<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbUsername<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbPassword<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$dbName<\/span><span style=\"color: #007700\">);<br \/><br \/>if&nbsp;(<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">)&nbsp;{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;die(<\/span><span style=\"color: #DD0000\">\"Unable&nbsp;to&nbsp;connect&nbsp;database:&nbsp;\"&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">connect_error<\/span><span style=\"color: #007700\">);<br \/>}<br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p><b><code>userData.php<\/code><\/b><br \/>\nThe posted JSON data is decoded using json_decode() function in PHP. Based on the oauth_provider and oauth_uid, we will check whether the user already exists in the database and insert or update the user data into the users table using PHP and MySQL.<\/p>\n<pre><span style=\"color: #0000BB\">&lt;?php<br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Load&nbsp;the&nbsp;database&nbsp;configuration&nbsp;file<br \/><\/span><span style=\"color: #007700\">include&nbsp;<\/span><span style=\"color: #DD0000\">'dbConfig.php'<\/span><span style=\"color: #007700\">;<br \/><br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Decode&nbsp;json&nbsp;data<br \/><\/span><span style=\"color: #0000BB\">$userData&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">json_decode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'userData'<\/span><span style=\"color: #007700\">]);<br \/><br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;user&nbsp;data&nbsp;not&nbsp;empty<br \/><\/span><span style=\"color: #007700\">if(!empty(<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">)){<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;User&nbsp;profile&nbsp;info<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$oauth_provider&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$_POST<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'oauth_provider'<\/span><span style=\"color: #007700\">];<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$full_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">full_name<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$full_name_arr&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">explode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'&nbsp;'<\/span><span style=\"color: #007700\">,<\/span><span style=\"color: #0000BB\">$full_name<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$first_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$full_name_arr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$full_name_arr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$last_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;!empty(<\/span><span style=\"color: #0000BB\">$full_name_arr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">])?<\/span><span style=\"color: #0000BB\">$full_name_arr<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">]:<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$link&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">'https:\/\/www.instagram.com\/'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">username<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Check&nbsp;whether&nbsp;the&nbsp;user&nbsp;data&nbsp;already&nbsp;exists&nbsp;in&nbsp;the&nbsp;database<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$prevQuery&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"SELECT&nbsp;*&nbsp;FROM&nbsp;users&nbsp;WHERE&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">id<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$prevResult&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$prevQuery<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$prevResult<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">num_rows&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">){&nbsp;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Update&nbsp;user&nbsp;data&nbsp;if&nbsp;already&nbsp;exists<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"UPDATE&nbsp;users&nbsp;SET&nbsp;first_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;last_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;email&nbsp;=&nbsp;'',&nbsp;gender&nbsp;=&nbsp;'',&nbsp;picture&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">profile_picture<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;link&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$link<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;modified&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">date<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"Y-m-d&nbsp;H:i:s\"<\/span><span style=\"color: #007700\">).<\/span><span style=\"color: #DD0000\">\"'&nbsp;WHERE&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'&nbsp;AND&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">id<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$update&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Insert&nbsp;user&nbsp;data&nbsp;in&nbsp;the&nbsp;database<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$query&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">\"INSERT&nbsp;INTO&nbsp;users&nbsp;SET&nbsp;oauth_provider&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$oauth_provider<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;oauth_uid&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">id<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;first_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$first_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;last_name&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$last_name<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;email&nbsp;=&nbsp;'',&nbsp;gender&nbsp;=&nbsp;'',&nbsp;picture&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$userData<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">profile_picture<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;link&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$link<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">\"',&nbsp;created&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">date<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"Y-m-d&nbsp;H:i:s\"<\/span><span style=\"color: #007700\">).<\/span><span style=\"color: #DD0000\">\"',&nbsp;modified&nbsp;=&nbsp;'\"<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">date<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">\"Y-m-d&nbsp;H:i:s\"<\/span><span style=\"color: #007700\">).<\/span><span style=\"color: #DD0000\">\"'\"<\/span><span style=\"color: #007700\">;<br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$insert&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$db<\/span><span style=\"color: #007700\">-&gt;<\/span><span style=\"color: #0000BB\">query<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$query<\/span><span style=\"color: #007700\">);<br \/>&nbsp;&nbsp;&nbsp;&nbsp;}<br \/>}<br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<h2>Conclusion<\/h2>\n<p>Our example code helps you to integrate Instagram login in the website without page refresh. The user can login with their Instagram account in 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.<\/p>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/login-with-facebook-using-javascript-sdk\/\">Login with Facebook using JavaScript SDK<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Instagram Login through API is the easiest way to integrate login system in the web application. Login with Instagram allows the user to log into the website with their Instagram account without registration. Instagram provides <\/p>\n","protected":false},"author":1,"featured_media":3217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[315,66,133],"class_list":["post-3213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-instagram","tag-javascript","tag-social-login","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Login with Instagram using JavaScript SDK - CodexWorld<\/title>\n<meta name=\"description\" content=\"Instagram login JavaScript API - Integrate login with Instagram using JavaScript SDK. The example code to authenticate and login with Instagram with JavaScript API and store Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Login with Instagram using JavaScript SDK - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Instagram login JavaScript API - Integrate login with Instagram using JavaScript SDK. The example code to authenticate and login with Instagram with JavaScript API and store Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-01T20:03:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-01T20:12:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Login with Instagram using JavaScript SDK\",\"datePublished\":\"2018-05-01T20:03:12+00:00\",\"dateModified\":\"2018-05-01T20:12:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/\"},\"wordCount\":594,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/login-with-instagram-using-javascript-sdk-codexworld.png\",\"keywords\":[\"Instagram\",\"JavaScript\",\"Social Login\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/\",\"name\":\"Login with Instagram using JavaScript SDK - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/login-with-instagram-using-javascript-sdk-codexworld.png\",\"datePublished\":\"2018-05-01T20:03:12+00:00\",\"dateModified\":\"2018-05-01T20:12:15+00:00\",\"description\":\"Instagram login JavaScript API - Integrate login with Instagram using JavaScript SDK. The example code to authenticate and login with Instagram with JavaScript API and store Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/login-with-instagram-using-javascript-sdk-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/login-with-instagram-using-javascript-sdk-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"login-with-instagram-using-javascript-sdk-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/login-with-instagram-using-javascript-sdk\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Login with Instagram using JavaScript SDK\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Login with Instagram using JavaScript SDK - CodexWorld","description":"Instagram login JavaScript API - Integrate login with Instagram using JavaScript SDK. The example code to authenticate and login with Instagram with JavaScript API and store Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/","og_locale":"en_US","og_type":"article","og_title":"Login with Instagram using JavaScript SDK - CodexWorld","og_description":"Instagram login JavaScript API - Integrate login with Instagram using JavaScript SDK. The example code to authenticate and login with Instagram with JavaScript API and store Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.","og_url":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2018-05-01T20:03:12+00:00","article_modified_time":"2018-05-01T20:12:15+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Login with Instagram using JavaScript SDK","datePublished":"2018-05-01T20:03:12+00:00","dateModified":"2018-05-01T20:12:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/"},"wordCount":594,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png","keywords":["Instagram","JavaScript","Social Login"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/","url":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/","name":"Login with Instagram using JavaScript SDK - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png","datePublished":"2018-05-01T20:03:12+00:00","dateModified":"2018-05-01T20:12:15+00:00","description":"Instagram login JavaScript API - Integrate login with Instagram using JavaScript SDK. The example code to authenticate and login with Instagram with JavaScript API and store Instagram profile data in the database using jQuery, Ajax, PHP, and MySQL.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png","width":1366,"height":768,"caption":"login-with-instagram-using-javascript-sdk-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/login-with-instagram-using-javascript-sdk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Login with Instagram using JavaScript SDK"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2018\/05\/login-with-instagram-using-javascript-sdk-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-PP","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3213"}],"version-history":[{"count":2,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3213\/revisions"}],"predecessor-version":[{"id":3215,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3213\/revisions\/3215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/3217"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}