{"componentChunkName":"component---src-templates-tag-js","path":"/tags/linked-in/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":4,"edges":[{"node":{"fields":{"slug":"/engineering/linkedin-login-using-node-passport/"},"html":"

This blog article will guide you to add \"log in with LinkedIn\"\nfunctionality in your application. Here we will be implementing Linkedin Login using NodeJS and Passport.

\n

Passport is an authentication middleware for Node, which authenticates requests and delegates all other functionality to the application. Considering the unique application requirements, Passport has stuck to authentication mechanisms known as strategies. In the blog, we will be implementing a similar strategy for Login with Linkedin.

\n

Pre -Requisites:

\n
    \n
  1. Basic Knowledge of NodeJS
    2. \n
  2. Node JS should be installed on your system.
    3. \n
\n

Steps to configure

\n
    \n
  1. Creating Linkedin APP_ID and APP_SECRET
    2. \n
  2. Go to Developer Linkedin and login with your Linkedin account.
    3. \n
  3. Once you have registered, click on the create app link and add the required details to create an app
    4. \n
\n

\"Create

\n

Provide basic details about your app:

\n\n
  cd Linkedin-node-authentication
\n
    \n
  1. In the root create a file package.json and copy the following code
    2. \n
\n

The dependencies, we are going to use in the projects are

\n\n
{\n  "name": "linkedin-login-node",\n  "version": "1.0.0",\n  "description": "Basic application for setting up Linkedin login using node and passport",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "start": "node server.js"\n  },\n  "author": "LoginRadius",\n  "license": "ISC",\n  "dependencies": {\n    "ejs": "^3.1.2",\n    "express": "^4.17.1",\n    "express-session": "^1.17.1",\n    "passport": "^0.4.1",\n    "passport-linkedin-oauth2": "^2.0.0"\n  }\n}
\n
    \n
  1. \n

    After this run the following command in the terminal

    \n
    npm install
    \n
    2. \n
  2. Now create a file named server.js and paste the following code
    3. \n
\n
const express = require('express');\nconst app = express();\nconst session = require('express-session');\nconst passport = require('passport');\nconst LinkedInStrategy = require('passport-linkedin-oauth2').Strategy;\nconst routes = require('./routes.js');\nconst config = require('./config')\n\napp.set('view engine', 'ejs');\n\napp.use(session({\n  resave: false,\n  saveUninitialized: true,\n  secret: 'SECRET'\n}));\n\napp.use(passport.initialize());\napp.use(passport.session());\n\npassport.serializeUser(function (user, cb) {\n  cb(null, user);\n});\n\npassport.deserializeUser(function (obj, cb) {\n  cb(null, obj);\n});\n\npassport.use(new LinkedInStrategy({\n  clientID: config.linkedinAuth.clientID,\n  clientSecret: config.linkedinAuth.clientSecret,\n  callbackURL: config.linkedinAuth.callbackURL,\n  scope: ['r_emailaddress', 'r_liteprofile'],\n}, function (token, tokenSecret, profile, done) {\n  return done(null, profile);\n}\n));\n\napp.use('/', routes);\n\nconst port = 3000;\n\napp.listen(port, () => {\n  console.log('App listening on port ' + port);\n});
\n
    \n
  1. Now create a file named routes.js in the root directory and paste the following code
    2. \n
\n
const passport = require('passport');\nconst express = require('express');\nvar router = express.Router();\n\nrouter.get('/', function (req, res) {\n  res.render('pages/index.ejs'); // load the index.ejs file\n});\n\nrouter.get('/profile', isLoggedIn, function (req, res) {\n  res.render('pages/profile.ejs', {\n    user: req.user // get the user out of session and pass to template\n  });\n});\n\nrouter.get('/auth/linkedin', passport.authenticate('linkedin', {\n  scope: ['r_emailaddress', 'r_liteprofile'],\n}));\n\nrouter.get('/auth/linkedin/callback',\n  passport.authenticate('linkedin', {\n    successRedirect: '/profile',\n    failureRedirect: '/login'\n  }));\n\nrouter.get('/logout', function (req, res) {\n  req.logout();\n  res.redirect('/');\n});\n\n\nfunction isLoggedIn(req, res, next) {\n  if (req.isAuthenticated())\n    return next();\n  res.redirect('/');\n}\n\nmodule.exports = router;
\n
    \n
  1. Create a directory views and under this create a directory named pages. Under this folder create two pages named profile.ejs and index.ejs
    2. \n
\n
// index.ejs\n<!doctype html>\n<html>\n\n<head>\n  <title>Linkedin Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .linkedin {\n      background-color: #0073b1 !important;\n      color: #fff !important;\n    }\n    .fa-linkedin-f:before,\n    .fa-linkedin:before {\n      content: "\\f0e1";\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s6 offset-s3">\n          <div class="card">\n            <div class="card-content">\n              <span class="card-title">Linkedin Login using Node and passport</span>\n            </div>\n            <div class="card-action">\n              <a href="/auth/linkedin" class="waves-effect waves-light btn social linkedin">\n                <i class="fa fa-linkedin"></i> Sign in with Linkedin\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
<!- profile.ejs->\n<!doctype html>\n<html>\n\n<head>  \n  <title>LinkedIn Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .card:hover {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n      margin-bottom: 54px;\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n      <a href="/logout" class="right">Logout</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s12">\n          <div class="card">\n            <div class="card-content blue lighten-3">\n              <span class="card-title white-text"><strong><i class="large material-icons">person</i>\n                </strong></span>\n            </div>\n            <div class="card-action">\n              <h5><b><%= user.displayName %></b></h5>\n              <p><strong>Linkedin id</strong>: <%= user.id %></p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
    \n
  1. Finally, when you are done with the above code you can now write all your app details gathered in step 1 to config.js file created in the root directory
    2. \n
\n
module.exports = {\n  'linkedinAuth': {\n    'clientID': '<CLIENT_ID>', // your App ID\n    'clientSecret': '<CLIENT_SECRET>', // your App Secret\n    'callbackURL': 'http://127.0.0.1:3000/auth/linkedin/callback'\n  }\n}
\n
    \n
  1. Let's have a final check with the repository, aftre follwoing all the steps in the same pordr the directory structure of your code will look like below:
    2. \n
\n
// Final directory structure\nLinkedin-node-authentication/\n  --|node_modules\n  --|views/\n    |--|pages/\n    |----|error.ejs\n    |----|profile.ejs\n    |----|index.ejs\n  --|config.js\n  --|package.json\n  --|package-lock.json\n  --|routes.js\n  --|server.js
\n
    \n
  1. Now run the server by executing below command in the directory Linkedin-node-authentication/
    2. \n
\n
npm start
\n
    \n
  1. Visit the browser with the URL http://localhost:3000
    2. \n
\n

\"Linkedin

\n

Click on the sign in button, and you will be asked to login through Linkedin. Once logged in you will be redirected to profile page as below:

\n

\"Linkedin

\n

The complete sample code for the above tutorial can be found here

\n","frontmatter":{"date":"June 10, 2020","updated_date":null,"title":"LinkedIn Login using Node JS and passport","tags":["LinkedIn","Login","NodeJs","PassportJS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/717d9ce34aacf1736c240b0fa8d67551/58556/linkedin_login_node.webp","srcSet":"/static/717d9ce34aacf1736c240b0fa8d67551/61e93/linkedin_login_node.webp 200w,\n/static/717d9ce34aacf1736c240b0fa8d67551/1f5c5/linkedin_login_node.webp 400w,\n/static/717d9ce34aacf1736c240b0fa8d67551/58556/linkedin_login_node.webp 800w,\n/static/717d9ce34aacf1736c240b0fa8d67551/99238/linkedin_login_node.webp 1200w,\n/static/717d9ce34aacf1736c240b0fa8d67551/135cd/linkedin_login_node.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/extended-linkedin-api-usage/"},"html":"

LinkedIn has recently revamped their API systems and added many new restrictions. We will go through some examples on how you can utilize the LinkedIn Javascript API in order to setup some useful features that comply with LinkedIn's new terms and conditions and use cases.

\n

Getting Your Site Ready

\n

The first step will be setting up your login button which will prompt the user to authenticate with their LinkedIn credentials. We have provided a guide to getting a basic login button setup here. The linked guide will get you as far as setting up a button that allows your users to login with LinkedIn and display a personalized welcome message. Below we will go over extending this functionality to allow you to handle more complex features for your users after logging in.

\n

Event Handling

\n

You can control and initiate specific behavior after a user logs in. You can assign these event handlers by first setting the function that will be used to initialize the events. This will trigger the event designation after the LinkedIn scripts have been loaded on your page. Update the LinkedIn initialization script:

\n
<!--\napi_key: \nauthorize: true\nonLoad: onLinkedInLoad\n-->
\n

This will trigger the onLinkedInLoad function after the Linkedin scripts have been loaded.

\n

You can now assign some LinkedIn Event handlers in this function to control the behavior that will occur for different LinkedIn user actions. Let's begin by assigning the behavior that occurs after a user logs in.

\n
<!--\nfunction onLinkedInLoad() {\n    IN.Event.on(IN, "auth", getProfileData);\n}\n-->
\n

The above event will trigger when a user authorizes and will call the getProfileData function. We can add another event assignment for the user logging out.

\n
<!--\nfunction onLinkedInLoad() {\n    IN.Event.on(IN, "auth", getProfileData);\n    IN.Event.on(IN, "logout", sendGoodByeMessage);\n}\n-->
\n

The above logout event will trigger the sendGoodByeMessage when the user logs out. Now that we have the basic event handling in place we can handle the specific behavior for users logging in.

\n

Data Retrieval and API access

\n

Once a user has logged in and triggered the getProfileData event we can pull in their user profile using the LinkedIn Raw data API handlers, these allow you to access any of LinkedIn's API endpoints and get data back. We will begin with a quick check to make sure the user is still authorized and then call the Raw API to pull in the people endpoint for the current user:

\n
<!--\nfunction getProfileData() {\n    if(IN.User.isAuthorized())\n        IN.API.Raw("/people/~").result(onSuccess).error(onError);\n}\n-->
\n

If the data is successfully returned it will call the onSuccess function and if not it will call onError.

\n

These functions will both include a JSON formatted response that can be used to display their profile data or log a message:

\n
<!--\nfunction onSuccess(data) {\n    console.log(data);\n}\nfunction onError(error) {\n    console.log(error);\n}\n-->
\n

You can test the response formats for most of the LinkedIn APIs on LinkedIns API console You can access any of the API endpoints after successful login via the raw API handler and retrieve data per your requirements.

\n

User Management

\n

Before making any API requests you should verify that your user has a current active session. User sessions are valid for 30 minutes by default. These sessions can be extended using the following call:

\n
<!--\nIN.User.refresh()\n-->
\n

The above call can be used to refresh the expiration time for the user but repeated calls may cause your app to be blocked so this should be used sparingly.

\n

You can provide the ability for your users to logout by setting up a button or link that will trigger the following function call:

\n
<!--\nIN.User.logout(sendGoodByeMessage);\n-->
\n

This will trigger the same function that was assigned to the logout event.

\n","frontmatter":{"date":"February 09, 2016","updated_date":null,"title":"Extended LinkedIn API Usage","tags":["LinkedIn","SocialLogin"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp","srcSet":"/static/dacf65e1b50df78fc0c763813d3cb64f/61e93/linkedin-feat-img.webp 200w,\n/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/integrate-linkedin-social-login-website/"},"html":"

It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience for your user and also lets you obtain more information about your user. The most welcomed social platforms are Facebook, Twitter, LinkedIn and Google. In this article, we will cover how to integrate LinkedIn social login authentication into your website.

\n

Create a LinkedIn App

\n

Creating an app for the social platform is always the first step, no matter which platform you are working with. In this case, the created app will service the LinkedIn social login. Basically, you are creating a gate to let your user go through this gate and access the service, and in this gate, you can specify the permissions and the preferences you want to grant to your user. You can refer to the instructions here for clear instructions on how to create a LinkedIn social login app.

\n

Set your App

\n

After creating the app, you need to set the \"JavaScript API domain\" field for your app.  In that field, fill in your website URL. Here we have used http://localhost for this article.

\n

\"luciusblog2-1\"

\n

Implement the script in your html file

\n

Now you are ready to code! First, put this JavaScript code snippet inside your head tag:

\n
<!--<script type="text/javascript" src="http://platform.linkedin.com/in.js">\napi_key: your_api_key_goes_here\n-->
\n

You can find your API key inside your application, the first entry under OAuth Keys \"Consumer Key / API Key.\"  This script is used to load the LinkedIn script into your website, and it will not display anything on your page, at least not the frontend.

\n

\"luciusblog2-2\"

\n

Next, you will need to add another script inside your body tag. It is actually used to display the sign-in button.

\n
<!--\nHello, ; .\n-->
\n

If everything has been implemented correctly, load your page, and you will see this lovely button appear on your site.

\n

\"luciusblog2-3\"

\n

Want to extend your social systems with additional provider functionality? Check out this post on Twitter social login.

\n","frontmatter":{"date":"February 11, 2015","updated_date":null,"title":"Integrating LinkedIn Social Login on a Website","tags":["LinkedIn","SocialLogin"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp","srcSet":"/static/dacf65e1b50df78fc0c763813d3cb64f/61e93/linkedin-feat-img.webp 200w,\n/static/dacf65e1b50df78fc0c763813d3cb64f/403a4/linkedin-feat-img.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/social-provider-social-sharing-troubleshooting-resources/"},"html":"

Social Sharing is an extremely powerful tool to expand your user base and product recognition, customizing and implementing this to be efficient on your site can be quiet difficult. Most of the most relevant Social Providers have setup testing and troubleshooting tools that can help to identify where you have gone astray. Below is a brief overview of some useful tools that have been setup to assist with implementing custom Social Sharing options.

\n

Facebook Open Graph Object Debugger

\n

Setting up custom sharing with Facebook uses Facebook Open Graph meta tags, which are cached on Facebooks end and can lead to some confusion when making updates to your customizations. In order to identify the cached details that are being used for your implementation Facebook provides the Open Graph Debugger tool. All you need to do is input your sites URL and click on Debug.

\n

\"karlblog1-1_001\"

\n

This will then crawl your page and display some useful information on the currently scraped details and warnings and error messages. It also give you the option at this point to refresh this scrapped data with any changes that you have made to our existing cached details.

\n

Google Structured Data Testing Tool

\n

Google uses a combination of a few different methods in order to define the customized sharing options:

\n\n

The structured data testing tool allows you to view what Google has interpreted from your webpage. Start by entering the URL of the page that you are sharing and click on preview.

\n

\"karlblog1-2\"

\n

You will be able to view the scrapped data as well as a listing of the meta tags that have been included on the page.

\n

LinkedIn Share Generator Tool

\n

LinkedIn also uses Open Graph Tags to determine the content that will be shared with your sharing interface. You can view the relevant tags and details here.

\n

You can view the details that will be shared by generating out the sharing button on LinkedIn's build a share button tool.

\n

Insert the URL in the \"URL to be shared field\" and click on Get Code. This will generate a sample share icon in the preview section.

\n

\"karlblog1-3\"

\n

To test the share functionality click on the generated icon to display the share interface as determined by the provided URL.

\n

Twitter Button Generator Tool

\n

Twitter also uses multiple systems to determine the content that will be tweeted by the tweet buttons. The most commonly used meta tags, which allow you to set any of the available customizable fields in your tweet.

\n

To test the tweet you can use Twitters button generator. Select the \"Share a link\" option under \"Choose a button\".

\n

\"karlblog1-4\"

\n

Input your site URL in the \"share URL\" field, This will cause the Tweet button under \"Preview and code\" to be updated.

\n

Click on the generated button to see a sample of the Tweet that has be defined by your URL.

\n","frontmatter":{"date":"February 09, 2015","updated_date":null,"title":"Social Provider Social Sharing Troubleshooting Resources","tags":["Engineering","SocialSharing","Facebook","Google","LinkedIn"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/93b68aeb2b2537eb1ada887c2289dc4c/58556/social.webp","srcSet":"/static/93b68aeb2b2537eb1ada887c2289dc4c/61e93/social.webp 200w,\n/static/93b68aeb2b2537eb1ada887c2289dc4c/1f5c5/social.webp 400w,\n/static/93b68aeb2b2537eb1ada887c2289dc4c/58556/social.webp 800w,\n/static/93b68aeb2b2537eb1ada887c2289dc4c/99238/social.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}}]}},"pageContext":{"tag":"LinkedIn"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}