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-->
<script type="text/javascript" src="https://platform.linkedin.com/in.js">
api_key: Client id from step #1
onLoad: onLinkedInLoad
authorize: true
</script>
<!-- Setup an event listener to make an API call once auth is complete -->
<script type="text/javascript">
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// 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);
}
// 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>';
document.getElementById('profileData').style.display = 'block';
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Destroy the session of linkedin
function logout(){
IN.User.logout(removeProfileData);
location.reload();
}
// Remove profile data from page
function removeProfileData(){
document.getElementById('profileData').remove();
}
</script>
<!-- To Get the Sign In with LinkedIn Button-->
<script type="in/Login"></script>
<!-- To Display User Profie Information -->
<div id="profileData" style="display: none;">
<p><a href="javascript:void(0);" onclick="logout()">Logout</a></p>
<div id="picture"></div>
<div class="info">
<p id="name"></p>
<p id="intro"></p>
<p id="email"></p>
<p id="location"></p>
<p id="link"></p>
<p>
<!-- To Get the Share Button-->
<script type="in/Share"></script>
</p>
</div>
</div>
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.
