Makale Özeti

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ğiz.

Makale

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; }
}
 



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

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

Graph Api