A while ago I wrote a post on how to perform oAuth authentication against the LinkedIn API using Hammock. Today I want to show you how to use Hammock with the Facebook Graph API. The Graph API is a new way a developer can read and write data to Facebook. Facebook uses oAuth 2.0 which is a simpler version of the oAuth authentication I used in my previous article with LinkedIn. It uses SSL instead of relying on the URL signature schemes and token exchanges you see in oAuth 1.x

There are 3 steps:

1. Redirect the visitor to the authorization page over at Facebook.com
2. Handle the callback from Facebook.com
3. Get an access_token from Facebook.com using the code parameter returned by Facebook.com in step 2

For more information about the exact details on authorization in the Graph API go to: http://developers.facebook.com/docs/api

So let’s begin. I created a Web application in Visual Studio .Net 2010 that looks like this:

As you can see there is not much on the page except for a button, an empty image and some text with “Unknown” values. The goal is that when your visitor clicks the “Connect to Facebook” button he/she gets redirect to Facebook.com to authorize your application and then you can get the profile picture, name and the visitor’s about text he/she filled in on Facebook.

When the visitor clicks the “Connect to Facebook” the following code is executed:

   protected void Button1_Click(object sender, EventArgs e)
   {
            string callbackUrl = "http://localhost/FacebookConnectWithHammock/";
            //Request offline access and publish to the users stream access.
            Response.Redirect(string.Format("https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}&scope=offline_access,publish_stream", ConfigurationManager.AppSettings["FacebookClientId"], callbackUrl));
   }

What this does is it will redirect the visitor to facebook to the authorization page. This specific authorization request asks foor “offline_access” and “publish_stream” rights. This means that the application can access your Facebook account while you are offline and it can also publish updates to your Facebook account. Other parameters are the “client_id” which you need to set to your application’s client id that was assigned to your application when you created it and the “redirect_uri” which tells Facebook where to redirect the visitor after he/she granted your application access. When this is the first time the visitor is authorizing your application he/she will see the following authorization page:

When the visitors clicks on the “Allow” button Facebook will redirect the visitor back to the “redirect_uri” parameter. Then arriving on the web server we will receive a code parameter that we need to use to get the access_token. Here is how the callback code looks:

First in the Page_Load we check if the current request is a callback from Facebook by verifying if the Request["code"] querystring parameter is not null or empty and when it is not we call the callback handling code:

 protected void Page_Load(object sender, EventArgs e)
 {
     if (!string.IsNullOrEmpty(Request["code"]) && !Page.IsPostBack)
     {
          HandleFacebookCallback();
     }
 }

The HandleFacebookCallback method will use the “code” parameter to get an access token and then call the DisplayUserInformation method passing the received token. The DisplayUserInformation will make a request to the Graph API requesting information about the visitor that just authorized the application. It will show the profile picture, name of the visitor and the about text that is filled in on his/hers Facebook profile.

        private void HandleFacebookCallback()
        {
            string CallbackUrl = "http://localhost/FacebookConnectWithHammock/";
            var client = new RestClient { Authority = "https://graph.facebook.com/oauth/" };
            var request = new RestRequest { Path = "access_token" };

            request.AddParameter("client_id", ConfigurationManager.AppSettings["FacebookClientId"]);
            request.AddParameter("redirect_uri", CallbackUrl);
            request.AddParameter("client_secret", ConfigurationManager.AppSettings["FacebookApplicationSecret"]);
            request.AddParameter("code", Request["code"]);

            RestResponse response = client.Request(request);
            // A little helper to parse the querystrings.
            StringDictionary result = ParseQueryString(response.Content);
            string aToken = result["access_token"];

            DisplayUserInformation(aToken);
        }

        private void DisplayUserInformation(string sToken)
        {
            var client = new RestClient { Authority = "https://graph.facebook.com/" };
            var request = new RestRequest { Path = "me" };
            request.AddParameter("access_token", sToken);
            RestResponse response = client.Request(request);

           JavaScriptSerializer ser = new JavaScriptSerializer();
            var parsedResult = ser.Deserialize<FacebookUser>(response.Content);

            ProfilePic.ImageUrl = string.Format("http://graph.facebook.com/{0}/picture?type=large",parsedResult.id);
            NameLabel.Text = parsedResult.name;
            AboutLabel.Text = parsedResult.about;
        }

When all goes well it should a little like the picture below.

Okay the formatting may not be optimal, but you get the point on how you can use Hammock to interact with the Facebook Graph API.

