Facebook connect ile kullanıcı giriş çıkış

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "Facebook connect ile kullanıcı giriş çıkış"

Ilker Reza
8 yıl önce
İzleme sayısı:

1 Facebook connect ile kullanıcı giriş çıkış 12 Mayıs Salı 09 Diğer Dökümanlar Facebook Connect Nedir? Facebook, uzun süredir api'si dışında connect ile javascript ve fbml tabanlı bir yapı ile web sitelerinde kullanıcı yetkilendirmesi (user authentication) işlemlerini facebook hesapları ile yapabilmelerini sağlıyor. Bu servis ile facebook connect butonu gördüğünüz sitelerde üyelik yerine facebook hesabınız ile kolayca giriş yapıp sitelerdeki üye işlemlerini yapabiliyorsunuz. Şimdi facebook connect kullanarak sitenizdeki basit işlemler için (yorum yazma, üyelere özel bölümler) facebook entegrasyonu yapmayı anlatacağım. (Facebook connect videosunun yazılı ve Türkçe versiyonudur) İhtiyaçlarınız Facebook connect entegre edebilmek için : Giriş seviyesinde XHTML bilgisi Giriş seviyesinde javascript bilgisi gerekiyor. Terminoloji Facebook connect aslında javascript üzerinden haberleşiyor fakat facebook, görüntülemede kendi xhtml sözlüğünü kullanıyor : FBML (Facebook Markup Sayfa 1 / 12

yapabilmelerini sağlıyor. Bu servis ile facebook connect butonu gördüğünüz sitelerde üyelik yerine facebook hesabınız ile kolayca giriş yapıp sitelerdeki üye işlemlerini yapabiliyorsunuz.

2 Language). Görüntülemede facebook'tan gelecek bilgilerde bu etiketleri kullanarak ekrana çıktı vereceğiz. Bağlantıyı yapabilmek için ise facebook'tan yükleyeceğimiz bir javascript var. Ardından da yazacağımız bir javascript fonksiyonu ile giriş yapıldıktan sonra yapılacak aksiyonları yaptıracağız. Başlayalım Normalde kullandığımız xhtml yorum formu kalıbı üzerinden başlayacağım. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>facebook Connect</title> <link rel="stylesheet" type="text/css" media="screen" href="form.css" /> </head> <body> <div class="comment Form"> <div id="user_box"> <label for="name">name</label><br /> <input type="text" name="name"> </div> <br /> <div> <label for="message">message</label><br /> <textarea name="message"></textarea> </div> </div> </body> </html> Bu kodun çıktısı : Sayfa 2 / 12

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.

3 şeklinde olacaktır. Facebook connect'i kullanabilmek için 3 işlem yapacağız. Birincisi FBML için XML sözlüğü belirtmek, ikincisi javascipt api'sini yükletmek, üçüncü adımda da facebook uygulama anahtarlarınız ile facebook connect'i başlatmak. Facebook nesneleri çizdirmek için FBML etiketleri kullanacağız. FBML etiketlerini tarayıcılar yorumlayabilmesi için html etiketine FBML sözlüğünü belirtmemiz gerekecek. Bunun için <html xmlns=" xml:lang="en" lang="en"> satırını <html xmlns=" xmlns:fb=" xml:lang="en" lang="en"> olarak değiştireceğiz Böylece az sonra ekleyeceğimiz facebook etiketlerini tarayıcınız yorumlayabilecek. Şimdi facebook connect javascript'ini yükleyelim. HTML'de meta etiketleri içerisine <script src=" tureloader.js.php" type="text/javascript"></script> Sayfa 3 / 12

Facebook nesneleri çizdirmek için FBML etiketleri kullanacağız. FBML etiketlerini tarayıcılar yorumlayabilmesi için html etiketine FBML sözlüğünü belirtmemiz gerekecek.

4 Şimdi yapacağınız işlem facebook üzerinde kendinize ait bir uygulama oluşturmak olacak. Facebook Connect kullanabilmek için bir uygulamanızın olması gerekiyor. Bunun için de önce Developers uygulamasını yüklemelisiniz. Sırayla aşağıdaki adımları izleyin : adresinden uygulama oluşturacağız fakat eğer "Developers" uygulamasını kullanmıyorsanız bu bağlantıya gittiğinizde önce Developers uygulamasını eklemenizi isteyen bir sayfaya ulaşırsınız. Uygulamayı eklediğinizde Developers uygulaması içinden kendinize yeni uygulama oluşturabileceksiniz. Sağ üst köşedeki "Set up New Application" butonuna tıklayın. Yeni uygulama oluşturma sihirbazında : uygulama adını belirleyip facebook uygulama kurallarını onayladığınızı belirttikten sonra değişiklikleri kaydet tuşuyla uygulamanızı oluşturabilirisiniz. Sonra detaylı bilgileri girebileceğiniz uygulama düzenleyicisinde soldaki menüde Connect seçeneğini göreceksiniz. Sayfa 4 / 12

