Simple OAuth integration for Twitter in ASP.NET MVC

Speaking to @JacoPretorius earlier in the week the samples that come with the DotNetOpenAuth (http://www.dotnetopenauth.net/) libraries weren’t clear.  To be honest I couldn’t even get the samples to run, firstly because the project types weren’t up to date & also because the references to the MVC libraries were wrong.  I also wanted to get it running in VS2010.  Rather than labour with getting it running in VS2008 I had a quick scan of the source code & set to work figuring it out.  The article that follows describes what needed to be done to get the MVC sample application integrating with Twitters OAuth mechanism.

I’m not going to detail the OAuth process here, there are plenty of articles around that do that already.  I will summarise it from a dev perspective though – you redirect the user to a 3rd part auth provider (e.g. twitter, google, and many others) using a standard http redirect.  The details at the auth provider end will vary, but may include the user authenticating themselves & authorizing the calling application (i.e. your app) to access there identity.  The auth provider then redirects back to the calling application passing an encrypted string, which contains the users identity.  The details here will vary depending on the auth provider.

I do have a couple of gripes with the implementation of the OAuth protocol based on what I’ve seen with twitter & google (this may not apply to all OAuth providers); it seems you need to register with each provider you want to support (I couldn’t even register with google because it’s integrated into the google webmaster tools & needs to verify against a real site), you then need to store credentials for each of those providers in your application, finally it doesn’t seem like there’s a standard set of attributes in the identity that gets returned to allow you to extract info such as user ID.  You basically get a set of name value pairs in an "Additional parameters" collection, on twitter the username is in a property called screen_name.

The code below is just to illustrate be refactored as I add more providers but for now

Onto the real work…

I’ve started with the basic asp.net MVC starter site:

First you need to set yourself up as an oath client with twitter at http://twitter.com/oauth_clients/, the details here don’t seem to matter – I used a website URL that isn’t live yet & it was fine – when you’re debugging locally the redirect back from twitter after authenticating

Then reference the correct assemblies – you’ll need to find them in the samples, and put them wherever you’d normally put dependency libs:

DotNetOpenAuth
DotNetOpenAuth.ApplicationBlock

I then setup the references I need:

using DotNetOpenAuth.ApplicationBlock;
using DotNetOpenAuth.OAuth;
using DotNetOpenAuth.OpenId;

And a static field & property to store the twitter credentials:

private static InMemoryTokenManager _tokenManager = new InMemoryTokenManager("Twitter Consumer key", "Twitter Consumer secret");

private InMemoryTokenManager TokenManager
{
    get
    {
        return _tokenManager;
    }
}

Then modify the login view views/account/logon.aspxto include a "login via twitter" option as a simple link (I used an action called TwitterOAuth on the Account controller to wrap up my logic for preparing the request to twitter):

<a href="<%= Url.Action("TwitterOAuth") %>"><img src="../../Content/images/oauth/twitter/twitter_button.gif" alt="twitter oauth button" /></a>

It may look something like this:

The server side component consists of two requests, one when the user clicks the button & one when the auth provider redirects the user back.  I have a TwitterOAuth action & a OAuth action.

In the TwitterOAuth action I use the dotnetauth library to construct a wrapper around the twitter OAuth API, prepare the URL that I want the user to be redirected back to  & send the request, which redirects the user to twitter to authenticate.

public ActionResult TwitterOAuth()
{
    var twitter = new WebConsumer(TwitterConsumer.ServiceDescription, this.TokenManager);
    
    //Create the URL that we want Twitter to redirect the user to
    var oAuthUrl = new Uri(Request.Url.Scheme + "://" + Request.Url.Authority + "/Account/OAuth");
    
    // If we don't yet have access, immediately request it.
    twitter.Channel.Send(twitter.PrepareRequestUserAuthorization(oAuthUrl, null, null));
    
    //This shouldn't happen!!
    
    return null;
}

In the OAuth action I’m going to process the response from Twitter and if successfully authenticated store the identity in the ASP.NET forms authentication cookie & redirect to the home page:

public ActionResult OAuth()
{
    var twitter = new WebConsumer(TwitterConsumer.ServiceDescription, this.TokenManager);

    // Process the response
    var accessTokenResponse = twitter.ProcessUserAuthorization();

    // Is Twitter calling back with authorization?
    if (accessTokenResponse != null)
    {

        //Extract the access token & username for use throughout the site
        string accessToken = accessTokenResponse.AccessToken;
        string username = accessTokenResponse.ExtraData["screen_name"];

        CreateAuthCookie(username, accessToken);
    }
    else
    {
        //If the request doesn't come with an auth token redirect to the login page
        return RedirectToAction("Login");
    }

    //Authentication successful, redirect to the home page
    return RedirectToAction("Index", "Home");
}

private void CreateAuthCookie(string username, string token)
{
    //Get ASP.NET to create a forms authentication cookie (based on settings in web.config)~
    HttpCookie cookie = FormsAuthentication.GetAuthCookie(username, false);

    //Decrypt the cookie
    FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(cookie.Value);

    //Create a new ticket using the details from the generated cookie, but store the username &
    //token passed in from the authentication method
    FormsAuthenticationTicket newticket = new FormsAuthenticationTicket(
    ticket.Version, ticket.Name, ticket.IssueDate, ticket.Expiration,
    ticket.IsPersistent, token);

    // Encrypt the ticket & store in the cookie
    cookie.Value = FormsAuthentication.Encrypt(newticket);
    
    // Update the outgoing cookies collection.
    Response.Cookies.Set(cookie);
}

That’s it! You should now see the logged in user in the top right corner & the logout method will work as expected: