احراز هویت از طریق Google Plus در ASP.Net

در این مقاله با هم خواهیم آموخت که چگونه احراز هویت از طریق Google Plus را با استفاده از Google Account API و زبان های C# و VB.Net پیاده سازی کنیم. همانطور که قطعا میدانید احراز هویت در پروژه به معنای تایید وجود داشتن یک کاربر و امکان ورود آن کاربر به برنامه یا سایت را برقرار میکند. اینبار به سراغ انجام این کار با اکانت Google Plus رفته ایم. با من همراه باشید …

Google Plus

دریافت Google Client ID و Client Secret:

برای استفاده از Google Account API برای ورود به سایت، باید یک اپلیکیشن در Google Console ایجاد کرده و Client ID و Client Secret دریافت نماییم.

بخش HTML:

در صفحه ورود، یک Button داریم که امکان ورود به سایت از طریق Google Account API را به کاربر می دهد، یک پنل با چند Lable و کنترل Image نیز برای نمایش جزییات پروفایل گوگل پلاس کاربر داریم.

همچنین پنل شامل Buttonای برای پاک کردن Session جاری و توکن دسترسی (Access token) مربوط به Google Plus Account API می باشد.

<asp:ButtonID="btnLogin"Text="ورودبهسایت"runat="server"OnClick="Login"/>
<asp:PanelID="pnlProfile"runat="server"Visible="false"Direction="RightToLeft">
<hr/>
<tablestyle="width: 416px">
<tr>
<tdclass="auto-style11">
                        ID:
</td>
<tdclass="auto-style13">
<asp:LabelID="lblId"runat="server"></asp:Label>
</td>
<tdclass="auto-style9"rowspan="5">
<asp:ImageID="ProfileImage"runat="server"Height="50"Width="50"/>
</td>
</tr>
<tr>
<tdclass="auto-style12">
نام:
</td>
<tdclass="auto-style13">
<asp:LabelID="lblName"runat="server"Text=""></asp:Label>
</td>
</tr>
<tr>
<tdclass="auto-style5">
آدرسایمیل:
</td>
<tdclass="auto-style6"colspan="1">
<asp:LabelID="lblEmail"runat="server"Text=""></asp:Label>
</td>
</tr>
<tr>
<tdclass="auto-style12">
جنسیت:
</td>
<tdclass="auto-style13">
<asp:LabelID="lblGender"runat="server"></asp:Label>
</td>
</tr>
<tr>
<tdclass="auto-style11">
نوع:
</td>
<tdclass="auto-style10">
<asp:LabelID="lblType"runat="server"></asp:Label>
</td>
</tr>
<tr>
<tdclass="auto-style12"colspan="2">
</td>
<td>
<asp:ButtonID="Button2"runat="server"OnClick="Clear"Text="پاککردن"/>
</td>
</tr>
</table>
</asp:Panel>

فضاهای نام:

فضاهای نام زیر باید به پروژه اضافه شوند.

در C#:

using ASPSnippets.GoogleAPI;
using System.Web.Script.Serialization;

در VB.Net:

Imports ASPSnippets.GoogleAPI
Imports System.Web.Script.Serialization

توجه داشته باشید که باید فایل dll مربوط به ASPSnippets.GoogleAPI را باید به فولدر bin اضافه کرده و refrence آن را نیز به پروژه اضافه کنیم.

کلاس های داده:

برای نگه داری جزییات پروفایل کاربران که توسط Google API برگردانده می شود، باید کلاس های زیر را ایجاد کنیم. ساختار این کلاس ها دقیقا شبیه به رشته Json ای است که از Google API برگردانده می شود، بنابراین رشته json به سادگی به اشیای متناظر خود تبدیل (deserialize) می شود.

نکته: رشته json برگردانده شده شامل یک سری اطلاعات اضافی است که در این مقاله بحث نمی شود، اما می توانید با گسترش کلاس خود به سادگی این اطلاعات را نیز واکشی کنید.

کد 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

احراز هویت کاربر از طریق اکانت گوگل:

با کلیک روی دکمه “ورود”، کاربر به صفحه مجوزهای دسترسی گوگل (Google Authorization) هدایت می شود که کاربر امکان دسترسی اپلیکیشن به جزییات اکانت گوگل خود مانند ID پروفایل گوگل پلاس، تصویر پروفایل گوگل پلاس، نام، آدرس ایمیل و جنسیت خود را می دهد.

در این مثال، ما درخواست دسترسی به جزییات پروفایل و آدرس ایمیل کاربر را به ترتیب با ارسال پارامترهای profile و email داریم. کاربر می تواند اجازه دسترسی بدهد و یا آن را رد کند که در هر دو مورد، کاربر به صفحه ای برگردانده می شود که در زمان ساخت اپلیکیشن در Google Developer Console به عنوان RedirectUri تنظیم شده است.

کد 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

واکشی جزییات پروفایل گوگل پلاس کاربر:

کد زیر، کد دسترسی یا همان توکن دسترسی را در Query String چک می کند و سپس با استفاده از این کد جزییات پروفایل گوگل پلاس کاربر مانند ID، تصویر، نام، آدرس ایمیل و جنسیت آن به صورت یک رشته Json از گوگل واکشی می شود.

سپس رشته json به اشیای کلاس GoogleProfile تبدیل (deserialize) می شود و جزییات در صفحه نمایش داده می شوند.

کد 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

پاک کردن توکن جاری:

متد Clear() در کلاس GoogleConnect توکن دسترسی جاری را پاک می کند. بنابراین زمانی که کاربری از وب سایت خارج می شود، این متد باید Session جاری را پاک کند.

کد C#:

protected void Clear(object sender, EventArgs e)
{
    GoogleConnect.Clear();
}

کد VB.Net:

Protected Sub Clear(sender As Object, e As EventArgs)
    GoogleConnect.Clear()
End Sub

خطاهای احتمالی:

لیست خطاهای احتمالی که ممکن است به دلیل استفاده از ASPSnippets.GoogleAPI در پروژه خود با آن مواجه شوید، در زیر آمده است:

Invalid_client (کلاینت نامعتبر)

دلیل این خطا مستقیما به Client ID و Client Secret مربوط می شود، بنابراین مطمئن شوید که Client ID و Client Secret معتبری تهیه کرده باشید.

Invalid_request (درخواست نامعتبر)

این خطا زمانی اتفاق می افتد که Client ID یا Client Secret و یا هر دو خالی باشند و یا تهیه نشده باشند.

Redirect_uri_mismatch (آدرس redirect اشتباه)

این خطا زمانی اتفاق می افتد که آدرس RedirectUri تنظیم شده در کد با آدرس RedirectUri داده شده در زمان تنظیم اپلیکیشن در Google Developer Console یکی نباشند.