When you run the TFS Dashboard app for the first time, a login page appears:

and similarly for the TFS Connect phone app:

Team Foundation Service authentication:

In order to authenticate with Team Foundation Service, you will need to enable and configure basic auth credentials for your user profile on tfs.visualstudio.com:

• Navigate to the account that you want to use on https://tfs.visualstudio.com. For example, you may have https://domain.visualstudio.com.
• In the top-right corner, click on your account name and then select My Profile

• Select the Credentials tab
• Click the 'Enable alternate credentials and set password' link
• Enter a password. It is suggested that you choose a unique password here (not associated with any other accounts)

• Click Save Changes

Next, run the sample app and on the Login page, for the Domain field, the domain is from domain.visualstudio.com, Username is from the Credentials tab under My Profile, and Password is the password that you just created. The Service Endpoint is https://tfsodata.visualstudio.com/DefaultCollection/ .

Using an on-premises Team Foundation Server:

You will need to first install and configure the OData Service for Team Foundation Server v2 to expose an OData endpoint for your Team Foundation Server instance.

For the Domain field, you would enter the workgroup or domain of your Team Foundation Server.

Username will be the username you use to login to Team Foundation Server

Password is the password you use to login to Team Foundation Server

Service Endpoint is the OData Service endpoint address that you have used to host the OData Service. For example something similar to:

https://<name of the server where OData service is hosted>:<portnumber>/<Defaultcollection or Name of Collection>/

You can also try to connect to the OData service via IE to test out your credentials.

In the above screenshot, the address in the web browser is my OData Service endpoint i.e. https://localhost:10042/FabrikamFiberCollection/ . My credentials are the TFS credentials, so Domain is ‘vsalm’, Username is ‘admin’ and Password is the password used to login into Team Foundation Server.

By default, the OData Service is setup in a manner that a HTTP endpoint will throw an error. For testing purposes you can change this by setting ‘Transport’ to ‘None’ in web.config of ODataTFS.Web project:

<security mode="None"></security>

If you are using a HTTPS endpoint make sure that the certificate is recognized as a valid certificate by the machine that is running the app. The certificate should be placed into the machine-wide Trusted Root Certification Authorities store. For information on configuring certificates on a machine, please go through the ReadMe document of the OData Service.

After successfully logging in, your apps should resemble the following screens.

In this blog post, I will be discussing how to update secondary tiles using background tasks in a Windows Store App. I’ll be using the example of TFS Dashboard App in which I connect to OData Service for Team Foundation Server to retrieve data from TFServer. The source code of this App is available for download. Consider a scenario where you pin a query from your WorkItems to the Start screen and would like to see it update every 15 minutes with the latest result information even when the App is not running.

Let’s go through the steps of pinning a tile:

The above screen shows a query ‘Product Backlog’ and the resulting WorkItems that fall under that query. I can swipe from the bottom of the screen and bring up the AppBar.

Then I can click on the ‘Pin to Start’ button to pin the query to the Start screen.

The Start screen will then show my pinned query ‘Product Backlog’ as a tile which updates to show the latest count of WorkItems. Each of the pinned tiles will ping the OData Service and display the updated number of WorkItems, even when the App is not running.

I can pin multiple tiles from the App and change their size on the Start screen to be smaller (square) or larger (wide).

To achieve this, we will follow these steps:

Step 1: Create Pin and Unpin buttons as part of BottomAppBar for the tile on the xaml page where you want to be able to pin the items. In my case, I’ll add the buttons to the ItemDetailPage.xaml. You can add Page.BottomAppBar at the same level as Page.Resources section.

XAML

The OnPinTileButtonClicked and UnpinTileButtonClicked event handlers used in the buttons above can be defined in ItemDetailPage.xaml.cs: 

C#

For information on how to toggle between Pin and Unpin button in the bottom AppBar, please see the source code.

Step 2: Create Secondary Tiles in your Windows Store App

I have created a class BackgroundTaskHelper where CreateTile and DeleteTile methods are defined. The CreateTile method is used to create a Secondary tile whenever OnPinTileButtonClicked event is called.

C#

Note: SecondaryTile constructor requires a Tile ID that has a length not greater than 64. And Tile ID must begin with a number or letter and be composed of the characters a-z, A-Z, 0-9, period (.), or underscore (_). It cannot contain spaces, commas, or any of these characters: | > < " / ? * \ ; : ! ' 

