Connect your Metro(??) style app to LinkedIn (via OAuth 1.0a)

**NOTE: For new OAuth 2.0, please read this post**

OAuth is a de facto standard for authorization. The protocol enables applications to share their private resources with other applications such as web, desktop, or mobile applications without having to share usernames or passwords. You can learn more about the protocol which has several versions from the following links:

In this post, I wrote a simple metro style app that consumes Linkedin information. (I know that metro is now a bad word, but windows 8 UI style app sounds too verbose).

LinkedIn is using a strict OAuth 1.0a and requires HTTP Header-based Authorization. The best resources that should help are LinkedIn OAuth: Zero to Hero slideshare by Taylor Singletary and simple oAuth C# working sample. Before we start coding, let’s talk briefly what our application (i.e., LinkedIn consumer) has to do to be able to consume LinkedIn information with user authorization.

1. Our application has to have a LinkedIn consumer key and consumer secret key. We can get it by registering your app thru LinkedIn Developer Network.

2. Our application starts talking with LinkedIn by asking LinkedIn for a request token (and request token secret key). In this step, our application has to give Linkedin, the consumer key and other OAuth information like nonce, signature method, version, and so on. The application also needs to provide a signature which is signed with the consumer secret key.

3. Beside the request token and the request token secret key, LinkedIn will also give us an authorize link which allows users to (authenticate himself/herself if necessary) authorize our application.

4. As our application is not a web application (as specified when we register our application), our application has to provide a way for user to enter a PIN code that LinkedIn gives the user in authorization process.

5. Now our application should have the request token, the request token secret key, the PIN code (oauth_verifier). Our application will use above information to request LinkedIn for an access token and an access token secret key. The application also needs to provide a signature which is signed with the consumer secret and request token secret keys.

6. Once our application has the access token and the access token secret key, then our application can make LinkedIn API call and get information from LinkedIn.

If you don’t quite understand the process above, don’t worry. Look at the code should give you better understand of how the process works.

First, let’s create a blank metro style app. I just create a one page app with several TextBox, TextBlock, and Button controls. I also include WebView control to let user authenticates and authorizes our application within our application.

image

In the code-behind page, our application will do the work by assembling messages and communicate with LinkedIn. Below is the sample code for requesting request token from LinkedIn.

        private async void getRequestToken_Click_1(object sender, RoutedEventArgs e)
        {
            string nonce = oAuthUtil.GetNonce();
            string timeStamp = oAuthUtil.GetTimeStamp();

            string sigBaseStringParams = "oauth_consumer_key=" + consumerKey.Text;

            sigBaseStringParams += "&" + "oauth_nonce=" + nonce;
            sigBaseStringParams += "&" + "oauth_signature_method=" + "HMAC-SHA1";
            sigBaseStringParams += "&" + "oauth_timestamp=" + timeStamp;
            sigBaseStringParams += "&" + "oauth_version=1.0";
            string sigBaseString = "POST&";
            sigBaseString += Uri.EscapeDataString(_linkedInRequestTokenUrl) + "&" + Uri.EscapeDataString(sigBaseStringParams);

            string signature = oAuthUtil.GetSignature(sigBaseString, consumerSecretKey.Text);

            var responseText = await oAuthUtil.PostData(_linkedInRequestTokenUrl, sigBaseStringParams + "&oauth_signature=" + Uri.EscapeDataString(signature));

            if (!string.IsNullOrEmpty(responseText))
            {
                string oauth_token = null;
                string oauth_token_secret = null;
                string oauth_authorize_url = null;
                string[] keyValPairs = responseText.Split('&');

                for (int i = 0; i < keyValPairs.Length; i++)
                {
                    String[] splits = keyValPairs[i].Split('=');
                    switch (splits[0])
                    {
                        case "oauth_token":
                            oauth_token = splits[1];
                            break;
                        case "oauth_token_secret":
                            oauth_token_secret = splits[1];
                            break;
                        case "xoauth_request_auth_url":
                            oauth_authorize_url = splits[1];
                            break;
                    }
                }

                requestToken.Text = oauth_token;
                requestTokenSecretKey.Text = oauth_token_secret;
                oAuthAuthorizeLink.Content = Uri.UnescapeDataString(oauth_authorize_url + "?oauth_token=" + oauth_token);
            }
        }

Now, let’s see how our application works. First, we provide our consumer and consumer secret keys and click “Get Request Token” button.

image

Next, LinkedIn should give us a request token and a request token secret key as well as an authorize url link.

image

After the link is populated, we can click the link and use the WebView control showing the LinkedIn authentication and authorization pages. After our application has been granted, LinkedIn will give an oauth verifier PIN which we can just put it in oauth_verifier textbox. In the real application, you should open the link automatically and provide some instruction, so users will know what to do.

image

image

Now we have everything that is required to request LinkedIn for an access token and access token secret key.

image

Once we have the access token and access token secret keys, we can use them to access LinkedIn API and get information.

image

Hope this sample application will help anyone who is going to write metro style application that needs to talk with LinkedIn. If you want to talk with other services, you can also look at the Web authentication broker sample which has twitter, facebook, flickr, and google services samples. I did reuse a lot of OAuth code from the above sample as well.

You can download the full source code here. I also have a similar example for Twitter here.

Enjoy coding!

Advertisements

15 thoughts on “Connect your Metro(??) style app to LinkedIn (via OAuth 1.0a)

  1. all the time i used to read smaller articles which as well clear their motive, and that is also happening with this
    article which I am reading at this place.

  2. Pingback: Connect your Windows Store App to LinkedIn (via OAuth 2.0) using WebAuthenticationBroker and PasswordVault | Cyan By Fuchsia

  3. I like the valuable info you provide in your articles. I’ll bookmark your blog and check again here regularly. I am quite certain I’ll learn many new stuff right here!
    Best of luck for the next!

  4. Hey there! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My site looks weird when browsing from my iphone. I’m trying to find a theme or
    plugin that might be able to resolve this problem. If you
    have any suggestions, please share. Cheers!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s