ASP.NET 4.5 : Login using other Authentication Providers Simplified

In this Post, I am going to discuss one of the other new features of ASP.NET 4.5. That you’ll like. I’ll also try to make it simple and include step by step tutorial so that you can implement at your environment.

Now a days, you guys must have seen that almost all leading websites allow you to login with your other accounts/credentials. It may be Facebook, Gmail, Twitter, Microsoft and many other.

I like this feature very much because a user don’t need to register on every website where s/he wants to login and reduce the login credentials count drastically and make life simpler.

So Facebook, Gmail, Twitter… works as Identity provider that provides there APIs that one can integrate with there application and allow user to login with their Facebook, Twitter, Gmail… accounts. There are various ways to implement it and they work on some standard protocols so that everybody can understand their API.

Currently, most leading identity provider follow OAuth standards and OAuth provides a process for end-users to authorize third-party access.

So now let’s come to ASP.NET. ASP.NET 4.5 new template has the required code already in place that you require to write to uses the third party Identity provider. You just need to enter some required Ids and secret keys and once you provide it. It’ll start working.

So let’s first create a ASP.NET application as FILE|NEW|Web Site|ASP.NET Web Forms Site. Now if you open the solution explorer, It has created lots of files and that provides many feature already implemented, you must have seen in earlier version as well. I assume you have basic Idea about all that.

Now let’s open a file under App_Code/AuthConfig.cs. Now if you check this file has several lines of commented code. If you see that closely, then actually it adding authentication clients like Twitter, Facebook, Microsoft, Google . Now here, you need Id and secret keys for the authentication clients that you need to provide.

So I have uncommented the code for two authenticated clients Twitter and Google. And I have put my Twitter  key and secret key while Google doesn’t require any. Now as soon as,  you run the application and click on login link at right top, you ‘ll see below

Login

You can see two buttons Twitter and Google. A user can use these accounts to login. Let’s click on twitter.

Twitter Login

It took me on the above page and I entered here my Twitter account and clicked on sign in and it took me at the following page

AfterLogin

here I can change my my user name and I changed it as Brij. As soon as I click on login, I am authenticated and you can see that I am now loggedin.

LoggedinWithTwitter

Now if you click on the user name (Brij) shown in above pic right corner, It shows the following page.

twitter-ResetPwd

It allows you to set a local password. After setting your local password you won’t need to your login via Twitter  to authenticate the current website. Now if you see the last section, it shows twitter account which is used for login.

You can login with other account as well at same point of time. As, I have enabled the two authentication providers Twitter and Google, you are seeing both of these two at last section . And when I click on Google it takes me at Google login page. As soon as I put my credential and click on Sign in button. It shows me that I am logged in as using two accounts. Twitter and Google as

Loggedinwithtwoaccount
Also, you can see after login with two accounts, it shows a remove button to remove any authentication. And as soon as you’ll click on any remove button that authentication will get removed and other remove button will also be removed. Because for login, at least one authentication is required.

Now I’ll tell you, How I created Ids and secret for my local App. To create appId and secret from Twitter go to link TwitterApp .

Once you click on the following the below steps:

  1. Click on Create a New Application
  2. Put the name and description of your application.
  3. Now, put the URL of the your local application. A caveat,  you cannot put the URL generated by Visual Studio integrated server. So host your application at local IIS but twitter wont accept localhost URL as well. You need to have some URL that be hosted on some domain. So how can you mimic that scenario on your local server. I have found a interesting testing domain localtest.me . This is not localhost.me but localtest.me.
    So to set the domain, Go to IIS->Default Web Site. Right Click Default Web Site and Click on Edit Bindings. Here I added a Site Binding (localtest.me)  by Clicking on Add button. I just entered the Host Name localtest.me as

AddBinding

So my application URL for twitter was http://localtest.me/testdomain/Default.aspx.

So once you’ll put all these and save. You’ll get Key and Secret that you can use for your ASP.NET 4.5 local application.

So you have seen, How ASP.NET 4.5 simplified our life by providing inbuild mechanism for using other leading authentication providers. We as developer don’t need to worry about underlying complex logic. Just need to provide some AppIds and Secrets and Google does not require any Id and secret as well.

Hope you all have enjoyed.

Happy Learning,
Brij

About these ads

2 thoughts on “ASP.NET 4.5 : Login using other Authentication Providers Simplified

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s