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:
- Creating MVC 5 Application
- Setting up SSL in the Project.
- 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!