Once the tile is pinned, we want the user to be able to unpin the tile from the UI. Whenever the user unpins a tile, we will call the UnpinTileButtonClicked event handler and consequently call the DeleteTile method that would delete the tile.

After creating a Secondary tile, you may want to apply a tile template to it. Check out tile templates for more information on it. This is how I update the Secondary tile after creating it:

This is how the tile looks in wide and square tile format:

Step 3: Add a WindowsRuntimeComponent project in your solution to create a background task.

Go to your solution in Visual Studio, right click on the solution and click on Add->New Project,  select ‘WindowsRuntimeComponent’ and rename the project. I have renamed it to ‘Testing’. And then hit the OK button.

Edit the existing class ‘Class1.cs’ or include a new class file that implements the interface IBackgroundTask. In this sample, I have a TFSTasks class that implements the IBackgroundTask interface. This is how the Run method of the IBackgroundTask is implemented:

The Run method will be activated every 15 minutes. In this method, we look for authorization data in the roaming settings and find all the tiles that are currently pinned. For every tile that exists, we will send an HTTP request to the OData Service for TFS to return the count of WorkItems. For instance, a sample URL like this would return the count of WorkItems existing in a Query identified by GUID - '615dfb1f-e21f-4a8c-b45a-da396feb2c7b':

https://localhost:44301/DefaultCollection/Queries('615dfb1f-e21f-4a8c-b45a-da396feb2c7b')/WorkItems/$count

Include the following using statements in the beginning of your class file.

Step 4: Add the above WindowsRuntimeComponent to your WindowsStoreApp.

Right click on your App project and click on “Add Reference” and select ‘Testing’ project under the Projects section.

Hit the OK button and the project reference is added to your project. Now double click on the Package.appxmanifest file in the SolutionExplorer and go to the Declarations tab.

Select Background Tasks from the list of ‘Available Declarations’ and hit the Add button.

I have selected ‘System event’ in the ‘Supported task types’ property of the Declarations tab. And I have set the entry point as ‘Testing.TFSTasks’. Note that the entry point has to be entered in the form of ‘<Namespace>.<Classname>’.

Step 5: Register the background task in App.xaml.cs:

Before you register, call the CheckIfBackgroundTaskExist() method that checks if the background task is already registered. If your App has more than one background task registered, then you loop through all the tasks and look for the Name property in the value part of theBackgroundTaskRegistration.AllTasks key – value pair to check whether the task you are trying to register already exists. While registering the background task, I have to give a name to the BackgroundTask and provide an entry point. The maintenance trigger is set to 15 minutes. We are almost done here.

Step 6: Activating the App from the tile

If a user clicks on a certain tile on the Start screen, he would expect to be navigated to the related page in your App for that tile. To enable this, in the OnLaunched method of App.xaml.cs, add the following lines of code:

To summarize, we created and updated Secondary tiles then we wrote background tasks that will update the tiles after an interval of 15 minutes. We registered that background task in our Windows Store App and now we are ready to have fun with Live tiles!!

In this blog post, I’ll go through the steps of implementing the Share feature in your Windows Store App. Sharing data can be bidirectional, your App can either accept data from another App and/or your App can share data to another App. In this article, I’ll discuss the latter scenario in which you share data with another App and your App acts as a source of information for sharing. I’ll be using the example of TFS Dashboard App in which I connect to OData Service for Team Foundation Server to retrieve data from TFServer. The source code of this App is available for download.

Consider a scenario where you want to share WorkItems from a Windows Store App with a team member. In this App, you can select the WorkItems that you wish to share.

And bring up the Charms bar (Windows key + C or swipe from the right) and hit the Share button.

Then from a list of Apps that accept the data format that you are sharing will be available as share targets.

For this example, let’s select the Mail App, and send the WorkItems to my colleague:

Now let’s implement share in our Windows Store App.

Step 1: Add the event “OnDataRequested” towards the end of the LoadState() method of the ItemDetailPage.xaml.cs or the page you want to share the data from.

DataRequested event is part of Windows.ApplicationModel.DataTransfer namespace. Hence add the following using statement on the page.

and for StringBuilder class add the namespace:

