In this article I will explain with an example, how to implement
Google authentication 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.
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="btnLog in" 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="imgProfile" 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>
</table>
</asp:Panel>
Namespaces
You will need to import the following namespaces.
C#
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.
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
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.
C#
protected void Login(object sender, EventArgs e)
{
GoogleConnect.Authorize("profile", "email");
}
VB.Net
Protected Sub Log in(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.
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)
{
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 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.
4. deleted_client
The above error will occur when the Client ID is deleted from Google Developer Console.
Screenshot
Demo
Downloads