ASP.Net ile Facebook Login

Yazar: Gökhan BAĞCI
Kategori: ASP.NET
Eklenme Tarihi: 24.9.2010 02:43:38



Gün geçtikçe üye sayısı artan facebook.com üye alt yapısını kullanarak, kendi geliştirdiğimiz web sitelerine “Login with Facebook” denilen ek üyelik sistemini entegre edilmesinden söz edeceğim.

Bu makalemde gün geçtikçe üye sayısı artan facebook.com üye alt yapısını kullanarak, kendi geliştirdiğimiz web sitelerine “Login with Facebook” denilen ek üyelik sistemini entegre edilmesinden söz edeceğim.
Öncelikle bu sistemin bize avantajı nedir? diye sorarsak kendimize, en büyük avantajı yaklaşık 400 milyondan fazla üye’nin (yaklaşık 20 milyon’u Türk kullanıcı) bizim web sitelerimizi de aynı hesaplarıyla kullanabilmelerini sağlamak diyebiliriz.

Öncelikle facebook.com üzerinde bir hesabımızın olması gerekiyor. Üye girişi yaptıktan sonra
http://developers.facebook.com/setup adresine girip sitemiz için bir uyguluma oluşturuyoruz.


Site name
: Web site adımız.
Site URL: Web sitemizin adresi. (Özellikle tam path olması isteniyor, sonunda “?” vs… gibi dinamik sayfalar kabul edilmiyor.)
Locale: Web site dilimiz.

Uygulamayı oluşturduktan sonra projemizde daha sonradan ihtiyaç duyacağımız iki değişkene sahip oluyoruz. Bunlardan bir tanesi App ID, diğeri ise App Secret değerleri.

Bu işlemleri tamamladıktan sonra facebook.com’dan veri çekebilmemiz ya da yazabilmemiz için “Graph Api” denilen bir servisi kullanıyoruz.
Bu servis ile ilgili detayları aşağıdaki linkten görebilirsiniz.
http://developers.facebook.com/docs/api

Bu ve bunun gibi(twitter.com’da yine buna benzer bir alt yapı kullanıyor) sistemleri .Net projelerimizde kolayca kullanabilmemiz için codeplex.com üzerinde açık kaynak olarak geliştirilen Hammock isimli projedeki belli classları kullanacağız.
Projeye aşağıdaki linkten erişebilirsiniz.
http://hammock.codeplex.com

Gerekli verileri ve projeleri tamamladıktan sonra her hangi ASP.Net WebSite projesi oluşturalım.

Daha önce almış olduğumuz AppID ve AppSecret değerlerini web.config dosyamıza ekleyelim.


Daha sonra indirdiğimiz Hammock.dll dosyasını projemize referans edelim.


Değişkenlerimizi ve dll dosyamızı referans edikten sonra  sitenizdeki login bölümünden graph.facebook.com adresine bir yönlendirme yapmalıyız. Bu link içerisinde bize özel olan AppID değerini ve servisten callback olacak kendi sayfamızın (daha sonra yapacağımız facebookCallback.aspx) adresini belirleyeceğiz. Gideceği sayfada kullanıcı bizim web sitemizin bilgilerine erişebilmesi için izin verdiği takdirde belirtmiş oldğumuz callback sayfamıza belli değerler ile geri dönüş yapacak.


protected
void btnFacebook_Click(object sender, EventArgs e)

{

    string FacebookAppID = ConfigurationManager.AppSettings["FacebookAppID"];

    string FacebookCallbackURL = "http://www.gokhanbagci.com/facebookCallback.aspx";

    string serviceURL = string.Format("https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}",

                                      FacebookAppID, FacebookCallbackURL);

    Response.Redirect(serviceURL);

}


Yukarıda oluşan linkten gelecek sonucu işleyebilmemiz için callback sayfası’nın page_load() eventında dönen sonuçları işleyerek kullanıcı bilgilerine erişeceğiz.

using System;

using System.Collections;

using System.Collections.Specialized;

using System.Configuration;

using System.Text.RegularExpressions;

using System.Web.Script.Serialization;

using System.Web.UI;

using Hammock;

 


protected void Page_Load(object sender, EventArgs e)

{

    //Kullanıcı izin verdiye servisten bize code isminde bir değer dönmesi gerekiyor

    if (!string.IsNullOrEmpty(Request["code"]) && !Page.IsPostBack)

    {

        VeriCek();

    }

}

 

