Sukru Alatas

Bir türlü ikincisini yazamadığım entegrasyonlar serilerinin bir yenisi ile yine karşınızdayım. Birinci bölümleri yayınlayınca iş bitmiş gibi oluşan bir kanı var bende sanırım. Ve tembelliğimin de bu sonuca katkısı yadsınamaz bir gerçek. Neyse bu sefer Facebook Connect (fbc) ile asp.net in nasıl entegre çalışacağını, kullanıcı authentication işlemlerinin nasıl fbc ile yapılacağını kısaca anlatacağım. Bir tane de örnek sayfamız ve kodlarımız da olacak.

Öncelikle fbc’nin auth. mekanizmasını anlatarak başlamalıyım. Facebook şu an 350 milyon kullanıcıya sahip bir sosyal ağ. Bu kabarık rakamın yanında Türkiye ve Türkler için bir başka önemi ise en yoğun kullanılan sosyal ağ olması. Şöyleki ABD ve İngiltereden sonra en çok kullanıcıya sahip olan ülke Türkiye. Şuradan incelenebilecek rakamlara göre şu anda 14 milyondan fazla Türk’ün dahil olduğu sanal ağda ingilizceden sonra en çok konuşulan dil de haliyle Türkçe oluyor. Bu rakamlar arasında en önemli veri ise bu kullanıcı sayısının internet kullanıcıları sayısına oranı. Bu rakam Türkler için şu an %53 oranında ve sıralamadaki en yüksek oranlardan birisi. Kısaca interneti görmüş her 100 Türk’ten 53′ünün fb hesabı var. Bu noktada eğer Türkçe içerik hazırlıyor ve kullanıcı doğrulaması (eskilerin deyimiyle üyelik sistemi) öngörüyorsanız fbc işinizi fazlasıyla görecek demektir.

Mekanizmadan bahsedecektik sayılara boğulduk, öncelikle fbc sistemi basit anlamda bir doğrulama sistemi ve kullanıcı hesabı araçları bütünü. Burada doğrulama sistemini birkaç farklı API ile kullanırken kullanıcı hesabı araçlarını XFBML denilen bir işaretleme dili yardımıyla kullanıyoruz. Mekanizmanın çalışmasında birkaç aşamalı bir yapı var, bu aşamaları kısaca anlatayım;

1. HTTP isteği sayfanıza yapılır.
2. Sayfanızdan kullanıcıya ait cookieler kontrol edilir.
3. İlgili cookie bulunamadı diyelim, sizin görüntülediğiniz login butonu ekranda görüntülenir.
4. Kullanıcı butona tıkladığında bir JS çalışır ve fb login ekranını ve sonrasında uygulamaya ilk izni verme ekranını görüntüler.
5. İzin verildiği anda açılan oturuma ait id cookie olarak sayfaya kaydedilir.
6. Sayfa yeniden yüklenir böylece işlem 2. adıma geri döner.
7. Bu sefer ilgili cookie bulunduğundan sizin yazacağınız kod ile çağıracağınız API ve XFBML ile eklediğiniz kontroller bu cookie den alacakları oturum id’sini fb üzerinden doğrulayarak kullanıcı bilgilerine ulaşırlar.

Normal şartlarda ek bir hak istemeden kullanıcıya ait arkadaş listesi, fotoğraf gibi bir kaç ana bilgiye direkt ulaşabilirsiniz. Ek işlemler için ek bazı hakların verilmesini kullanıcıdan istemeniz gerekiyor. Bunun bir kaç yolu var. Örnekte en hoşuma giden yöntemi seçtim. Bu iş için oluşturulmuş bir XFBML mevcut onu sayfaya ekleyerek kullandım.

Şimdi biraz ASP.net tarafından bahsedelim. Microsoft diğer bir çok işte olduğunun aksine bu sosyal ağlar olayına geç kalmadan hızlı bir giriş yaptı. Elindeki konuyla ilgili tek silahı olan anında mesajlaşma avantajını genişterek bir sosyal ağ haline getirdi. Bu sistem fb ile yarışabilecek bir durumda değil şu an da. Microsoftta bunun farkında olmalı ki kendi sosyal ağını kullanmaya zorlamak yerine fb ninde aktif olarak yazılımcılar açısından kullanımını özendirmek için bir dizi çalışma yaptı. Bunlardan fb için en önemlisi codeplex’de açık kodlu olarak geliştirilen fb api kütüphanelerinden bir tanesini alıp offical hale getirdi. Bende örnekte şuradan indirilebilecek kütüphaneyi kullandım. Piyasada benzer geniş kapsamlı pek kütüphane yok. Genelde sadece fb’nin hizmetlerinden bir tanesine odaklanmış kütüphaneler mevcut. Bu microsoft destekli olan kütüphane her türlü fb uygulaması yazmak için kullanılabilecek durumda. Mimari olarak çok hoşuma gittiğini söyleyemem biraz fazlaca ve genelde gereksiz şekilde OO paternlar kullanılmış. Kullandıkça hak verirsiniz sanıyorum. Neyse örneğe dönelim.

