Sign in with LinkedIn and Share with LinkedIn using Service Portal Pages
Hello All,
I recently posted a article on LikedIn integration with ServiceNow, now I'll share my POC details of LinkedIn integration with Service Portal. Here are the steps below...
1. Create LinkedIn App on https://www.linkedin.com/developer/apps
Once you save your configuration, your application will be assigned a unique "Client ID" (otherwise known as Consumer Key or API key) and "Client Secret" value. Make note of these values — you will need to integrate them into the configuration files or the actual code of your application, for example:
2. Add JavaScript Settings in LinkedIn App Page
LinkedIn's JavaScript SDK is a convienent way to enable LinkedIn integrations within your websites and web-based applications, without the need for any back-end programming. The major benefits of using the SDK include:
- Easy authentication of LinkedIn members via functions that abstract all of the complexity of the authentication process away from you.
- A convienent generic API call wrapper that allows you to make authenticated REST API calls.
3. Create a Portal Widget
Navigation: Service Portal -> Widgets - New
Use complete code in HTML section of the widget:
<!-- Initialize the SDK in your webpage--></p> <p>api_key: <strong>Client id from step #1</strong></p> <p>onLoad: onLinkedInLoad authorize: true</p> <p>
<!-- Setup an event listener to make an API call once auth is complete --> function onLinkedInLoad() { IN.Event.on(IN, "auth", getProfileData);</p> <p>}</p> <p>// Use the API call wrapper to request the member's profile data function getProfileData() { IN.API.Profile("me").fields("id", "first-name", "last-name", "headline", "location", "picture-url", "public-profile-url", "email-address").result(displayProfileData).error(onError);</p> <p>}</p> <p>// Handle the successful return from the API call function displayProfileData(data){ var user = data.values[0]; document.getElementById("picture").innerHTML = '<img src="'+user.pictureUrl+'" />'; document.getElementById("name").innerHTML = user.firstName+' '+user.lastName; document.getElementById("intro").innerHTML = user.headline; document.getElementById("email").innerHTML = user.emailAddress; document.getElementById("location").innerHTML = user.location.name; document.getElementById("link").innerHTML = '<a href="'+user.publicProfileUrl+'" target="\_blank">Visit profile</a>';</p> <p>document.getElementById('profileData').style.display = 'block';</p> <p>}</p> <p>// Handle an error response from the API call function onError(error) { console.log(error);</p> <p>}</p> <p>// Destroy the session of linkedin function logout(){ IN.User.logout(removeProfileData); location.reload();</p> <p>}</p> <p>// Remove profile data from page function removeProfileData(){ document.getElementById('profileData').remove(); }</p> <p>
<!-- To Display User Profie Information -->
<!-- To Get the Share Button-->
4. Create a Portal Page: Add the above created (#3 Widget) to this page, It looks like below
5. Get the Access Toke with Login: Once user click on the “Sign in with LinkedIn” button it redirects to below page to authenticate the user access.
6. Result: Upon successful login it redirects to a result page where you can see the profile data along with Share button.
7. LinkedIn Share : If user clicks on “Share” button it opens a popup page like below:
That's it!!!! Hope it clear and helps you to integrate with LinkedIn.
Labels:
https://www.servicenow.com/community/developer-articles/sign-in-with-linkedin-and-share-with-linkedin-using-service/ta-p/2326671