You can download the sample code here: Download
Downloaded 1751 times

NOTE: if you want to use the sample you will need to create an application first to get your application client id and secret. For more on this go to: http://www.facebook.com/developers/

Okay this is how the issue creation screen looks like without our little gimmick:

I blacked out some values just for privacy reasons, but you get the point. Now if all you need is to change the text Fix Version/s to in our case Milestone all it takes is the following script:

<script language="JavaScript">

jQuery(function(){
	AJS.$("label[for=fixVersions]").replaceWith(" <label for='fixVersions'><span class='required' title='Fields in italics are required'><sup>*</sup>Milestone:</span></label>");
});

</script>

As you can see I’m using jQuery to look for a label element where the for attribute is set to ‘fixVersions‘ and replace it with a new label element.
That’s all! Well not all, you still need to get it on your pages. To do this I’ve used a Message Custom Field (for edit). If you also want this on your viewing page you need to create a second custom field of type Message Custom Field (for view) and set the default value of both custom fields to the script. To apply this text replacment to all screens, issue types and projects (create,edit and viewing) it’s best to set the context to ‘Global‘ and ‘Any issue type‘. and you are good to go. When applied the screen screen will look like this:

The Message Custom Field can be found in the Jira Toolkit plugin

Of course this technique can be applied to whatever field if you like, just remember it is a text replacement on rendering of the page so in the system nothing changes! If there is an error message about the Fix Version/s field for example when it is required and no version is selected the error message will not be using the term ‘Milestone‘.

Now before you go looking for the custom field you have to know that is not installed by default. The Velocity processed Custom Message Field can be found in a Jira plugin called Jira Toolkit over at the Plugin exchange. So if you want this to work go and install this plugin.

Now with the plugin  installed create a new custom field of type Velocity processed Custom Message Field (for edit), give it a name and make sure you select All issue types and the global context! Don’t worry I’ll explain later why.

Having created the custmom field it is time for the logic. What we are going to do is to create a mix of velocity script and javascript to show an error message to a user when he/she does not belongs to a certain user group and remove all the input fields from the form. The script I’m going to use for that looks as follows:

#if ($authcontext.user.inGroup('developers'))
##do nothing
#else

<script language="JavaScript">

jQuery(function ()
{
        AJS.$("<div class='warningBox maxWidth' style='text-align:center;color:DarkRed'><h1>$authcontext.user.getFullName() ,<br/>This issue type is for internal use only. <br/>Please create an Incident, Enhancement or New Feature instead!</h1></div>").appendTo('.intform');
	AJS.$(".jiraform").remove();
});

&lt;/script&gt;

#end

A little explenation is in order here I guess. All the lines preceded by the # sign is Velocity markup. Jira uses the Velocity templating engine to create its webpages. What the velocity code does is rather straight forward it checks if the current user is in the group ‘developers’ - $authcontext.user.inGroup(‘developers’) -. If that is the case then do nothing. When the current user is not in the ‘developers’ user group a jQuery script will be executed which appends a div with a warning to the page and then removes the HTML table that contains all the input fields. A little note on this is that Jira must load the jQuery library. I found that my instance has got a line like this that load the jQuery library:

<script type="text/javascript" src="/s/531/1/2.1.3/_/download/batch/com.atlassian.auiplugin:ajs/com.atlassian.auiplugin:ajs.js" ></script>

If you don’t have the jQuery library you need to make sure it is loaded.

So that is the script that will do the magic stuff. Now all you need to do is enter it as the default value for your custom field you created above. You can do this by clicking the ‘configure’ link and on the new page ‘edit default value’. In the textbox paste the script and update the field.
Remember that I said you needed to select all issue types and the global context when you created the custom field? The reason for that is that in Jira 4.1.x there seems to be an issue with setting the default value when you have not selected as is. When you select specific issue types and projects instead of all issue types and global context you’ll get strange page when you go and try to set the custom field’s default value. The textbox is not there. This is a known issue and the woirkaround for when you need to edit the default value is to set it back to all issue types and global context. I know that’s not really fun to do, but it will get it done!

Now to secure certain issue types you don’t want non developers to create just select the types you want and if necessary select the project(s). You can do this by clicking the ‘configure’ link of the custom field and then select the ‘Edit configuration’ option.

After you’ve saved these settings creating a prohibited issue type will render like this. What you see below is a customer trying to create a bug while a customer is only allowed to create an incident, New Feature or Enhancement

As you can see you address the the user in this case Customer Person (which is the Fullname of the logged in jira user) that he/she can only create an Incident, Enhancement or New Feature. Also notice that there are no input fields on the form.

