Arif Pehlivan
Hakkımda Paylaşımlar Etiketler Türkçe
Arif Pehlivan

React Js ile Facebook Login Entegrasyonu

       

React Js ile Facebook Login Entegrasyonu

Uygulamalarda kullanıcı sayısını arttırabilmek için sosyal medya bağlantılarının yapılması günümüzde büyük önem taşımaktadır. Bu yazıda React.js uygulamamızaFacebook’u nasıl entegre edebileceğimizi göreceğiz.

Entegrasyon yapılırken Facebook’un sağlamış olduğu javascript sdk dan yararlanılmıştır.

Facebook Software Development Kit (SDK) ‘in yüklenmesi

Uygulamamızda componentDidMount içerisinde sdk nın sağladığı Facebook.init methodu ile facebook sdk projeye yüklenir.
FB.init methodu içerisinde 4 adet parametre sayesinde sdk ayarları yapılmaktadır. Bunlar ;

appId : Entegre edilen uygulama için Facebook tarafından verilen id. Aşağıda nasıl oluşturulacağı ile ilgili bilgilendirilme yapılmıştır.
version : Entegre olunan sdk versiyonu.
cookie : Cookilere izin verilip/verilmeyeceğini belirler.
xfbml : Yüklenildiği sayfa üzerinde sosyal pluginlere izin verilip/verilmeyeceğini belirler.

Nasıl application id oluşturulur ?

Facebook ile entegrasyon yapabilmek için öncelikle bu linkden entegre edilecek uygulama için bir uygulama id si alınmalıdır.
Add a New App butonuna (sağ üst tarafda) tıklayıp bilgileri girdikten sonra facebook bizi otomatik olarak hangi entegrasyonları yapabileceğimizi gösteren bir sayfaya yönlendirir.

Açılan bu sayfada sol üst tarafda bulunan Dashboard sekmesine tıkladığınız zaman uygulamamıza ait version ,application id ve application secretdeğerlerine ulaşabiliriz.

Biz burada facebook login entegrasyonu yaptığımız için Facebook Login quick startına tıklayıp ordan entegrasyonu gerçekleştireceğiz.

Facebook SDK üzerinden login methodunun çağırılması

componentDidMount methodu içerisinde sdkı yükledikten sonra Facebook’a login isteğinde bulunabiliriz.Bunun için window objesine yüklemiş olduğumuz FB objesi üzerinden login methodunu çağıracağız.

FB.login methodunu ilk parametre olarak callbackMethod ikinci parametre olarak da login olacak olan kullanıcının hangi bilgileri isteniliyorsa onlar scope objesi içerisinde tanımlanır.
Aşağıdaki kod örneğinde kullanıcının email adresi istenmiştir.

Bu linkden scope üzerinde hangi dataların çekilebileceğini görebilirsiniz.

Bu işlemlerin sonucunda aşağıdaki kod örneklerinden yararlanarak artık uygulamanızı facebook login ile entegre etmiş olacaksınız.

Kod Örnekleri

FB.login methodunun çağırılması :

statusChangeCallback(response) {   
    if (response.status === ‘connected’) {     
        const socialData = { 
            accessToken: response.authResponse.accessToken,
            expiresIn: response.authResponse.expiresIn,
            signedRequest: response.authResponse.signedRequest,
            userID: response.authResponse.userID     
    };  
         //Başarılı login   } else if (response.status === ‘not_authorized’) {   // Kullanıcı login oldu, fakat uygulamanıza erişim izni yok   } else {   // Login olunamadı   } } window.FB.login(this.statusChangeCallback, { scope: ‘email,public_profile’ });

SDK nın yüklenmesi


 componentDidMount() {   // Load the SDK asynchronously   (function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = “https://connect.facebook.net/en_US/sdk.js";   fjs.parentNode.insertBefore(js, fjs);   }(document, ‘script’, ‘facebook-jssdk’));window.fbAsyncInit = function () {  window.FB.init({  appId: facebook.appId,  cookie: true,  xfbml: true,  version: ‘v2.8’ });};}

Facebook developers sitesi üzerinde bulunan örnek kod sayfanın alt kısmında bulunmaktadır.

Kolay Gelsin.. 🤞

 javascript, react.js
 |