ASPNet Core Login with Google

In this article I will explain with an example, how to login with Google in ASP.Net Core MVC.

In this article, ASPSnippets.Core.GoogleAPI library will be used for login with Google in ASP.Net Core MVC.

Note: For beginners in ASP.Net Core MVC, please refer my article ASP.Net MVC Core Hello World Tutorial with Sample Program example.

Download ASPSnippets.Core.GoogleAPI Library

You can download the latest ASPSnippets.Core.GoogleAPI.dll from the following link.

Download DLL file

Note: You will need to add the reference of ASPSnippets.Core.GoogleAPI DLL in your project.

Getting Google API Client ID and Client Secret

In order to use Google Account API for login, you will need to create an Application in Google Console and get Client ID and Client Secret. For more details please refer the following article.

Google Developer Console: Generate Client ID and Client Secret for use with Google APIs

Model

JSON

Following is the JSON returned from Google API, it consists of some additional information which are not covered in this article and you can easily extend your Model class as per your requirement.

Model

The following Model class will be used to hold Google details.

public class GoogleProfileModel

{

public string Id { get; set; }

public string Name { get; set; }

public string Picture { get; set; }

public string Email { get; set; }

public string Verified_Email { get; set; }

public bool IsDisable { get; set; }

}

Namespaces

You will need to import the following namespaces.

using Newtonsoft.Json;

using ASPSnippets.Core.GoogleAPI;

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this action method, the ClientId, ClientSecret and the RedirectUri properties are set and an instance of GoogleProfileModel class is created.

Then, a check is performed to the Code returned from Google, if Code is not available then user needs to first click the Login Button and get authorization.

If the Code is available, then using the Code, user’s Google profile details such as Google Profile ID, Name, Picture, Email and Verified Email status are fetched using the Fetch method of the GoogleConnect class.

Finally, the returned JSON string is deserialized to the GoogleProfileModel class object using the DeserializeObject method of JsonConvert class and returned to the View.

Action method for handling Login POST operation

This action method gets called when Login button is clicked.

Inside this Action method, an authorization URL is generated by passing the profile and email scopes to Authorize method and the user is redirected to the Authorization page.

Once, the user provides access, a Token is generated and the User is redirected back to the Controller.

Note: You need to set valid Redirect Uri in the Google Console App otherwise you will get redirect mismatch error discussed later in the article.

public class HomeController : Controller

{

public IActionResult Index()

{

GoogleConnect.ClientId = "<ClientId>";

GoogleConnect.ClientSecret = "<ClientSecret>";

GoogleConnect.RedirectUri = string.Format("{0}://{1}/{2}", Request.Scheme, Request.Host, "Home/Index/");

GoogleProfileModel profile = new GoogleProfileModel();

string code = Request.Query["code"];

if (!string.IsNullOrEmpty(code))

{

GoogleConnect connect = new GoogleConnect();

string json = connect.Fetch("me", code);

profile = JsonConvert.DeserializeObject<GoogleProfileModel>(json);

profile.IsDisable = true;

}

return View(profile);

}

[HttpPost]

public RedirectResult Login()

{

string url = GoogleConnect.Authorize("profile", "email");

return Redirect(url);

}

View

Inside the View, in the very first line the GoogleProfileModel class is declared as Model for the View and ASP.Net TagHelpers is inherited.

The View consists of an HTML Form which has been created using the following TagHelpers attributes.

asp-action – Name of the Action. In this case the name is Login.

asp-controller – Name of the Controller. In this case the name is Home.

method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.

The following Form consists of:

Button – For allowing user login with Google Account.

Image – For displaying Google Profile picture.

SPAN – For displaying the user’s Google Profile ID, Name Email and Email Verification status.

Submitting the Form

When the Button is clicked, the form is submitted to the Controller’s Login Action Method.

@model Google_Login_Core_MVC.Models.GoogleProfileModel

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Index</title>

</head>

<body>

<form method="post" asp-controller="Home" asp-action="Login">

@if (!string.IsNullOrEmpty(Model.Id))

{

<hr />

<table>

<tr>

</td>

</tr>

<tr><td>ID:<span>@Model.Id</span></td></tr>

<tr><td>Name:<span>@Model.Name</span></td></tr>

<tr><td>Email:<span>@Model.Email</span></td></tr>

<tr><td>Verified Email:<span>@Model.Verified_Email</span></td></tr>

</table>

}

</form>

</body>

</html>

Errors

Following are some errors that you might encounter when using the ASPSnippets.Core.GoogleAPI in your projects.

1. invalid_client

The cause of this error is directly related to the Client ID and Client Secret and hence you need to make sure that you have supplied a valid Client ID and Client Secret.

2. invalid_request

This error will occur when the Client ID and/or Client Secret is blank or not supplied.

3. redirect_uri_mismatch

The above error will occur when the RedirectUri set in the code is not matching with the RedirectUri set while configuring the application in Google Developer Console.

For more details on setting RedirectUri, please refer Google Developer Console: Generate Client ID and Client Secret for use with Google APIs.

4. deleted_client