Step2: When we bring up the Charms bar and hit the Share button then the OnDataRequested event is called for that App.

We need to handle the OnDataRequested event. Add this event handler to your page, in my case it is ItemDetailPage.xaml.cs.

C#

In the above method, I go through the items that are selected i.e. WorkItems on the ItemDetailPage.xaml.cs page. I am selecting certain properties of the selected WorkItems and creating an HTML formatted text for sharing data. CreateHtmlFormat() is a method that checks your formatting and adds necessary headers.

Step 3: Detach the event handler in the SaveState method

That’s it, we are done and ready to share data from our App.

For another sample example of implementing share by using Windows Store App as source of data visit: https://aka.ms/ShareAsSource.

For Share API reference, visit: https://aka.ms/DataTransfer_API.

In this blog post, I will be discussing how to communicate with OData Service For TFS using Search contracts in a Windows Store App. The source code for my sample App is available for download as “TFSDashboardBeta.exe”.

In this sample App, I can search for a WorkItem across all the projects in TFS by entering the corresponding search term in the search box.

For example, if I enter “bug” in the search box, it will query the OData Service to look for WorkItems across all the projects that have the term “bug” matching with the State or Type property of a WorkItem.

This is what the search results look like when I search for the term “bug” against my project collection in TFS:

Clicking on a project title RadioButton will filter the search results to only show the WorkItems under that project. You can also see the count of search results under each of the projects represented by a number next to the project name.

Now I’ll go through the steps to achieve the above search results page.

Step 1: To add the Search Contract, right click on your project and go to “Add->New Item”. You will see the following dialog:

Look for “Search Contract” and rename it to “SearchResultsPage.xaml” and hit the ‘Add’ button. You will notice that two files are added to your project:

Step 2: The files that were added have the default search results DataTemplate. I want my search results to show names of the WorkItems and the creator of that WorkItem.

To achieve this, I’ll make changes to the SearchResultsPage.xaml page. Remove the predefined ItemTemplates from

GridView : 

and ListView:

And add the templates for the GridView and the ListView:

XAML

I have defined the styles used in the above code in the <Page.Resources> section of the SearchResultsPage.xaml:

Your styles and templates might differ depending upon how you want the search result items to appear.

Step 3: Rename the “App Name” in the string on the SearchResultsPage.xaml:

In my sample  code, I have removed this line because it is defined already in the App.xaml file as

Step 4: Now, I have my search results’ template ready. Next, I want to work on retrieving the search results from the OData Service for TFS.

If my OData Service endpoint looks like this:

https://localhost:10042/DefaultCollection/ 

then I can search for the term “bug" in Type and State by constructing a query such as:

https://localhost:10042/DefaultCollection/WorkItems?$filter=substringof('bug',%20Type)%20eq%20true or substringof('bug',%20State)%20eq%20true

To achieve this, update the SearchResultsPage.xaml.cs file and replace the contents of the LoadState method to query the OData Service for results:

C#

The “for loop” above goes through all the projects the WorkItems belong to and then binds filterList to the RadioButton for project selection and _results to GridView/ListView for displaying the results.

Include this list of results in the class SearchResultsPage.xaml.cs, before the constructor:

C#

The GetFeed method called in the LoadState method above and defined in the SampleDataSource.cs file retrieves the OData feed for the search query:

C#

For more information on the specific functions and properties mentioned in the above code, please download the source code.

Step 5: If the user selects a different project by clicking on its RadioButton, we need to appropriately update the UI to reflect the search results for the selected project. To achieve this, go to Filter_SelectionChanged method in the SearchResultsPage.xaml.cs page and add this line of code, right after “//TODO” statement:

C#

Step 6: We can also add hint text in the App search box to guide the user. For instance, in the below screenshot, “Search on State or WorkItemType” act as a hint text.

To enable the hint text, we can set the PlaceholderText for the SearchPane in the OnLaunched() event in App.xaml.cs:

C#

In this sample App, I have also added support for external launching of the App via the Search Pane. You can find more information on it in the hands on labs and my source code that is available for download.

For more information on Search contracts, I have recorded a video on Channel9.