php adresinden uygulama oluşturacağız fakat eğer "Developers" uygulamasını kullanmıyorsanız bu bağlantıya gittiğinizde önce Developers uygulamasını eklemenizi isteyen bir sayfaya ulaşırsınız.

5 Connect ile ilgili bilgilerden Connect URL'i belirtmek zorundasınız. Bu url, facebook connect'i kullanacağınız sayfanın adresi olmak zorunda. Mesela sizhttp:// sayfasında facebook connect kullanacaksanız buraya bu adresi girmek zorundasınız. Facebook connect'i zaten sadece giriş sayfanızda kullanacaksınız. URL'leri ayarladıktan sonra değişiklikleri kaydetmeyi unutmayın. Son durum olarak uygulama özet ekranınız aşağıdaki gibi olacaktır : Sayfa 5 / 12

com/giris/ sayfasında facebook connect kullanacaksanız buraya bu adresi girmek zorundasınız.

6 Burada kırmızı ile işaretlediğim, uygulamanızın API Anahtarını facebook connect javascript başlatıcısında kullanacağız. Bunun için de html'inizin sonuna body etiketinizin içine <script type="text/javascript"> // facebook init FB.init("80ee1ac2834c79cde1b567afdd13bbb1", "xd_receiver.html"); </script> kodunu eklemelisiniz. Burada ikinci parametrede belirtilen xd_receiver.html dosyası facebook ile haberleşmek için kullanılacak olan aracı dosya. Bu dosyayı da aşağıdaki kodu az önce eklediğiniz javascript fonksiyonunda ikinci parametrede belirttiğiniz Sayfa 6 / 12

init("80ee1ac2834c79cde1b567afdd13bbb1", "xd_receiver.html"); </script> kodunu eklemelisiniz.

7 isimle (xd_receiver.html) kaydedin. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <body> <script src=" CommReceiver.js" type="text/javascript"></script> </body> </html> Son olarak formumuza facebook connect butonu ekleyelim. Bunun için formda ilk div içinde yer alan input'un altına <br /> veya facebook ile baglanabilirsiniz <fb:login-button></fb:loginbutton> kodunu ekleyeceğiz. Facebook connecti başarıyla sisteminize tanıtmış olduk ve sayfamız şu şekilde görünmeye başladı : Sayfa 7 / 12

js" type="text/javascript"></script> </body> </html> Son olarak formumuza facebook connect butonu ekleyelim.

8 Eğer facebook connect butonuna basarsanız facebook'un lightbox'ı içerisinde giriş formu ekrana gelecektir. Eğer facebook'a o oturumda zaten giriş yapmış iseniz sadece facebook connect ile bu siteye bağlanmak istediğinizi onaylamanızı isteyen bir kutu ekrana gelecektir : Sayfa 8 / 12

Eğer facebook'a o oturumda zaten giriş yapmış iseniz sadece facebook

9 Bu adımları geçince sayfada şimdilik bir değişiklik olmayacaktır, fakat facebook connect ile sitenize bağlanmış oldunuz. Şimdi isim kutusunu kaldırıp facebook'tan kullanıcı adını ve resmini alalım. Bunun için giriş yapıldığında bir javascript fonksiyonu çağırmamız gerekecek. Fonksiyonu yazmadan önce çağrıyı yapmak için, eklediğimiz facebook buton koduna onlogin özelliği ekleyelim. <br /> veya facebook ile baglanabilirsiniz <fb:login-button></fb:loginbutton> kodunu <br /> veya facebook ile baglanabilirsiniz <fb:loginbutton onlogin="updateuserbox();"></fb:login-button> olarak değiştirelim. Şimdi sayfanın sonundaki script içine fonksiyonumuzu tanımlayalım. Sayfa 9 / 12

Fonksiyonu yazmadan önce çağrıyı yapmak için, eklediğimiz facebook buton koduna onlogin özelliği ekleyelim.

