In this article I will explain with an example, how to login with Google Plus Account API in ASP.Net Website using C# and VB.Net by making use of the free ASPSnippets.GoogleAPI.
After the account is verified, the user’s Google Plus Profile details such as Google Plus Profile ID, Google Plus Profile Image, Name and Email Address 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>
            Verified Email:
            <asp:Label ID="lblVerified" 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 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
 
 
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 and Email Address.
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 Google Account API in ASP.Net and get Google Plus Profile details
 
 
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 and Email Address 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 (!this.IsPostBack)
    {
        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.Name;
            lblEmail.Text = profile.Email;
            lblVerified.Text = profile.Verified_Email;
            ProfileImage.ImageUrl = profile.Picture;
            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 IsPostBack Then
        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.Name
            lblEmail.Text = profile.Email
            lblVerified.Text = profile.verified_Email
            ProfileImage.ImageUrl = profile.Picture
            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 If
End Sub
 
Login with Google Account API in ASP.Net and get Google Plus Profile details
 
 
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 Google Account API in ASP.Net and get Google Plus Profile details
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 Google Account API in ASP.Net and get Google Plus Profile details
This error will occur when the Client ID and/or Client Secret is blank or not supplied.
 
3. redirect_uri_mismatch
Login with Google Account API in ASP.Net and get Google Plus Profile details
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.
 
 
Demo
 
 
Downloads