Today we are releasing the beta of the OData Service for Team Foundation Server v2. In conjunction with that release I have been working on a sample Windows 8 Store App that connects to Team Foundation Server. I am glad to announce that the App - TFSDashboard - is now available for download. To download the Appx package and source code for the App, download and run ‘TFSDashboardBeta.exe’. To setup the OData Service, download ‘ODataForTFS.V2.Beta.exe’. To connect to the OData Service via the App please go through respective ReadMe files included within each self-extracting installer package.

The TFS Dashboard App currently implements the Live tiles, Search and Share features supported by the WinRT APIs. This App is primarily built to get users thinking towards building great Windows Store Apps, and to provide as an example for how to consume the OData Service for Team Foundation Server.

In consecutive blog posts, I’ll be getting into more details around consuming OData feeds for building functionalities such as Live tiles, Search and Share.

Here are some screenshots of the App:

Have fun playing with it!! If you have any feedback or suggestions, please email us.

Privacy policy: This App takes as input your TFS credential that is used for making authenticated calls to the OData Service. The App does not share the credential with any other website or App. The credential is encrypted while sending it to the OData Service.

In this blog post, I will go through the steps involved in the creation of a WCF service that generates random numbers. I would also be deploying the service to Windows Azure. I will then discuss the process of creating a Windows 8 Store App that uses this WCF service. This blog post assumes you have created a Windows Azure account. You haven’t please see more information on account creation on their website. You also need to install Windows Azure SDK for Windows. You can install it from here.

Step 1: Create a WCF service

Open Visual Studio 2012, and go to File->New->Project->Under Cloud, select Windows Azure Cloud Service. Rename the project to “RandomNumbers” or a name of your preference.

Right after you create the project, another screen pops up as shown below. Select “WCF Service Web Role” under C# from the list of options and hit the “>” button.

This is how my project looks in the solution explorer after I hit the “OK” button in the above screen.

I will rename my Service1 class and IService1 interface to RandomNumbers and IRandomNumbers throughout the project using “Rename” command in the Refactor menu. I will the rename the respective files too. The renaming is just for convenience of referring them back in this article. You can name them differently if you want.

Now, it’s time to create a simple function that generates random numbers between 1 and 100.

I will replace the functions in the RandomNumber.svc.cs  with the following function:

C#

Go to the IRandomNumbers interface and replace the operation contracts by this one:

C#

[OperationContract]
string GetNumber();

The interface or service contract defines the methods that will be exposed when the WCF service is deployed.

Now you can build your solution and create packages to upload to Azure.

Right click on the ‘RandomNumbers’ project and click on the ‘Packages’ option. A dialog similar to below will pop up:

To create packages to be deployed to Azure, hit the ‘Package’ button in the dialog as shown above. It creates two files in the ‘<YourProjectName>\bin\Release\app.publish’ folder.

Step 2: Deploy the service on Windows Azure

Go to Windows Azure website and click on the ‘Portal’ link on the top right corner. Or go to: https://manage.windowsazure.com/#Workspace/All/dashboard . I am assuming that you have a Windows Azure account if not please read more on account creation on the their website. Once you are in the portal, click on the ‘New’ button on the bottom right corner. A dialog similar to below will pop up:

Select ‘Cloud Service’ from the screen and then ‘Quick Create’ option. In the below screen, you may enter ‘randomnumbers’ in the URL field. If the term is already in use then you have to provide a different one. Click on ‘Create Cloud Service’ to proceed further.

A row appears in the ‘cloud services’ section that displays that the service was created. But it is not up and running as yet since we haven’t pushed any code to production or staging environment.

When I click on the ‘randomnumbers’ cell, it displays a dashboard. I will click on the ‘Upload a new production deployment’ link to upload my code to production.

I will enter ‘testing’ in the ‘Deployment name’ field. I need to upload the package and configuration files that I have created in Step 1. For uploading the package, I will click on the ‘From Local’ button for that row. I will browse to the ‘app.publish’ folder and select the ‘RandomNumbers’ file. Note that it has a ‘.cspkg’ extension. In a similar fashion, I will select the ‘ServiceConfiguration.Cloud.cscfg’ from the local folder for the Configuration field.

You need to check the ‘Deploy even if one or more roles contain a single instance’ and hit the button on the bottom right corner to start deployment.

Within few seconds your code will be deployed and the service will be up and running. You will see notifications similar to the ones below:

