Building MVC 5 Application With an Open Authentication

Introduction

This article shows how to build MVC 5 applications with an open authentication, in other words using OAuth 2.0, in other words enable login by the users using their social accounts like Facebook, Twitter, Google etc. We can do this using OAuth 2.0. Using this account credentials users can login to the application. Because many users use various accounts, if users don’t want to sign up for that then another way is OAuth 2.0.

OAuth

OAuth is an open standard for authorization. OAuth provides client applications a "secure delegated access" to server resources on behalf of a resource owner. It specifies a process for resource owners to authorize third-party access to their server resources without sharing their credentials (from the Wikipedia).

OAuth stands for Open Authorization. It is an open standard for token-based authentication and authorization. It began in November 2006 when Blaine Cook was developing the Twitter OpenID implementation. That version is OAuth 1.0 and the next version in Oct 2012 is OAuth 2.0 that is a stable version and now open with various other authentications also like Facebook, Google etc.

The following is how to get started with a Demo example:

1. Creating MVC 5 Application
2. Setting up SSL in the Project.
3. Creating Google App for OAuth 2.0

Creating MVC 5 application

Use the following procedure.

Open Visual Studio 2013.

Click "File" -> "New" -> "Project...".

Select Web on the left side then select .NET Framework 4.5.1 -> ASP.NET Web Application.

Provide the name for your application like "MVC5.OAuthDemo". Click OK.



Figure 1: MVC5.OAuthDemo

It will prompt next window for selecting template.



Figure 2: Template

Select MVC template then click OK.



Figure 3: Select MVC Template

Your MVC 5 application is created.

Press F5 or Run the application. It will look like following.



Figure 4:Run the Application

Congratulations, your MVC 5 application ran successfully. Click on restore down the browser page you can see like following:



Figure 5:Run Successfully

The Home, About, Contact, Register and Login menu is hidden, when you click on the right side navigation icon it will show:



Figure 6:Home Page

Because of the MVC 5 new feature Bootstrap.

Setting Up SSL in Project

SSL

Several common authentication techniques are not secure on plain HTTP. Like basic authentication, forms authentication and unencrypted credentials. For these authentication techniques SSL and SSL client certificates must be used to authenticate clients.

Secure Sockets Layer (SSL) is the standard security technology for establishing an encrypted link between a web server and a browser. This link ensures that all the data passed between the web server and browsers remain private and integral. SSL is an industry standard and is used by millions of websites in the protection of their online transactions with their customers.

Use the following procedure.

For local testing, you can enable SSL in IIS Express from Visual Studio. In the Properties window, set SSL Enabled to True. Note the value of SSL URL, use this URL for testing HTTPS connections.

In Solution Explorer click on MVC5.OAuthDemo.



Figure 7:Solution Explorer

Hit F4 for Project Properties.



Figure 8: For Project Properties

Change SSL Enabled to true as in the preceding.

Copy the SSL URL. (Here is https://localhost:44300/).

Right-click on the project then click on Properties.



Figure 9: On Properties

Select the Web tag then paste the previous then copy the SSL URL in the project URL.



Figure 10:Select Web Tag

Save the changes, we will need this URL to Configure Facebook, Twitter and so on.

Add the RequireHttps attribute to the Home controller to require that all requests use HTTPS.



Figure 11:Add the RequireHttps

Run the application. It will look as in the following in IE.



Figure 12: IE

Click on continue to this website.



Figure 13:Continue to the Website

Create a Google App for OAuth 2.0 for a MVC 5 project. I will use Google for OAuth. Use the following procedure.

Open Google Developer Console.



Figure 14:Web Page

Login with your Google account credentials to create the project.



Figure 15:Google

To create a new project, click on Create a Project, provide the name and select the terms and conditions then click on Create.



Figure 16: Create a new Project



Figure 17: Project Name

After creating the project the screen looks as in the following.



Figure 18: After Create a Project

Click on the left side menu option. Click on APIs and auth -> credentials.



Figure 19:APIs and Auth

Next, click on the Add Credentials button. Select the second option for creating a new Client ID.



Figure 20: Add Credentials



Figure 21: New Client ID

Select Web Application here, but we didn’t set the Product name. You can see in the preceding image that there is notification for that, click on Configure Consent Screen.



Figure 22:Configure Consent Screen

Next, click on the Save button. After you can see the following screen:



Figure 23:Click Save

Select here Web Application because we are used in our MVC application. When you select Web Application the screen is as in the following:



Figure 24:Select Web Application

In the preceding image you can see I entered Authorized JavaScript origins to Google and Authorized redirect URIs to https://localhost:44300/signin-google and click on the Create button.

After clicking the create button it generates the OAuth Client ID and Client Secret key for use in our application. Note the client ID and secret key and click OK.



Figure 25:Client ID

Next, click on the left side tab APIs.



Figure 26: Click on left side tab APIs.

In the preceding screen you can see various Google provided APIs. Select Google+ APIs. You will see the screen as in the following:



Figure 27: Google+ APIs

Click on Explore. That API link is just below the Enable API button.



Figure 28: Explore this API

Now turn ON or enable OAuth 2.0 authorize requests.



Figure 29: Turn ON

Select OAuth 2.0 scopes, Click on Authorize.



Figure 30: OAuth 2.0 scopes



Figure 31: Authorize

Now the last step is to configure the project for OAuth logins. Use that Client ID and Client Secret key to create our MVC application.

Open the Startup.Auth.cs file.



Figure 32: Startup.Auth.cs

Uncomment the commented code as in the preceding image in the box with the Red color. Copy and paste the Client ID and Client Secret.



Figure 33:Client Secret

Now our application is ready for Open Authentication. Save the change then press F5 or click the Run button.



Figure 34: Open Authentication

Next, click on the Log In link. You will see as in the following screen in the Red box, there is another option to display like "Use another service to login" Google.



Figure 35:Click on Log in Link

Here we enable the Open Authentication for our MVC 5 application. Click on the Google button and it will redirect to your Google log in page. See the following screen.



Figure 36:Google Log in

After login, it will ask for permission with our product name CSharpCorner. Click Accept.



Figure 37: Click Accept

After clicking the Accept button it will redirect to our application.



Figure 38: After clicking Accept

You can see on the screen the Associate Form with the message "You've successfully authenticated with Google. Please enter a user name for this site below and click the Register button to finish logging in." Now here your Google Account is registered. Click on the Register button.



Figure 39: Associate Form

Congratulations, you have successfully logged in with your Google Account in your new MVC 5 Application.

Summary

I hope that beginners as well as students understand the concept of OAuth 2.0 and how to configure it in MVC 5 application. If you have any suggestion regarding this articles then please contact me. Thanks for reading. Learn it! Share it!