Login with Gmail Account in ASPNet

In this article I will explain with an example, how to login with Gmail Account in ASP.Net using C# and VB.Net.

This article makes use of ASPSnippets.GoogleAPI.

Download ASPSnippets Google API Library

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

Note: You will need to add the reference of ASPSnippets.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

HTML Markup

Following HTML Markup consists of:

Button – For authenticate the user through Google.

The Button has been assigned with an OnClick event handler.

Panel – For displaying the Google Profile details.

The Panel contains Image and Labels.

Image – For displaying Profile picture.

Labels – For displaying Google Profile ID, Name, Email and Email Verification status.

<asp:Button ID="btnLogin" Text="Login" runat="server" OnClick="Login" />

<asp:Panel ID="pnlProfile" runat="server" Visible="false">

<hr />

<table>

<tr>

<asp:Image ID="imgProfile" runat="server" Width="50" Height="50" />

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Email: <asp:Label ID="lblEmail" runat="server" Text=""></asp:Label></td>

</tr>

<tr>

<td>Verified Email: <asp:Label ID="lblVerified" runat="server" Text=""></asp:Label></td>

</tr>

</table>

</asp:Panel>

Namespaces

You will need to import the following namespaces.

using ASPSnippets.GoogleAPI;

using System.Web.Script.Serialization;

VB.Net

Imports ASPSnippets.GoogleAPI

Imports System.Web.Script.Serialization

Property Class

JSON

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

Class

The following class will be used to hold Google details.

public class GoogleProfile

{

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; }

}

VB.Net

Public Class GoogleProfile

Public Property Id() As String

Public Property Name() As String

Public Property Picture() As String

Public Property Email() As String

Public Property Verified_Email() As String

End Class

Authenticating user using Google account

When the Login button is clicked, page will be redirected to Google for inputting user details for authentication using the Authorize method of GoogleConnect class.

Then, request is sent to get access to the Profile and Email details of the user by passing the profile and email scopes to Authorize method respectively and finally, sent back to the URL set as the RedirectUri.

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.

protected void Login(object sender, EventArgs e)

{

GoogleConnect.Authorize("profile", "email");

}

VB.Net

Protected Sub Login(sender As Object, e As EventArgs)

GoogleConnect.Authorize("profile", "email")

End Sub

Fetching the User’s Google Plus Profile details

Inside the Page Load event handler, the ClientId, ClientSecret and the RedirectUri properties are set.

Then, inside the Not IsPostBack condition, a check is performed to the Code returned from Google, 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 GoogleProfile class object using the Deserialize method of JavaScriptSerializer class and set in the respective controls.

protected void Page_Load(object sender, EventArgs e)

{

GoogleConnect.ClientId = "<Google Client ID>";

GoogleConnect.ClientSecret = "<Google Client Secret>";

GoogleConnect.RedirectUri = Request.Url.AbsoluteUri.Split('?')[0];

if (!this.IsPostBack)

{

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

if (!string.IsNullOrEmpty(code))

{

GoogleConnect connect = new GoogleConnect();

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

GoogleProfile profile = new JavaScriptSerializer().Deserialize<GoogleProfile>(json);

lblId.Text = profile.Id;

lblName.Text = profile.Name;

lblEmail.Text = profile.Email;

lblVerified.Text = profile.Verified_Email;

imgProfile.ImageUrl = profile.Picture;

pnlProfile.Visible = true;

btnLogin.Enabled = false;

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

GoogleConnect.ClientId = "<Google Client ID>"

GoogleConnect.ClientSecret = "<Google Client Secret>"

GoogleConnect.RedirectUri = Request.Url.AbsoluteUri.Split("?"c)(0)

If Not Me.IsPostBack Then

Dim code As String = Request.QueryString("code")

If Not String.IsNullOrEmpty(code) Then

Dim connect As GoogleConnect = New GoogleConnect()

Dim json As String = connect.Fetch("me", code)

Dim profile As GoogleProfile = New JavaScriptSerializer().Deserialize(Of GoogleProfile)(json)

lblId.Text = profile.Id

lblName.Text = profile.Name

lblEmail.Text = profile.Email

lblVerified.Text = profile.Verified_Email

imgProfile.ImageUrl = profile.Picture

pnlProfile.Visible = True

btnLogin.Enabled = False

End If

End Sub

Errors

Following are some errors that you might encounter when using the ASPSnippets.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