LinkedIn Service Into UWP App Using UWP Community Toolkit (1.1)

Introduction

This article is divided in three section. The first two sections explain about the installation of the LinkedIn application and the UWP Service Tool Kit, while the final part explains the integration of both of these into the application.

1. Create LinkedIn Service.
2. Install UWP Toolkit Version 1.1.0.
3. Integrate LinkedIn into main application.

Create LinkedIn Service

We have to create a LinkedIn Service app to interact with our application into LinkedIn. First, we will see how to create LinkedIn Service

Steps

1. Go here.
   
   
   
   
2. Fill the form. All fields are mandatory, and the icons should be updated too.
   
   
   
3. Client Id and Client Secret has been created by the LinkedIn service.
   
   Note this information. It's required to connect LinkedIn service into our main application.
   
   
   
   
4. Add Authorized Redirect URLs & update.
   
   
   

Install the UWP Toolkit Version 1.1.0

UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps.

More information is available here.

For our application to implement Linked in integration, there is no need to write the code from scratch. The UWP toolkit helper class is available already. So, we just need to add the helper reference into our application.

Note 

If UWP Toolkit Version 1.0.0 version is installed, please upgrade into 1.1.0 version. The LinkedIn Service helper class is available in the latest version.

Adding helper reference into our project

Steps

1. Create a new project (ex: LinkedIn Service).
2. Right click -> Manage NuGet Packages.
3. Search “Microsoft.Toolkit. Uwp”.
4. Select the “Microsoft.Toolkit. Uwp. Services” and Install.
   
   
   

UWP Tool kit has been installed in our application.

Integrating LinkedIn service into main application

1. Add the namespace and initialize the service.
   
   Microsoft.Toolkit.Uwp.Services.LinkedIn
   
   
2. Initialize the LinkedIn service, ClientId, SecretId, & Callbackurl properties are required. This information is available in LinkedIn application also that we have created in the previous section.
   
   LinkedInService.Instance.Initialize(ClientId, SecretId, Callbackurl);

To start, initialize the service. We must login with LinkedIn User Id & password ( Ref : As in the below image).



This example is used to get the profile information and post the status message to LinkedIn application.

LinkedInService.Instance.LoginAsync() API is used to login the LinkedIn application and LinkedInService.Instance.GetUserProfileAsync() API is used to get the profile information like Name, Picture, Connection, and Headline etc.

Sample code

Get the profile Information.

public async void LoadService() {
    LinkedInService.Instance.Initialize(ClientId, SecretId, Callbackurl);
    if (!await LinkedInService.Instance.LoginAsync()) return;
    LinkedInProfile profile = await LinkedInService.Instance.GetUserProfileAsync();
    GridParent.DataContext = profile;
}
Share Information
private async void BtnShare_OnClick(object sender, RoutedEventArgs e) {
    await LinkedInService.Instance.ShareActivityAsync(TxtShare.Text);
}

Xaml Code

<Grid x:Name="GridParent" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" /> </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30*" />
        <ColumnDefinition Width="70*" /> </Grid.ColumnDefinitions>
    <Image x:Name="ImageProfile" Grid.RowSpan="1" Source="{Binding PictureUrl}" Margin="10" />
    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/> </Grid.RowDefinitions>
        <StackPanel Margin="10" Grid.Row="0">
            <TextBlock Text="{Binding FirstName}" />
            <TextBlock Text="{Binding LastName}" />
            <TextBlock Text="No.Of.Connections : "></TextBlock>
            <TextBlock Text="{Binding NumConnections}" /> </StackPanel>
        <StackPanel Margin="5" Grid.Row="1">
            <TextBox x:Name="TxtShare" PlaceholderText="Enter the information to Share" />
            <Button x:Name="BtnShare" Margin="0,10,0,0" Content="Share" Click="BtnShare_OnClick" /> </StackPanel>
    </Grid>
</Grid> // This is just a sample script. Paste your real code (javascript or HTML) here. if ('this_is'==/an_example/){of_beautifier();}else{var a=b?(c%d):e[f];}

Output

The above code is just an example of how to integrate LinkedIn into our application. 

 

Hope you enjoyed and understood this.