Working With Google OAuth 2.0 in Visual Studio 2013 RC

Introduction

This article will help you to authenticate an ASP.NET MVC 5 web application with the Google OAuth2.0. Now, we can also provide the client ID and client Secret of the Google application in the MVC applicaiton.

You can get the important advantages in your websites when you authenticate your websites using external authentication providers like Google and Facebook because those users can already have accounts with these providers.

Now with the update of Visual Studio 2013 RC, we can apply the Google OAuth2.0 in the ASP.NET MVC 5 Web Applications. Microsoft revealed the RC update of Visual Studio 2013. Read here. So, let's get started with the following sections:

Create MVC 5 Web application
Enable the SSL Certificate
Getting Started with Google Developer Console
Enabling Google OAuth 2.0
Login with Google

Note: Please upgrade the Visual Studio 2013 to the Release Candidate update of Visual Studio 2013.

Create MVC 5 Web Application

In this section we'll create the ASP.NET MVC 5 application using the following procedure.

Step 1: Open the Visual Studio 2013 and click on "New Project".

Step 2: Select the ASP.NET Web Application and enter the name.

Creating Web Application in VS 2013

Step 3: Select the MVC Project Template.

Creating MVC Project Template

Step 4: Please leave the Create remote resources checkbox if you do not have the Windows Azure Account.

Visual Studio 2013 automatically creates the ASP.NET MVC 5 Web Application and some files and folders in the application.

Enable the SSL Certificate

As I described in my previous article, you can eliminate the SSL Certificated related security warnings when you browse the HTTPs on the localhost. You will see in this section how to enable the SSL Certificate for the browsers like IE and Chrome.

Step 1: Select the application in the Solution Explorer and hit F4.

Step 2: Set the SSL Enabled option to true and copy the SSL URL.

Enabling SSL Certificate

Step 3: Now again select the application and right-click to open the properties.

Step 4: In the left pane select the web tab and paste the SSL URL in the Project URL and save the application.

ProjectUrl of MVC Application

Step 5: Open the HomeController.cs page and modify your code with the following highlighted code:

using System.Web.Mvc;
namespace MvcGoogleApp.Controllers
{
public class HomeController : Controller
{
[RequireHttps]
public ActionResult Index()
{
return View();
}
}
}

In the code above the [RequireHttps] attribute is added to the controller class to require that all requests must use HTTPS. If you add this to the application then it is more secure.

Step 6: Now press Ctrl+F5 to run the application.

SSL Warning dusring Mvc Application in Visual Studio

After clicking on Yes:

Security Warning in Mvc Application

Getting Started with Google Developer Console

As I described earlier, in this section we'll get started with the Google Developer Console. Proceed with the procedure given below.

Step 1: Open the Google Developer Console

Step 2: Click on the Create Project to get started.

Creating Project in Google Developer

Step 3: Enter the project name and select the agreement and click on Create.

Creating New Project in Google

Step 4: Now in the next window, select the Credentials from the Left pane and click on Create New Client ID.

Creating Client ID of Google Project

Step 5: Leave the selection and just paste the SSL URL to the Authorized JavaScript Origins and just rename the Authorize redirect URI to the following code:

https://localhost:(port number)/signin-google

Enabling Google OAuth 2.0

Step 1: Open the Startup.Auth.cs from the Solution Explorer.

Step 2: Now copy the client ID and the client Secret and paste it into the Startup.Auth.cs as in the following:

//app.UseFacebookAuthentication(
// appId: "",
// appSecret: "");
app.UseGoogleAuthentication(
clientId: "Your Client ID",
clientSecret: "Your Client Secret");
}
}
}

That's it. To use this your Visual Studio is to be updated.

Login with Google

In this section we'll login the application using the Google Provider. Use the following procedure.

Step 1: Press F5 to run the application and click on the Login option.

Step 2: Click on Google to authenticate the app.

Using Google to Login MVC Application

Step 3: Enter the Google account credentials and authenticate the app.

Authenticating App in Google

Step 4: Clicking on Accept, it'll redirect you to the Register page and enter the email to register.

Registering Email in Google Login

Now you are logged in with the Google. That's it.

Summary

This article will help you to authenticate the ASP.NET MVC 5 Web Application with the various external providers like Google. This can be done with the latest Released Candidate update of Visual Studio 2013. So, enjoy and thanks for reading the article. Stay Updated.

5 Comments

Join the conversation! Your thoughts help the community grow.

Do D12y ago
I understood my problem: In google developer Console we have to enable the google+ API also. As described in the next tutorial: http://www.asp.net/mvc/overview/security/create-an-aspnet-mvc-5-app-with-facebook-and-google-oauth2-and-openid-sign-on
- Nimit Joshi12y ago
  I am so glad you solved your problem. Thanks for reading and reply..
Do D12y ago
Note: in the stage of "Getting Started with Google Developer Console", it's important to select your email account of the project. Otherwise, I got an error in the google-side.
Do D12y ago
Great. It's seems to work. But in step 4: after redirecting back from google to my localhost site, i am getting back to the same login page and in the upper black toolbar there is the "Log In" button again, which means it's not really sign me in.
Do D12y ago
Excellent Review. I will check it in my VS. Thanks