ASP.NET MVC 5 Authentication Using Google+ Account

In previous two tutorials, I have discussed how to create an application in ASP.NET MVC 5 that enables a user to login using Microsoft account and Twitter account. And now, in this tutorial, I will show you how to create an ASP.NET MVC 5 Application that enables a user to log in using OAuth 2.0 with some credentials from google account.

• ASP.NET MVC Authentication using Microsoft Account
• ASP.NET MVC Authentication using twitter Account
• ASP.NET MVC Authentication using google Two factor Authenticator

In this ASP.NET MVC Authentication tutorial, first of all, I will create a new project with MVC template, then create an account in Google, and then create a new app in google account, and then get Client Id and Client Secret from the app, and then put it in our application’s Startup.Auth.cs file and then just simply run.

How to Enable ASP.NET MVC 5 Authentication Using Google+ Account?

This is very simple and easy, just follow the following steps, and get to know how to implement External Authentication provider like google.

Step # 1 – Create a new project.

I will implement it in a project that I have already created in previous tutorial. If you don’t know how to create a new project then just click here to go previous tutorial and get to know how to create a new project.

Step # 2 – Open Startup.Auth.cs File.

All of the information about user Authentication Provider for your project are stored in Startup.Auth.cs file. Just go to Solution Explorer => click on App Start folder => double click on “Startup.Auth.cs” file.

Step # 3 – Enable Google Account Login.

Just go to under ConfigureAuth method and locate the below line and just uncomment it with (Ctrl + K, U).

“app.UseGoogleAuthentication”

At this time you will see there is no value of Client Id and Client Secret.

Step # 4 – Get ASP.NET MVC 5 Web application URL

Go to solution explorer => right click on project name => then choose properties (It will show a new page) => Choose the web from the left pane of the page => Copy the project URL (E.g. http://localhost:49419/ ) from the project URL field.

Step # 5 – Create a new Application on Google+ Account

Go to this Link (https://console.developers.google.com ) and logged in with your google account. Then click on dropdown menu and select Create project as in screenshot. Then it will show a new popup.

Then enter name of your project and then click on Create link. It will show an API Manage page.

Then click on library from the left pane, and then click on “Google+ API” link under the Social APIs.

Then it will show a new page. Just Enable Google+ API. After enabling, it will show a new page “About this API”.

Then select “Credentials” link from the left pane, and then you will see a new page of “Add Credentials to your project”. Then choose Google+ API from dropdown menu under the “which API are you using?” label, and then choose Web browser (Javascript) from the dropdown under the “where will you be calling the API from?” label, and then choose the option what you want under the “what data will you be accessing?” label, and then just click on “What Credential do I need?” button.

Then enter name in the name field and then enter the URL (E.g. http://localhost:49419) of your project under the “Authorize Javascript Origins” label. Then enter the URL of your project append with signin-google (E.g. http://localhost:49419/signin-google) under the “Authorize redirects URLs” label. And then just click on the “Create Client ID” button.

Then you will see a new block with the name of “Set up the OAuth 2.0 Client ID”. Just choose your email address from the dropdown menu under the “Email Address” label. Then enter the name of product under the “product name shown to user” label and then if you want to more customization the just click on “More customization option” link. Then just click on Continue button.

Then you will see a new block with the name of “Download Credentials”. If you want to download, then just click on download option otherwise click on “Done” button

Step # 6 – Get Client Id and Client Secret

Just click on “Credentials” from left pane and the click on API that you have created. After clicking it will show a new page with client Id and Client Secret. Just copy Client Id and Client Secret from there.

Step # 8 – Add Client Id and Client Secret into your project

Then go to Startup.Auth.cs file and paste client Id and Client secret under the app.UseGoogleAuthentication method just as in below screenshot.

Step # 9 – Run your application

Now run your application. Go to the login page, and then press the Google button from right side of your page.

Then you will see a page that is asking permission from user. Then just click on the “Allow” button.

Then it will show you a new page that will say you “You’ve successfully authenticated with Google” and then will ask you “Please enter a username for this site below and click the register button to finish logging”.

Just enter your email in the email field and then click on register button.

And then finally you will see you are logged in with your Microsoft account.

Summary

Congratulation! you have successfully authentication in ASP.NET MVC 5 App using Google+ account. I hope it will be helpful. Please like and share!