در این مقاله با هم خواهیم آموخت که چگونه احراز هویت از طریق 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 یکی نباشند.
هیچ دیدگاهی نوشته نشده است.