Bir kaç adımda basit bir uygulamayı nasıl ayağa kaldıracağınızı anlatabileceğim sadece ayrıntılarda fazlaca kodlama gerekebilecek noktalar mevcut. Bu noktaları örnek üzerinden inceleyebilirsiniz. Şimdi bir tane web uygulaması yaratalım ve ana sayfasını tasarım olarak açalım. İlk yapmanız gereken html etiketini genişletmek. fb namespace’ini tanıması için bir eklenti yapacaksınız ve html etiketi şu hale gelecek;

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

İkinci olarak yapmanız gereken bir karşılayıcı sayfayı yaratmanız. Bu karşılayıcı sayfa fb tarafından doğrulama sonrası gerekecek cookie setleme işlemlerini yapacak sayfa. Standart bir yapısı var bu alttaki html içeriği direkt olarak bir html sayfa içerisine yazıp kaydetmeniz yeterli. Bu yarattığını html sayfayı ilerde fb ye ileteceğiz ki bu sayede geri dönüşün nereye yapılacağı belli olsun. İçerik şu şekilde;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js"
        type="text/javascript"></script>

</body>
</html>

Şimdi gerekli kullanıcı tarafı işlemleri yapacağımız hazır js kütüphanesini sayfaya ekleyelim. Head etiketi arasına şu şekilde bir ekleme yapmanız yeterli

 <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/tr_TR"
        type="text/javascript"></script>

Burada en sonra bir parametre var bu parametre ekranların dili için seçim şansı sağlıyor bize. Şimdi fb’ye ait kütüphanenin içerisinde kullanıcı tarafı etiketlerin etkinleşmesi için çağırmamız gereken bir js kodu var, bunuda sayfanın sonunda body etiketi bitmeden hemen önce yerleştiriyoruz.

<script type="text/javascript">
    FB.init("api key buraya gelecek", "xd_receiver.htm");
</script>

Burada iki parametre mevcut, birincisi api key diğeri ise bir önceki aşamada yarattığımız karşılayıcı sayfanın relative formda adresi. Birinci parametre olan api key size yarattığınız fb uygulaması ile birlikte verilen açık anahtar. Uygulama yaratmak mı ? Evet bu noktaya kadar değinmediğim işin diğer önemli boyutuna geldik. Bu yazıyı okumadan önce fb uygulamaları ile ilgilenmiş iseniz çok uzak olmadığınız bir konudur bu sanırım. En azından benim için öyle. Bu blogu ilk tutmaya başladığım günlerde yazdığım facebook uygulama örnekleri sayesinde fb uygulama mimarisine az çok aşina olduğum için connect konusunda aynı yapı karşıma gelince çok zorlandığımı söyleyemem. Uygulama ayarlarına bir adet connect adresi yazmanız yeterli oluyor sistemin çalışması için o kadar. Ama olayı biraz irdeleyelim isterim,

FB de uygulamaların yaratıldığı ve ayarlarının yapıldığı bir uygulama var, adı developers. Önce bu uygulamayı eklemeniz gerekiyor. Uygulamayı ekledikten sonra uygulama ana sayfasından yeni uygulamalar yaratabiliyoruz. Bir connect sistemi kurmak içinse yine bir uygulama yaratmak gerekiyor. Uygulamayı yarattıktan sonra ayarlarına girdiğinizde connect kısmından bağlantı adresini girmeniz gerekli. Debug esnasında localhost ta çalışacağınızı varsayıyorum o yüzden adres olarak http://localhost verebilirsiniz ben lokal sunucuda 80 porttan sabit çalıştığım için bir port bilgisi girmedim. Her projeyi açtığınızda fb ye girip ayar yapmamak için sizde boşta olan bir portu projeye verebilir ve adresi sabitleyebilirsiniz.

Uygulamayı yaratıp connect adresini verdikten sonra fb tarafında yapmanız gereken birşey kalmıyor. Yeniden kodlarımıza dönelim. Burada ÇOK ÖNEMLİ bir nokta var. Çünkü çözmek için neredeyse bir günümü verdim. Eğer sizde benim gibi web projelerinin debug işleminde Internet Explorer kullanıyorsanız ve sürümünüz IE 8.0 ise yapılması gereken ufak bir ayar var.  IE’de Tools > Internet Options penceresinde Security tabında Local Intranet i seçtikten sonra altta çıkan “Enable Protected Mode” seçeneğini işaretlemeniz gerekli. Eğer bunu yapmazsanız lokalde çalışan kodunuz güvensiz alanda kalan facebook bağlantılarında sorun yaşayacak ve saçma sapan sorunlara yok açacaktır.