10 function updateuserbox(){ userbox = document.getelementbyid('user_box'); userbox.innerhtml = '<fb:profile-pic uid="loggedinuser"></fb:profilepic><br />' + '<fb:name uid="loggedinuser" useyou="false"></fb:name><br />' + '<a href="#logout" onclick="fb.connect.logoutandredirect('./');">lo gout</a>'; FB.XFBML.Host.parseDomTree(); } fonksiyonunu ekleyelim. Fonksiyon basitçe user_box kimlikli nesne içine 3 element ekliyor. Elementler adından da anlaşılacağı gibi ilki prfil fotosu, ikincisi facebook'daki görünen adı, diğer element de çıkış bağlantısı. Bu koddan sonra facebook connect butonuna basıp giriş yaptığınızda sayfa aşağıdaki gibi şekilleniyor : Çıkış bağlantısına bastığınızda facebook'tan giriş yaptığınız kullanıcı bilgileri silinecektir. Sonuçta facebook connect butonu ile giriş yapılınca kullanıcı bilgilerini alabilir olduk. Fakat sayfa her yenilendiğinde facebook connect butonuna basılması gerekecek. Sayfa 10 / 12

/');">lo gout</a>'; FB.XFBML.Host.parseDomTree(); } fonksiyonunu ekleyelim. Fonksiyon basitçe user_box kimlikli nesne içine 3 element ekliyor.

11 Her sayfa yüklendiğinde eğer giriş yapılmışsa updateuserbox fonksiyonunun yaptığı işi yaptırmak için facebook connect init fonksiyonuna bir parametre daha vereceğiz : FB.init("80ee1ac2834c79cde1b567afdd13bbb1", "xd_receiver.html", {"ifus erconnected" : updateuserbox}); Son eklediğimiz parametrede login durumunda çalışacak fonksiyonu belirttik. Sonuç olarak html dosyamız şu şekilde şekillendi : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:fb=" ok.com/2008/fbml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>facebook Connect</title> <link rel="stylesheet" type="text/css" media="screen" href="form.css" /> <script src=" atureloader.js.php" type="text/javascript"></script> </head> <body style="padding: 40px; font-family: Arial;"> <div class="comment Form"> <div id="user_box"> <label for="name">name</label><br /> <input type="text" name="name" /><br /> <br /> veya facebook ile baglanabilirsiniz <fb:loginbutton onlogin="updateuserbox();"></fb:login-button> </div> <br /> <div> <label for="message">message</label><br /> <textarea name="message"></textarea> </div> </div> <script type="text/javascript"> FB.init("80ee1ac2834c79cde1b567afdd13bbb1", "xd_receiver.html", {"if Sayfa 11 / 12

Sonuç olarak html dosyamız şu şekilde şekillendi : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.

12 Powered by TCPDF ( UserConnected" : updateuserbox}); function updateuserbox(){ userbox = document.getelementbyid('user_box'); userbox.innerhtml = '<fb:profilepic uid="loggedinuser"></fb:profile-pic><br />' + '<fb:name uid="loggedinuser" useyou="false"></fb:name><br />' + '<a href="#logout" onclick="fb.connect.logoutandredirect('./');"> Logout</a>'; FB.XFBML.Host.parseDomTree(); } </script> </body> </html> Sonuç Bu dökümanda anlatılanlar gerçekte çok fazla işinize yaramayacaktır. Çünkü burada facebook connect'i html'de önyüze entegre etmeyi gördük fakat çoğu üyelikle ilgili sistemde işinize yarayacak olan profil fotosunun büyük hali, kullanıcının ismi dışındaki bilgileri de aslında API aracılığı ile php, javascript gibi ortamlarda kullanarak birşeyler çıkarmak durumunda kalacaksınız. PHP api yardımı ile facebook özelliklerinin kullanımına başka dökümanda yer vereceğim. Yine de api ile kullanacağınız sayfalarda facebook connect ile giriş-çıkış ve oturum işlemlerini bu dökümanda anlatılan methodlarla yapmanız gerekecek. Hazırlayan : Mehmet Fatih YILDIZ Kaynak : Bu yazı adresinden indirilmiştir. Sayfa 12 / 12

/');"> Logout</a>'; FB.XFBML.Host.parseDomTree(); } </script> </body> </html> Sonuç Bu dökümanda anlatılanlar gerçekte çok fazla işinize yaramayacaktır.

Benzer belgeler

PHP ile İnternet Programlama

PHP ile İnternet Programlama Doç.Dr. Gazi Üniversitesi Gazi Eğitim Fakültesi Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümü 6. BÖLÜM: AJAX Uygulamaları Neden AJAX? Dördüncü bölümde yer alan Veritabanı-bağlantılı