Now, I can browse to my service by using the link: ‘https://randomnumbers.cloudapp.net/RandomNumbers.svc’. You can get the link for your site URL by navigating to the Dashboard of ‘randomnumbers’ and in the quick glance section on the right.

Once you go to the web address mentioned under site URL, you see some files listed similar to as shown below:

And then you can click on the ‘RandomNumbers.svc’ to navigate to the service.

Step 3: Using the service in your Windows 8 Store App

Using the service in Windows 8 Store App is very easy. I have created a project in Visual Studio 2012 using the ‘Blank App’ template.

As a next step I right click on my Project in Solution Explorer and click on ‘Add Service Reference’. A dialog similar to one below pops up:

I have the web link to the service from Step 2. ‘https://randomnumbers.cloudapp.net/RandomNumbers.svc’. I will enter it in the Address field of the screen shown above and hit the ‘GO’ button. It will then look for the service and retrieve information about the interface and the operations exposed. I can then hit the ‘OK’ button and continue.

For demonstrating simple call to the service, I am calling the service in OnNavigatedTo() method on MainPage.xaml.cs. In the following code, I call the GetNumberAsync() method of the service that I created in Step 1 that generates random numbers. After I get a random number from the service I am updating the text field of my TextBlock element named ‘RandomNumberField’ on MainPage.xaml.

C#

You are now ready to run the App and see it in action.

For more details on the process of creating and deploying WCF service on Windows Azure:

https://aka.ms/WCFserviceOnAzure

Also refer the following link for more information on building a client application for WCF service:

https://aka.ms/ClientForWCF

In the first part of this article, I discussed obtaining the Request Token during the authentication process using OAuth protocol in a sample Windows Store App for Windows 8.

In this part, I’ll discuss the next two steps in the authentication flow for OAuth 1.0:

1. Get a Request Token
2. Get the User's Authorization
3. Exchange the Request Token for an Access Token

2. Get the User’s Authorization

After receiving the Request Token, we need to send it to Flickr’s API for User’s authorization. The Request Token is sent by appending it to the query string of the following URL with optional ‘perms’ argument.

Sample URL to get User authorization:

https://secure.flickr.com/services/oauth/authorize?oauth_token=87634kjbkjhuy89369hjkh&perms=write

I refer to the above URL as ‘Login link’ in this article. My next step would be to write a function that would return this Login link.

In the previous article, I discussed the process of generating the basic parameters, calculating the signed URL, and obtaining Request Token. I would be calling each of these respective methods in my GetLoginLink() method.

C#

Figure 1: Get the Login link

Going back to the topic of WebAuthenticationBroker discussed in part 1, I went over the parameters that I needed before I call WebAuthenticationBroker’s AuthenticateAsync() method. Now that I have all my parameters ready, I’ll write my event handler for the Login button as follows:

C#

Figure 2: Event handler for Login button

When I hit the Login button, I am navigated to the following screen:

Figure 3: Login screen in the App container

I enter my enter credentials and hit the Sign In button.

After I am successfully logged in, the following screen appears:

Figure 4: User Authorization screen – User authorizes the Request Token

When I hit the “OK, I’ll AUTHORIZE IT” button, Flickr authorizes the Request Token that I obtained in the Step 1 and sends back an authorized Request Token. The response sent back by the Flickr API gets populated in  webAuthenticationResult.ResponseData (as shown in Figure 2).

Sample response returned by Flickr looks similar to this:

<redirect URL placeholder>?oauth_token=3345464353453458-022bbgttyt3542f3432 &oauth_verifier=45dererer6b67074

3. Exchange Request Token for Access Token

As a next step in this process, I need to parse the response received in the above step and extract the authorized Request Token and prepare for exchanging it with Access Token. To get the Access Token I need to follow the same steps as needed for obtaining the Request Token (discussed in part 1). They are:

1. Get basic parameters
2. Calculate signed URL
3. Send the signed URL and get response
4. Parse the response and extract Token

The base URL for Access Token would be:

https://secure.flickr.com/services/oauth/access_token

The following method parses the response string, extracts the oauth_token and oauth_verifier received in Step 2, and calculates the signed URL. This signed URL is finally passed on to the Flickr’s API and the Request Token is exchanged for Access token. Besides the CalculateAccessToken() method defined in Figure 6, rest of the methods are defined in part 1 of this article series.

