In this article I will explain with an example, how to login with Gmail Account in ASP.Net Website using C# and VB.Net using the free ASPSnippets.GoogleAPI.
ASPSnippets.GoogleAPI provides interface to make use login into a website using its Gmail account details and once the account is verified, the user’s Google Plus Profile details such as Google Plus Profile ID, Google Plus Profile Image, Name, Email Address and Gender are fetched and displayed in the website.
 
Getting Google 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 details please refer the following article.
 
 
HTML Markup
HTML Markup consists of a Button to allow user login with Google Account API, a Panel with some Labels and Image control to display the user’s Google Plus Profile details.
The Panel also contains a Button for clearing the current session and access token of the Google Plus Account API.
<asp:Button ID="btnLogin" Text="Login" runat="server" OnClick="Login" />
<asp:Panel ID="pnlProfile" runat="server" Visible="false">
<hr />
<table>
    <tr>
        <td rowspan="6" valign="top">
            <asp:Image ID="ProfileImage" runat="server" Width="50" Height="50" />
        </td>
    </tr>
    <tr>
        <td>
            ID:
            <asp:Label ID="lblId" runat="server" Text=""></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            Name:
            <asp:Label ID="lblName" runat="server" Text=""></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            Email:
            <asp:Label ID="lblEmail" runat="server" Text=""></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            Gender:
            <asp:Label ID="lblGender" runat="server" Text=""></asp:Label>
        </td>
    </tr>
    <tr>
        <td>
            Type:
            <asp:Label ID="lblType" runat="server" Text=""></asp:Label>
        </td>
    </tr>
        <tr>
        <td>
            <asp:Button Text="Clear" runat="server" OnClick = "Clear" />
        </td>
    </tr>
</table>
</asp:Panel>
 
 
Namespaces
You will need to import the following namespaces.
Note: You will need place the ASPSnippets.GoogleAPI DLL inside the BIN folder of your project and add its reference.
C#
using ASPSnippets.GoogleAPI;
using System.Web.Script.Serialization;
 
VB.Net
Imports ASPSnippets.GoogleAPI
Imports System.Web.Script.Serialization
 
 
Data Class
You will need to create the following class which will be used to hold the User Profile details returned from Google API after authentication.
The structure of this class is same as that of the JSON string returned from the Google API so that the JSON string can be easily deserialized to its object.
Note: The returned JSON string consists of some additional information which is not covered in this article, you can easily extend your class to fetch the additional information.
C#
public class GoogleProfile
{
    public string Id { get; set; }
    public string DisplayName { get; set; }
    public Image Image { get; set; }
    public List<Email> Emails { get; set; }
    public string Gender { get; set; }
    public string ObjectType { get; set; }
}
 
public class Email
{
    public string Value { get; set; }
    public string Type { get; set; }
}
 
public class Image
{
    public string Url { get; set; }
}
 
VB.Net
Public Class GoogleProfile
    Public Property Id() As String
        Get
            Return m_Id
        End Get
        Set(value As String)
            m_Id = value
        End Set
    End Property
    Private m_Id As String
    Public Property DisplayName() As String
        Get
            Return m_DisplayName
        End Get
        Set(value As String)
            m_DisplayName = value
        End Set
    End Property
    Private m_DisplayName As String
    Public Property Image() As Image
        Get
            Return m_Image
        End Get
        Set(value As Image)
            m_Image = value
        End Set
    End Property
    Private m_Image As Image
    Public Property Emails() As List(Of Email)
        Get
            Return m_Emails
        End Get
        Set(value As List(Of Email))
            m_Emails = value
        End Set
    End Property
    Private m_Emails As List(Of Email)
    Public Property Gender() As String
        Get
            Return m_Gender
        End Get
        Set(value As String)
            m_Gender = value
        End Set
    End Property
    Private m_Gender As String
    Public Property ObjectType() As String
        Get
            Return m_ObjectType
        End Get
        Set(value As String)
            m_ObjectType = value
        End Set
    End Property
    Private m_ObjectType As String
End Class
 
