Step By Step ASP.NET Identity with Google OAuth

Introduction

In this article, we are going to Integrate Google OAuth with MVC 5 in step by step way.

The process of each OAuth provider is different as we saw on Facebook, the Facebook provide appId and appSecret and in same way Google provide ClientId and ClientSecret but the way you need to register you application for using this services are totally different from each other, In this fast growing world most of application requires this kind of Authentication technology.

Let's start OAuth Integration with Google in step by step process.

Configuration Used

  1. Visual studio 2015
  2. SQL Server 2008 R2

Database part

We are going to create Database with Name "MVC5DEMODB" in SQL Server 2008 R2

Create New Asp.Net MVC Application

From Visual studio 2015 IDE Start page click on "New Project" link.

After clicking on "New Project" link a new dialog will pop up.

In that we are going to select web templates from left pane after selecting web template, we find only one project template in it "ASP.NET Web Application" just select that.

After selecting this project template next we are going to name the project as "MVC5DEMO2" and clicking on the OK button a new dialog will pop up with Name "New ASP.NET Project" for selecting project Templates.

In this dialog, we are going to choose MVC project template and then we are going to choose Authentication type for doing that just click on Change Authentication button, a new dialog will pop up with name "Change Authentication" here we are going to choose Individual User Accounts .

Note: - Individual User Accounts

If you choose this option for Authentication of application then your application will be configured to use ASP.NET identity [ASP.NET Membership] where User register in the application and then sign in using credentials and also User sign in via social accounts such as Facebook, Twitter, Google, Microsoft and other providers. All user data will be stored in SQL server database.

After selecting Authentication type as Individual User Accounts click on OK Button.

It will show a progress bar while it is creating a project.

After creating a project it will show Readme HTML page with use links on that page.

And in the right part, you will see newly created project structure.

As we have chosen Individual User Accounts Authentication type we got ready made Membership Model added in Models folder as shown below.

Project structure

Complete Project structure after creating new project.

Models Folder View

After creating project successfully now let's add connection string to project.

Adding Connection String in Web.config file

<connectionStrings>
    <add name="DefaultConnection"
       connectionString="Data Source=sai-pc;Database=MVC5DEMODB;UID=sa;Password=Pass$123"
      providerName="System.Data.SqlClient" />
  </connectionStrings>

After adding Connection string next step just save current project and RUN.

Homepage View in browser after running application

After homepage appears just click on Register link, then Register page will appear.

After Register page appear enter details required for registration.

After filling data just click on Register button meanwhile Microsoft.AspNet.Identity will generate tables in the database as shown below.

Database View after registering User

Along with this, it will also save data in these tables.

Just have a look on below snapshot it is data which we have filled while we have registered in the application.

If you look out properly you will as see other tables in the database which stored data related to Role and Role.

Tables and its Details

AspNetRoles : - which stored data related to Role.

AspNetUserRoles: - which stored data related to Role assigns to User.

AspNetUsers: - which stored data related to User.

AspNetUserLogins: - which stored data related to Login Provider [Google, Facebook, Twitter] [ProviderKey, UserId].

After Completing with Database part let's move back to Application part.

Now you are logged into the application if you want you can log out and retry to log in.

It is the traditional way to doing it.

Now let move toward Implementing External Authentication provider like Google.

Implementing External Authentication provider Google

In this part of the implementation, we do not require to do any coding part it's all about configuration.

All configuration starts with Startup.Auth.cs

Startup.Auth file in Asp.Net MVC

This Class (Startup.Auth.cs) file is created by default when we create application and it is located inside App_Start as shown below

Now let's take a view on Startup.Auth.cs file and see what it contains.

The Startup.Auth.cs file contains all OAuth Clients comment by default. We are going to implement an example of OAuth with Google for that we need to uncomment Google client first.

Now you can run the application but it will throw an error because we have not provided ( ClientID: "", ClientSecret: "" ) for this we first need to Register Application with Google.

Register Application with Google

In this part we are going to register our application with Google but for doing this process we need to have account on Google if it is not there then we need to create account for this demo, if you already have Google than that good you are ready to take ride just login into your Google account past given URL: - https://console.developers.google.com/projectselector/apis/credentials , below view, must appear after pasting URL.

After view appears just click on Create a Project button after that a new dialog will pop up with name New Project and it will ask for Project name as shown below.

After that we are going to enter project name as "MVC5DEMOGOOGLE" and click on create a button I will take few seconds and will show you Credentials screen.

On Credentials screen, there is Create credentials drop-down list from that we are going to select OAuth client ID.

After choosing OAuth client ID a new screen will appear with warning "you must first set a product name on the consent tab" with button "Configure consent screen" just click on that button.

It will take you to "OAuth consent screen" as shown below.

In next step we are going to just enter [Product name to show to users] enter "MVC5DEMOGOOGLE" and click on save button.

It will again take you back to Credentials tab here we are again going to select OAuth client ID.

After again choosing OAuth client ID option will take you to Create ClientID screen as shown below.

Next part is to choose Application type here we are going to choose "Web application" then again it will ask for Name Enter name as you want I am going to name it as "MVC5Demo" and then at the bottom you can see Authorized redirect URIs here we need to enter URI of our application.

To see URI just right click on the MVC5DEMO2 project then select properties from the list which is at the bottom. In that, we are next going to choose Web tab in web tab you can see project URI: - http://localhost:2625/ .

Just copy URL and paste it in Authorized redirect URIs textbox and along with that at end or URI just add [signin-google]

URI :- http://localhost:2625/signin-google

After pasting URL just click on Create button, a new alert will pop up with Name "OAuth Client" it contains ClientID and Client secret which we want to use for OAuth Google integration.

Just copy and paste ClientID and Client secret to Startup.Auth.cs class as shown below.

Then Save your application and run.

Below Login screen will appear with Google button.

After clicking on Google button if it is not Logging in then we do not have permission to the Google+ API need to enable access to of Google+ API to MVC5Demo Project which we have created.

Enabling Permission of Google+ API

For doing that enter above URL in browser

URL: - https://console.developers.google.com/projectselector/apis/credentials

After entering this URL below view will appear with project drop-down list.

From this view, we are going to choose Project [MVC5DEMOGOOGLE] as shown below.

After selecting project just click on Enable API button [+Enable API], it will take you to Library View as shown below.

Next step in search textbox enter "Google+ API".

Select Google+ API link below screen will appear with Enable button just click on it to enable button.

After enabling Google+ API the below view must appear.

Now let's go back to login page now and check.

After clicking on Google button it will take you to Google Login page and ask you to enter credentials for Sign in.

After entering credentials and clicked on Sign in button.

Now just click on Allow button [Button in blue color] to proceed further

After clicking on Allow button it will redirect to ExternalLoginCallback view and on that view it will show your Email ID of Google from which we have logged in, and then finally click on register button.

Along with that, it shows 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."

After clicking on Register button it will register you and along with that it also login into the application as shown below.

Now let's look at database tables what kind of data is been stored there after this process.

AspNetUserLogins table

This table store data related to LoginProvider.

As you can see it is storing data of Google login.

AspNetUsers table

This table store data related to all Users from Oauth login as well as from Traditional.

If it contains PasswordHash then it is registered by Traditional Login and if it is PasswordHash is empty then it is done by OAuth login.

Finally, we completed understanding what OAuth is and how to use with asp.net MVC 5 applications and also had an example of OAuth integration with Google.

+91-22-66752917
+91 9967590707
questpond@questpond.com / questpond@yahoo.com