private void VeriCek()

{

    //Authority işlemleri için kullanılan client ve request nesnelerimizi oluşturuyoruz

    RestClient client = new RestClient { Authority = "https://graph.facebook.com/oauth/" };

    RestRequest request = new RestRequest { Path = "access_token" };

    //Facebook AppID değerimiz

    request.AddParameter("client_id", ConfigurationManager.AppSettings["FacebookAppID"]);

    //Daha önceden de kullandığımız callback adresimiz

    request.AddParameter("redirect_uri", "http://www.gokhanbagci.com/facebookCallback.aspx");

    //Facebook AppSecret değerimiz

    request.AddParameter("client_secret", ConfigurationManager.AppSettings["FacebookAppSecret"]);

    //Bize geri dönen code değerimiz

    request.AddParameter("code", Request["code"]);

    RestResponse response = client.Request(request);

    //Dönen değerlerin dönüşüm işlemlerini tamamlıyoruz

    StringDictionary result = Parse(response.Content);

    string appToken = result["access_token"];

    //appToken değişkeni bizim verdiğimiz değerlerle servisin verdiği değişkenleri karşılaştırarak

    //yeni değer üretir, daha sonra bu değişkenle tekrar servise bağlanıp istekte bulunduğumuz nesneyi

    //bize geri bildirilmesini sağlar

    Detay(appToken);

}

private StringDictionary Parse(string queryString)

{

    queryString = queryString + "&";

    StringDictionary outc = new StringDictionary();

    Regex r = new Regex(@"(?<name>[^=&]+)=(?<value>[^&]+)&", RegexOptions.IgnoreCase | RegexOptions.Compiled);

    IEnumerator enums = r.Matches(queryString).GetEnumerator();

    while (enums.MoveNext() && enums.Current != null)

    {

        outc.Add(((Match)enums.Current).Result("${name}"), ((Match)enums.Current).Result("${value}"));

    }

    return outc;

}

 

private void Detay(string sToken)

{

    //Authority işlemleri için kullanılan client ve request nesnelerimizi oluşturuyoruz

    RestClient client = new RestClient { Authority = "https://graph.facebook.com/" };

    //Path değerimiz "me" yani login olan kullanıcı bilgilerini bize geri döndürüyor.

    //Bu kısımda bir çok path değerleri var. Ör: me/friends, me/photos gibi...

    RestRequest request = new RestRequest { Path = "me" };

    request.AddParameter("access_token", sToken);

    RestResponse response = client.Request(request);

    JavaScriptSerializer ser = new JavaScriptSerializer();

    //Bize dönen değer json formatında bir User nesnesi,

    //Uygun bir C# clasına direkt atama yaptırabiliyoruz.

    SocialUser user = ser.Deserialize<SocialUser>(response.Content);

    if (user != null)

    {

        //user.id değeri her kullanıcı için unique bir değer

        //Sizde bu değere göre kendi projenizde ilişkilendirmeler yapabilirsiniz.

        //Gerisi sizin hayal gücünüze kalmış :)

        Response.Write(user.name + "/" + user.id + "<br><img src=\"https://graph.facebook.com/" + user.id + "/picture\">");
    }

}


Projemizde kullandığımız SocialUser nesnemiz.


public
class SocialUser

{

    public string id { get; set; }

    public string name { get; set; }

    public string email { get; set; }

    public string first_name { get; set; }

    public string last_name { get; set; }
}


Sonuç...


Başka bir makalemde görüşmek dileğiyle...

Gökhan BAĞCI
Web Developer
http://gokhanbagci.com


Gökhan BAĞCI

2003 yilindan itibaren .Net teknolojilerini takip etmektedir. Freelance olarak bir çok sahis ve firma için proje gelistirmistir.

Erol Ergül - 17.4.2012
Gökhan bey verdiğiniz kodlar çalışmıyor. Yenilemeniz mümkünmü acaba

Baran - 15.10.2010
Merhaba; Yazınızdaki kodları kendi projemde kullandım. Defalarca kontrol etmeme rağmen Server Error in '/' Application. Value cannot be null. Parameter name: stringToUnescape hatasını alıyorum. Nereden kaynaklanıyor olabilir. Teşekkürler

Yorumunuz