C#

Figure 5: Exchange Request Token for Access Token

Sample response from Flickr containing the Access Token looks similar to this:

After I receive a response from the Flickr API, I need to extract the Access Token and save it for sending authorized requests to Flickr APIs’.

C#

Figure 6: Extract and Save the Access Token

In my App, I load the application settings next time the App loads and retrieve the credentials as shown below:

C#

Once the credentials are retrieved, subsequent calls can be made to the various Flickr APIs’ for data exchange.

Here is an example call using the Access Token to the flickr.test.login API listed on the Flickr’s website:

You may want to check Flickr’s documentation to further understand the use of tokens in your calls to the Flickr API for data exchange.

Resources:

• I have used the Web authentication broker sample provided here.
• I have used Flickr.Net library listed on their website for making API calls.

For one of my first apps at Microsoft, I decided to build a Windows Store App that would exchange data via Flickr’s APIs. One of the challenges I faced while developing this App was communicating with Flickr’s APIs that require authentication via OAuth protocol. WinRT’s WebAuthenticationBroker API helped me in facilitating the authentication process between the App and Flickr’s OAuth service. For more information on how WebAuthenticationBroker works, please refer this article on MSDN. The OAuth authentication flow is explained in 3 three steps on the Flickr’s website:

1. Get a Request Token
2. Get the User's Authorization
3. Exchange the Request Token for an Access Token

I have divided this article in 2 parts based on the above authentication flow. In the first part, I’ll discuss the first step in the OAuth 1.0 authentication flow. In the second part, I’ll discuss the remaining two steps of authentication flow. Towards the end of the second part, I’ll also discuss about saving the token associated with the user to maintain their authentication status the next time they launch the App. Overall in the two parts, I have demonstrated the usage of WebAuthenticationBroker against Flickr’s OAuth service in a sample Windows Store App for Windows 8.

1. Get a Request Token

A user can be prompted for authentication at various points in an app like file upload, writing comments for a photo, tagging a photo etc. In my App, I use WebAuthenticationBroker in a scenario in which the user hits the login button in the sample Flickr App.

Figure 2: Login page displayed in a App container

Before we proceed to the next step of entering the credentials in the login page, let’s analyze what happened behind the scenes.

In the event handler for the Login button, a call was made to WebAuthenticationBroker’s AuthenticateAsync method. The AuthenticateAsync method renders the login screen in the App container by using the Flickr’s OAuth service. The method accepts three arguments i.e. options, requestUri, callbackUri. I have set options to WebAuthenticationOptions.None and callbackUri to the value returned from WebAuthenticationBroker.GetCurrentApplicationCallbackUri(). But I need to pass a requestUri too.

A requestUri is the URL that loads the Login page for user and is the second step in the OAuth flow. A requestUri should be something similar to this: “https://secure.flickr.com/services/oauth/authorize?oauth_token=72157626737672178-022bbd2f4c2f3432&perms=write”. The value of oauth_token mentioned as part of the query string is the value of the Request token received from Flickr.

That means that before we can call WebAuthenticationBroker’s AuthenticateAsync method we need to first get a Request token from the Flickr OAuth API.

A Request token is a temporary token that will be used to authenticate the user to the application using the API key. In the third step of the OAuth flow, you will see that the Request token will be exchanged for an Access token.

To retrieve the Request token Flickr expects the request URL to be similar to this:

https://secure.flickr.com/services/oauth/request_token ?oauth_nonce=95613465 &oauth_timestamp=1305586162 &oauth_consumer_key=653e7a6ecc1d528c516cc8f92cf98611 &oauth_signature_method=HMAC-SHA1 &oauth_version=1.0 &oauth_signature=7w18YS2bONDPL%2FzgyzP5XTr5af4%3D &oauth_callback=http%3A%2F%2Fwww.example.com

Figure 3: Sample signed URL for Request token

The above URL’s query string can be characterized as having some basic parameters (name – value pairs) and a signature parameter. The basic parameters are used for constructing the signature. To know more in detail on this topic, please refer this article’s ‘Signing Requests’ section.

In this article, I will briefly go over the steps but will definitely touch the coding part of it. To generate the Request token URL (Figure 3), I follow these steps:

a. Generate basic parameters for Flickr OAuth API

