OAuth in ASP.Net Web Forms

posted in.Net, Authentication, C# on by

Having successfully implemented OAuth in a recent project I thought I would blog about my experience in getting everything configured.

Thanks first of all to this most excellent of videos from Scott Hanselman which provides a fantastic step by step guide on configuring OAuth in ASP.Net

What is OAuth?

Lifted directly from the OAuth Community Site:

An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.

For you as a developer this means that you gain limited access to a third party application’s services and may use those services within your own site.  For the purposes of this post that means you can leverage third party authentication services for use within your site.

Why is it useful?

Think about it.  Do you really want another username and password to remember?  You’ve probably got a grocery list of them already so wouldn’t it be nice to just be able to log in to your favourite sites using just your Twitter, Facebook, Gmail, or whatever, account?

Don’t get me wrong, there’s nothing wrong with going with the classic site registration of username and password but it’s so little hassle to provide this alternative to your users that, to me, it’s a no brainer.

In fact with the template provided in ASP.Net you can allow users who register with an alternate account to create a local password for your site if they want to, giving the best of both worlds, and that all important convenience and flexibility to your users.

Okay, I’m convinced, show me how

Create the Project

Here goes.  First off open up a new Visual Studio 2012 web forms project

Create New Web Forms Application

Notice over on the right under the App_Start folder there’s a file called AuthConfig.cs.

AuthConfig.cs file

Open this up and you’ll see a bunch of commented out code which shows you that you can set up Twitter, Facebook, Microsoft and Google just by filling in the authentication keys and secrets.

Default content of AuthConfig.cs file

If you run the application as it stands and go to the Login page you’ll see that you’ve got the standard membership features already configured but notice that there’s a new section with the heading Use another service to log in. This is the OAuth area which we’ll configure in the next couple of steps.

Login Page

Okay so back to AuthConfig.cs.  It’s time to fill in the blanks.

Register Your Application

First things first you’ll need to register your application with the services you want to use:

Twitter

  1. Go to the Twitter developer’s site at : https://dev.twitter.com/apps (main site is at https://dev.twitter.com)
  2. Sign in with your Twitter account (or create one if you don’t already have one)
  3. Click on the Create a new Application button
  4. On the Create an application form, fill in the name of your application, give it a description, provide a link to your application’s home page (e.g. http://myapplication.com), and provide a callback url.  This is the url that Twitter will redirect your users to after they have logged into Twitter (e.g. http;//myapplication.com/myaccount)
  5. Accept the terms and pass the Captcha test
  6. Click on the Create your Twitter application button
  7. You’ll then be taken to the My Applications page.  From here:
  8. Choose the application you created
  9. On the Details tab, scroll to the bottom and choose the Create My Access Token button
  10. Still on the Details tab, copy the Consumer Key and Consumer Secret values for your application
  11. Return to your application and open up the AuthConfig.cs file
  12. Uncomment the Twitter section
  13. Then paste Consumer Key and Consumer Secret values into the consumerKey and consumerSecret parameters respectively

Facebook

  1. Go to the Facebook developer’s site at: https://developers.facebook.com/apps
  2. Log in and register as a developer if you haven’t already done so
  3. Click on the Create New App button
  4. Fill in the details about your app
  5. On the app screen, enter in your App Domain e.g. myapplication.com
  6. Under the Select how your app integrates with Facebook section select Website with Facebook Login, then enter your site url e.g. http://myapplication.com
  7. Hit Save Changes then take a note of your App ID and App Secret
  8. Return to your application and open up the AuthConfig.cs file
  9. Uncomment the Facebook section
  10. Then paste your App ID and App Secret into the appId and appSecret parameters

Once you’ve done this, fire up your application again, go to the Login page, and note that you’ve now got a couple of buttons allowing you to log in via Twitter and Facebook.

Login showing OAuth options