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ıza Facebook’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 secret değ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ı :

SDK nın yüklenmesi

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

--

--

--

Software Engineer www.arifpehlivan.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arif PEHLİVAN

Arif PEHLİVAN

Software Engineer www.arifpehlivan.com

More from Medium

How to create a React App using Parcel

AuthGuard React Router V6

React Hooks (useState and useEffect) Concepts In-depth

Basics of React JS