I need to first generate basic parameters for the Request token’s http request. With reference to the Flickr OAuth API, this is how they expect the basic parameters to look like:

oauth_nonce=89601180
oauth_timestamp=1305583298
oauth_consumer_key=653e7a6ecc1d528c516cc8f92cf98611
oauth_signature_method=HMAC-SHA1
oauth_version=1.0
oauth_callback=http%3A%2F%2Fwww.example.com

The below function creates a dictionary of basic parameters as per the above parameters:

C#

public static Dictionary<string,string> GetOAuthParameters(string apikey, string callbackUrl)
        {
            Random random = new Random();
            DateTime epochDate = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
            TimeSpan timespan = DateTime.UtcNow - epochDate;
            string oauthTimestamp = timespan.TotalSeconds.ToString(System.Globalization.NumberFormatInfo.InvariantInfo);
            string oauthNonce = random.Next(1000).ToString();
            Dictionary<string, string> parameters = new Dictionary<string, string>();
            parameters.Add("oauth_nonce", oauthNonce);
            parameters.Add("oauth_timestamp", oauthTimestamp);
            parameters.Add("oauth_consumer_key", apikey);
            parameters.Add("oauth_signature_method", "HMAC-SHA1");
            parameters.Add("oauth_version", "1.0");
            parameters.Add("oauth_callback", callbackUrl);
            return parameters;
        }

Figure 4: Get basic parameters

b. Calculate signed URL

Once I have the basic parameters, I need to sort them and create a base string in the form of:

GET&https%3A%2F%2Fsecure.flickr.com%2Fservices%2Foauth%2Frequest_token&oauth_callback%3Dms-app%253A%252F%252Fs-1-15-2-452505077-3210332440-309548214-3674837716-3057654506-2702161574-51733630%252F%26oauth_consumer_key%3Dsdsdsdsdsdsdwdwdw%26oauth_nonce%3D246%26oauth_signature_method%3DHMAC-SHA1%26oauth_timestamp%3D1348034567.41827%26oauth_version%3D1.0

Using the base string as the ‘text’ and the consumer secret key as the ‘key’, we then need to calculate the signature using HMAC-SHA1 encryption. The consumer secret key is one of the keys that you receive when you register for an App on the Flickr website.

The next thing would be to put together the base URL for Request token (https://secure.flickr.com/services/oauth/request_token), basic parameters and signature to generate a signed Request token URL as shown in Figure 3.

The method below helps me achieve that. I provide the basic parameters, Request Token base URL, secret key, and the bool parameter as ‘false’ to the method. And it returns the signed URL for obtaining Request token that is ready to be sent to the Flickr’s API. I would also use the below (CalculateOAuthSignedUrl()) method in the exchange of Request token for Access token step. That’s where I would call the method with the ‘exchangeStep’ parameter as ‘true’.

C#

Figure 5: Calculate signed URL

c. Send the signed URL and get the response

Once we have the signed URL for obtaining Request token, we are ready to send it the Flickr OAuth API. I use the method below for exchanging request/response from the Flickr’s API:

C#

public async static Task<string> GetResponseFromWeb(string url)
        {
            HttpWebRequest Request = (HttpWebRequest)WebRequest.Create(url);
            string httpResponse = null;
            Request.Method = "GET";
            HttpWebResponse response = (HttpWebResponse)await Request.GetResponseAsync();
            if (response != null)
            {
                StreamReader data = new StreamReader(response.GetResponseStream());
                httpResponse = await data.ReadToEndAsync();
            }
            return httpResponse;
        }

Figure 6: Get http response from web

d. Parse the http response and extract the Request token

Flickr returns a response similar to the one below:

oauth_callback_confirmed=true &oauth_token=72157626737672178-022bbd2f4c2f3432 &oauth_token_secret=fccb68c4e6103197

I parse the response and extract the Request token:

public static void SetRequestToken(string response)
        {
            string [] keyValPairs = response.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;
                        }
                }
            }
        }

In the part 2 of this article, I will use the Request token extracted above for step 2 & 3 of the OAuth flow i.e. for user authorization purposes and eventually exchanging the Request token with Access token.

I am a graduate from University of Washington in the field of Information Management and a Bachelors in Engineering from University of Mumbai. I have been living in Seattle for close to two years now and enjoying the awesome weather !