REAL WORLD OAUTH USING ASP.NET MVC 4

If you haven’t heard of OAuth or OpenID, you have most certainly used it in day to day life. Have you provided your google username/password and logged in to StackOverflow or used your WordPress.com account to post comments on someone’s blog or used third party Twitter clients whom you have given permission to use your Twitter account or used Facebook to post comments on some tech blog site? If answer to any of the above is a yes, you have seen OAuth or OpenID in action.

oauth

The diagram above demonstrates the Authentication process for an OAuth provider.

The overall workflow is as follows:

  1. Application (Relying Party) registers with OAuth provider and obtains an Application specific key (secret). This is a one-time process done offline (not shown in above image).
  2. Next the Application (Relying Party) has to pass the Application key to the provider every time it intends to authenticate someone.
  3. User of the Relying Party needs to be registered with the Provider (again a one-time offline process)
  4. Every authentication request directs the user to the Auth Provider’s site. The user enters the Username and Password that they obtained in Step 3 above. The Provider verifies the account credentials, then it matches the Application Key and provides a token back to the Relying Party with which only the Authorized actions can be performed.

Today we will learn how to use ASP.NET’s integration of the DotNetOpenAuth library that allows you to integrate using Twitter/Facebook/Google Id and other similar pro viders.

Getting Started – Registering an Application with Twitter

Step 1, registering our application with Twitter.

1. Navigate to http://dev.twitter.com/ and click on the Sign In (top right)

2. Log in using your Twitter credentials. Hover over your Account Info and Click on ‘My Applications’

my applications

This will take you to the Applications page where you can register a new Twitter Application. This is going to be the Relying Party.

3. Next click on ‘Create a new application’ and navigate to the new application page.

It asks for the following details

  • Provide proper Name and Description these will come up every time a new user Authenticates at your site.
  • Specify a callback URL that would point to a site address. You can point it to http://127.0.0.1:8765/
  • Notice the Website is setup as localhost address. This is for testing purposes. Once you have the application going
    set it back to the actual website.
  • Scroll down, read the Developer Rules of Road carefully and click on Yes, I agree.
  • Fill in the captcha and click on ‘Create your Twitter Application’.

4. Twitter will navigate to a page similar to the following:

demo app

Next click on the ‘Create my access token’ to generate the access token that our app will be using along with the Consumer Key and Consumer secret. Remember all three values shouldn’t be shared.

Using Registration information to Authenticate with Twitter

1. Create a new ASP.NET MVC Web Application and select the Internet Template.

2. Open the AuthConfig.cs from the App_Start folder and uncomment the code to register the Twitter Client

public static void RegisterAuth()
{
        OAuthWebSecurity.RegisterTwitterClient(
                                  consumerKey: “”,
                                  consumerSecret: “”);
}

3. Put the keys in web.config and update the above code to get the values from ConfigurationSettings.

4. Update the project’s properties to run the application on the same port as specified in the URL above http://localhost:8765/

5. That’s pretty much it. Run the Application and click on the Log On Link to be presented with the new Login page

As you can see we have a button to log in to Twitter. Let see what happens when we click on it.

6. On clicking twitter the application gets routed to a Twitter page

authorize

Note: This is why when using OAuth you have to be careful to request for only as much information as you need. If your app seems terribly nosy, the end user may choose not to give you permissions.

– On successful authentication, you will see a brief flash of ‘redirection in progress’ message and the user will be sent back to our application again.

7. For the first time log in, we will be requested to register you user name.

8. Once you Register, you are logged in as an Authenticated user for the application

hello

With this we have completed Step 2, 3 and 4 of the OAuth process.

Thank you & Keep It Simple and Straightforward 🙂

~:H}{H:~