Bu ayarı da yaptıktan sonra artık sayfamız içerisine XFBML leri eklemeye başlayabiliriz. Tüm XFBML etiketlerini şuradan incelebilirsiniz, ben yapıyı görmeniz açısından bir tanesini anlatacağım, diğerleri kodda da mevcut.

<fb:login-button onlogin="window.location.reload();" size="xlarge" length="long"></fb:login-button>

Örnekteki XFBML etiketimiz login-button. Adından anlaşılabileceği üzere bize login butonunu gösteriyor. Butona tıklandığı anda kullanıcıya mümkünse modal form olarak, değilse popup olarak login ekranını gösteriyor. Tüm XFBML ler “fb” namespace’ine dahil. En başta yaptığımız tanımlama bunun içindi zaten. Bu örnek etiketin bir kaç farklı özelliği mevcut birisi “onlogin”. Bu özelliğe yazacağınız script login işleminden sonra çalıştırılıyor. Bir diğeri size ve length. Bunlarda butonun boyutu ile ilgili özellikler. Bu ve bunun gibi bir çok özellik mevcut herbir XFBML için. Ne işe yaradıklarını verdiğim adresten ayrıntılı olarak inceleyebilirsiniz.

Biraz kodlamaya geçelim artık. Örnek koddaki Default.aspx sayfamız iki panel den oluşuyor. Bir panel kullanıcı login olmamış ise, diğeri ise tersi durumda login olmuş ise gösteriliyor. Birinci panelde sadece bir login-button mevcut ve kullanıcının login olmasını sağlıyor. Diğer panelde ise login işlemi sonrası kullanıcı bilgileri ve iki basit işlem için tanımlı kontroller mevcut. Burada daha ayrıntıya girmeyeceğim kodda ayrıntısı var. Şimdi kodlamaya geçeceğiz dedik, ne yapıyoruz öncelikle bir ConnectSession nesnesi yaratıyor ve bu nesnenin IsConnected fonksiyonunu çağırıyoruz.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not fbcSession.IsConnected Then
            pnlLogin.Visible = True
            pnlUser.Visible = False
        Else
            pnlLogin.Visible = False
            pnlUser.Visible = True

            If fbcSession.IsPermApproved(ExtendedPermissions.share_item) Then plcSampleCtrl.Controls.Add(LoadControl("~/.ctrls/ct-ShareLink.ascx"))
            If fbcSession.IsPermApproved(ExtendedPermissions.publish_stream) Then plcSampleCtrl.Controls.Add(LoadControl("~/.ctrls/ct-PublishStream.ascx"))
        End If
    End Sub

Burada görülecek fbcSession instance’ı normal bir ConnectSession’dan üretilmedi. Kodu incelerseniz ConnectSessionExt isimli bir sınıf göreceksiniz, yukarıda bahsettiğim pattern sıkıntısından olsa gerek izinlerle ilgili kısım bana hiç hoş gelmediğinden ConnectSession sınıfını inherit edip ConnectSessionExt isimli bir sınıf haline getirdim ve bir kaç haklarla ilgili eklenti yazdım. Ama temel aynı olduğundan çok değişen birşey yok. Burada IsConnected fonksiyonu sayfanın cookie değerlerinden bir fb session id si arıyor. Bulursa eğer True değeri döndürüyor. Bu noktada bir yanlış kanı doğmasın. Koda böyle bir bölüm eklemedim ama şöyle bir case oluşabiliyor. Kullanıcı oturumu açıp sonra oturumu düşmeden önce fb ye gidip kullanıcı olarak verdiği hakları geri alıyor uygulamadan. Bu sefer kütüphaneden IsConnected true dönerken verilere ulaşmak istediğiniz de hata alıyorsunuz. O yüzden kod ile verilere ulaşma anında bu case i gözardı etmemenizi öneririm. Yani bir kez cookie var ise o session illa geçerli demek değildir.

Bitirmeden önce iki ufak kod örneği daha vermek isterim. Birincisi açık olan session dan kullanıcının arkadaş listesi almayla ilgili

Dim fbApi As New Api(fbcSession)
Dim flist = (From f In fbApi.Friends.GetUserObjects Order By f.name Select New With {.name = f.name, .uid = f.uid}).ToList

Diğeri ise kullanıcının duvarına bir akış gönderme ile ilgili

Dim fbApi As New Api(fbcSession)
fbApi.Stream.Publish(txtContent.Text)

Görülebileceği üzere bu tip tüm işlemler açık olan fbc session a bağlı olarak yaratılan Api sınıfı ile yapılıyor. Bu noktada birinci bölümü sonlandırıyorum. Umarım ikinci bölümü bir türlü gelemeyen yazılar dizisine yeni bir üye katmamışızdır. Yeni bölümde bir kaç yeni izin ile yeni bir kaç özelliği yazmayı düşünüyorum. Kodun canlı örneğine şuradan, kaynak kodlara ise buradan ulaşabilirsiniz.