"> ورود به سایت با استفاده از اکانت گوگل در ASP.Net

ورود به سایت با استفاده از اکانت گوگل در ASP.Net

اکانت گوگل در ASP.Net

در این مقاله آموزش می دهیم که چگونه با استفاده از C# ، VB و ASPSnippets.GoogleAPI از طریق اکانت گوگل در ASP.Net وارد وب سایت شویم.سورس پروژه به همراه توضیحات کامل در ادمه ی مطلب برایتان در ادامه ی مطلب قرار داده شده است … با من همراه باشید …

اکانت گوگل در ASP.Net

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

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

توضیح بخش HTML:

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

همچنین این پنل، شامل یک Button پاک کردن Session جاری و توکن دسترسی به API اکانت گوگل پلاس می باشد.

<asp:Button ID="btnLogin" Text="ورود" 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="پاک کردن" runat="server" OnClick = "Clear" />
        </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

اکانت گوگل در ASP.Net

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

کد زیر، کد دسترسی یا همان توکن دسترسی را در 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

اکانت گوگل در ASP.Netپاک کردن توکن جاری:

متد 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 (کلاینت نامعتبر)

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

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

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

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

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

موفق باشید!

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    صالحی پاسخ

    سلام
    لینک کار نمی کنه!
    چرا لینک اغلب مطالب از کار افتاده؟

      مسعود شریفی پاسخ

      انجام شد جناب صالحی ، بی تجربگی یکی از هاستینگ ها بود که بلافاصله منتقل کردیم.مشکل اختلال کاملا رفع شده است.و در حال تست در برخی فایل ها هستیم.

    mahnaaz.yazdi@gmail.com پاسخ

    سلام.ممنون بابت راهنمایی خوبتون.آیا امکان داره روش ورود به سایت با FaceBook را هم آموزش بدید.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم