![\"linkedin-login-javascript-sdk-app-client-id-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/09\/linkedin-login-javascript-sdk-app-client-id-codexworld.png\")
<\/div>\n
JavaScript<\/h2>\n
In order to use SDK functionality, include the LinkedIn JavaScript library in your web page and specify your LinkedIn App API Key.<\/p>\n
<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"\/\/platform.linkedin.com\/in.js\"<\/span>>\r\n api_key: App_Client_ID\r\n authorize: true<\/span>\r\n onLoad<\/span>: onLinkedInLoad\r\n scope: r_basicprofile r_emailaddress\r\n<\/script<\/span>>\r\n<\/pre>\nThe following JavaScript methods are used to integrate LinkedIn login process on a single page.<\/p>\n
\nonLinkedInLoad()<\/code> – Setup an event listener to make an API call once auth is complete.<\/li>\ngetProfileData()<\/code> – Use the API call to request the member’s profile data.<\/li>\ndisplayProfileData()<\/code> – Display member profile information in the webpage.<\/li>\nlogout()<\/code> – Log the user out from LinkedIn account.<\/li>\nremoveProfileData()<\/code> – Hide profile information from the web page.<\/li>\n<\/ul>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span>>\r\n \/\/ Setup an event listener to make an API call once auth is complete<\/span>\r\n function<\/span> onLinkedInLoad<\/span>() {\r\n IN.Event.on(IN, \"auth\"<\/span>, getProfileData);\r\n }\r\n \r\n \/\/ Use the API call wrapper to request the member's profile data<\/span>\r\n function<\/span> getProfileData<\/span>() {\r\n IN.API.Profile(\"me\"<\/span>).fields(\"id\"<\/span>, \"first-name\"<\/span>, \"last-name\"<\/span>, \"headline\"<\/span>, \"location\"<\/span>, \"picture-url\"<\/span>, \"public-profile-url\"<\/span>, \"email-address\"<\/span>).result(displayProfileData).error<\/span>(onError<\/span>);\r\n }\r\n\r\n \/\/ Handle the successful return from the API call<\/span>\r\n function<\/span> displayProfileData<\/span>(data){\r\n var<\/span> user =<\/span> data.values[0<\/span>];\r\n document<\/span>.getElementById<\/span>(\"picture\"<\/span>).innerHTML =<\/span> '<img src=\"'<\/span>+<\/span>user.pictureUrl+<\/span>'\" \/>'<\/span>;\r\n document<\/span>.getElementById<\/span>(\"name\"<\/span>).innerHTML =<\/span> user.firstName+<\/span>' '<\/span>+<\/span>user.lastName;\r\n document<\/span>.getElementById<\/span>(\"intro\"<\/span>).innerHTML =<\/span> user.headline;\r\n document<\/span>.getElementById<\/span>(\"email\"<\/span>).innerHTML =<\/span> user.emailAddress;\r\n document<\/span>.getElementById<\/span>(\"location\"<\/span>).innerHTML =<\/span> user.location<\/span>.name<\/span>;\r\n document<\/span>.getElementById<\/span>(\"link\"<\/span>).innerHTML =<\/span> '<a href=\"'<\/span>+<\/span>user.publicProfileUrl+<\/span>'\" target=\"_blank\">Visit profile<\/a>'<\/span>;\r\n document<\/span>.getElementById<\/span>('profileData'<\/span>).style<\/span>.display<\/span> =<\/span> 'block'<\/span>;\r\n }\r\n\r\n \/\/ Handle an error response from the API call<\/span>\r\n function<\/span> onError<\/span>(error) {\r\n console<\/span>.log<\/span>(error);\r\n }\r\n \r\n \/\/ Destroy the session of linkedin<\/span>\r\n function<\/span> logout<\/span>(){\r\n IN.User.logout(removeProfileData);\r\n }\r\n \r\n \/\/ Remove profile data from page<\/span>\r\n function<\/span> removeProfileData<\/span>(){\r\n document<\/span>.getElementById<\/span>('profileData'<\/span>).remove<\/span>();\r\n }\r\n<\/script<\/span>>\r\n<\/pre>\nHTML<\/h2>\n
Create the Sign In with LinkedIn<\/b> button.<\/p>\n<!-- sign in with linkedin button --><\/span>\r\n<script<\/span> type<\/span>=\"in\/Login\"<\/span>><\/script<\/span>>\r\n<\/pre>\nDisplay the member’s profile data (picture, first name, last name, email address, headline, location, and public profile URL). Also, a logout link will be provided for logout the user from the LinkedIn account.<\/p>\n
<!-- display profile info --><\/span>\r\n<div<\/span> id<\/span>=<\/span>\"profileData\"<\/span> style<\/span>=\"display: none;\"<\/span>>\r\n <p<\/span>><a<\/span> href<\/span>=\"javascript:void(0);\"<\/span> onclick<\/span>=\"logout()\"<\/span>>Logout<\/a<\/span>><\/p<\/span>>\r\n <div<\/span> id<\/span>=<\/span>\"picture\"<\/span>><\/div<\/span>>\r\n <div<\/span> class<\/span>=\"info\"<\/span>>\r\n <p<\/span> id<\/span>=<\/span>\"name\"<\/span>><\/p<\/span>>\r\n <p<\/span> id<\/span>=<\/span>\"intro\"<\/span>><\/p<\/span>>\r\n <p<\/span> id<\/span>=<\/span>\"email\"<\/span>><\/p<\/span>>\r\n <p<\/span> id<\/span>=<\/span>\"location\"<\/span>><\/p<\/span>>\r\n <p<\/span> id<\/span>=<\/span>\"link\"<\/span>><\/p<\/span>>\r\n <\/div<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\n<\/span>Login with LinkedIn using PHP<\/a><\/span><\/p>\nSave User Data to the Database (jQuery, Ajax, PHP, and MySQL)<\/h2>\n
After user logged in via LinkedIn JavaScript SDK, if you want to store the user profile information into the MySQL database, follow the below steps.<\/p>\n
Create Database Table<\/b>
\nTo store user profile information a table needs to be created in the database. The following SQL creates a users<\/code> table with some basic columns in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `users<\/span>` (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT NULL<\/span> AUTO_INCREMENT,\r\n `oauth_provider`<\/span> enum(''<\/span>,'linkedin'<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `oauth_uid`<\/span> varchar<\/span>(100<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `first_name`<\/span> varchar<\/span>(50<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `last_name`<\/span> varchar<\/span>(50<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `email`<\/span> varchar<\/span>(100<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `location`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `picture`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `profile_url`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `created`<\/span> datetime NOT NULL<\/span>,\r\n `modified`<\/span> datetime NOT NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE=<\/span>InnoDB DEFAULT CHARSET=<\/span>utf8 COLLATE=<\/span>utf8_unicode_ci;\r\n<\/pre>\nJavaScript<\/b>
\nWe will use jQuery and Ajax to send the user profile data to the PHP script (saveUserData.php<\/code>) and insert the profile information into the MySQL database.<\/p>\nAt first, include the jQuery library.<\/p>\n
<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"<\/span>><\/script<\/span>>\r\n<\/pre>\nThe saveUserData()<\/code> function posts the user profile data to saveUserData.php<\/code> file using jQuery Ajax.<\/p>\n\/\/ Save user data to the database<\/span>\r\nfunction<\/span>
![\"linkedin-login-javascript-sdk-app-valid-domain-settings-codexworld\"](\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/09\/linkedin-login-javascript-sdk-app-valid-domain-settings-codexworld.png\")
<\/div>\n