Public Class Email
    Public Property Value() As String
        Get
            Return m_Value
        End Get
        Set(value As String)
            m_Value = value
        End Set
    End Property
    Private m_Value As String
    Public Property Type() As String
        Get
            Return m_Type
        End Get
        Set(value As String)
            m_Type = value
        End Set
    End Property
    Private m_Type As String
End Class
 
Public Class Image
    Public Property Url() As String
        Get
            Return m_Url
        End Get
        Set(value As String)
            m_Url = value
        End Set
    End Property
    Private m_Url As String
End Class
 
 
Authenticate user using Google account
On the click of the Login button, User is redirected to the Google Authorization page where user has to provide permission to the Application to access his Google account details such as Google Plus Profile ID, Google Plus Profile Image, Name, Email Address and Gender.
For this article I am requesting access to the Profile and Email details of the user by passing the profile and email scopes respectively. User can allow and deny and in both cases he is sent back to the URL set as the RedirectUri while creating the application in Google Developer Console.
C#
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
 
Login with Gmail Account API in ASP.Net
 
 
Fetching the User’s Google Plus Profile details
The below code checks for access code (access token) in Query string and then using this access code,  the user’s  Google Plus profile details such as Google Plus Profile ID, Image, Name, Email Address and Gender are fetched as JSON string from Google.
The JSON string is then deserialized to the GoogleProfile class object and the details are displayed on the page.
C#
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 (!string.IsNullOrEmpty(Request.QueryString["code"]))
    {
        string code = Request.QueryString["code"];
        string json = GoogleConnect.Fetch("me", code);
        GoogleProfile profile = new JavaScriptSerializer().Deserialize<GoogleProfile>(json);
        lblId.Text = profile.Id;
        lblName.Text = profile.DisplayName;
        lblEmail.Text = profile.Emails.Find(email => email.Type == "account").Value;
        lblGender.Text = profile.Gender;
        lblType.Text = profile.ObjectType;
        ProfileImage.ImageUrl = profile.Image.Url;
        pnlProfile.Visible = true;
        btnLogin.Enabled = false;
    }
    if (Request.QueryString["error"] == "access_denied")
    {
        ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Access denied.')", true);
    }
}
 
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 String.IsNullOrEmpty(Request.QueryString("code")) Then
        Dim code As String = Request.QueryString("code")
        Dim json As String = GoogleConnect.Fetch("me", code)
        Dim profile As GoogleProfile = New JavaScriptSerializer().Deserialize(Of GoogleProfile)(json)
        lblId.Text = profile.Id
        lblName.Text = profile.DisplayName
        lblEmail.Text = profile.Emails.Find(Function(email) email.Type = "account").Value
        lblGender.Text = profile.Gender
        lblType.Text = profile.ObjectType
        ProfileImage.ImageUrl = profile.Image.Url
        pnlProfile.Visible = True
        btnLogin.Enabled = False
    End If
    If Request.QueryString("error") = "access_denied" Then
        ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('Access denied.')", True)
    End If
End Sub
 
Login with Gmail Account API in ASP.Net
 
 
Clearing the current Token
The Clear method of the GoogleConnect class clears the current access token. Thus when some user logs out of the website, this method can be used to clear his current session.
C#
protected void Clear(object sender, EventArgs e)
{
    GoogleConnect.Clear(Request.QueryString["code"]);
}
 
VB.Net
Protected Sub Clear(sender As Object, e As EventArgs)
    GoogleConnect.Clear(Request.QueryString("code"))
End Sub
 
 
Errors
Following are some errors that you might encounter when using the ASPSnippets.GoogleAPI in your projects.
1. invalid_client
Login with Gmail Account API in ASP.Net
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
Login with Gmail Account API in ASP.Net
This error will occur when the Client ID and/or Client Secret is blank or not supplied.
 
3. redirect_uri_mismatch
Login with Gmail Account API in ASP.Net
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 refer the Section 3 of my article Google Developer Console: Generate Client ID and Client Secret for use with Google APIs
 
 
Downloads