So depending on the version of jira you are using you will need to tweak the jQuery to show and remove the correct elements, but this should be applicable to any version where you can use the Velocity processed Custom Message Field.

A small note I wish to add is that when a user disable javascipt in his/hers browser this solution will become useless since it uses javascript to disable those fields, but then again so becomes the rest of the internet just try and surf without javascript enabled

In part 2 I’ll show you how to change the label of the Version field using similar techniques.

 

Codeplex.com description of Hammock:
Hammock is a REST library for .NET that greatly simplifies consuming and wrapping RESTful services.

I’m currently working on a little web project that needed integration with LinkedIn.com. The LinkedIn API allows for OAuth authorization and authentication. They describe the process of getting a request token, authorizing it by the user and then getting an access token. Standard OAuth you might say. So I needed a way to do this in C# and found the Hammock library. Although Hammock does not only do OAuth I used it for that purpose only at the moment.

Below is the code I wrote to get a request token and send the user to the authorization page at Linkedin:

public void RequestAndAuthorize()
        {
            var credentials = new OAuthCredentials
            {
                CallbackUrl = "http://127.0.0.1/oauth/callback/",
                ConsumerKey = ConfigurationManager.AppSettings["ConsumerKey"],
                ConsumerSecret = ConfigurationManager.AppSettings["ConsumerSecret"],
                Verifier = "123456",
                Type = OAuthType.RequestToken
            };
            var client = new RestClient { Authority = "https://api.linkedin.com/uas/oauth", Credentials = credentials };
            var request = new RestRequest { Path = "requestToken" };
            RestResponse response = client.Request(request);

            string token = response.Content.Split('&').Where(s => s.StartsWith("oauth_token=")).Single().Split('=')[1];
            string token_secret = response.Content.Split('&').Where(s => s.StartsWith("oauth_token_secret=")).Single().Split('=')[1];

            Response.Redirect("https://api.linkedin.com/uas/oauth?oauth_token=" + token);
        }

Once the user has authorized your request token the LinkedIn server will redirect the user back to the callback url in this case this is http://127.0.0.1/oauth/callback. Using the returned oauth_token and oauth_token_secret (you got this one while requesting a request token) you can now get an access token so you can start making authenticated API calls from you application on behalf of the user.

This is the code that is used when the callback url is called:

	public void Callback()
        {
            var credentials = new OAuthCredentials
            {
                ConsumerKey = ConfigurationManager.AppSettings["ConsumerKey"],
                ConsumerSecret = ConfigurationManager.AppSettings["ConsumerSecret"],
                Token = token,
                TokenSecret = token_secret,
                Verifier = verifier,
                Type = OAuthType.AccessToken,
                ParameterHandling = OAuthParameterHandling.HttpAuthorizationHeader,
                SignatureMethod = OAuthSignatureMethod.HmacSha1,
                Version = "1.0"
            };
            var client = new RestClient { Authority = "https://api.linkedin.com/uas/oauth", Credentials = credentials, Method = WebMethod.Post };
            var request = new RestRequest { Path = "accessToken" };
            RestResponse response = client.Request(request);
            string content = response.Content;
        }

As you can see Hammock is really nice and allows for easy OAuth authentication/authorization to be used.

The new logo icon:

I’ve experienced waiting times up till 30 seconds for the first page to appear, now this is not really acceptable for any site I admit. I remembered that there is IIS 7 extension called application warm-up tool that you can configure to call a certain url when the worker process recycles. This will trigger the site to startup again and load up all the caching and stuff. I’m not saying that the next call will be blazingly fast but at least your request will be served much faster.

I’m currently developing several sites using the Kooboo platform and I’m pleasently surprised of the possibilities of the platform. Thumbs up for the creators!

1. Microsoft Tag: suddenelfilio.net can help you with your Microsoft Tag needs.
2. WordPress Services: for a simple blog or wordpress as cms we can help you!

Have a look at the Products & Services page for more information.

Have a look at http://rilsharp.suddenelfilio.net

System.ServiceModel.Security.SecurityNegotiationException: Could not establish trust relationship for the SSL/TLS secure channel with authority ‘ws.tag.microsoft.com‘.

As you can see the authority is complaining about the Microsoft domain. The issue was the certificate used by Microsoft’s Tag API was outdated and thus the error was thrown when the  REST service communicated with the Microsoft service.

Since the certificate has been renewed and is now valid till somewhere early 2011 this problem should be resolved.