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.

Step 3: Select the 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.

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.

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.

After clicking on Yes:

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.

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

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

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.

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

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

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.