Phonegap ile uygulamaya Facebook Login eklemek

Phonegap ile hazırladığınız uygulamaya facebook login butonu ekleyerek hem üye kayıt sistemi hazırlamaktan kurtulabilir hem de kullanıcılar için daha rahat bir kullanım sağlayabilirsiniz. Üstelik bunun için Cordova'nın bir eklentisi var.

1. Facebook Uygulaması Oluşturma

Önce Facebook Developers sayfasına girip Add New App butonu ile yeni bir uygulama oluşturup platform olarak Android seçin.

2. Eklenti Kurulumu

Konsolda phonegap projesinin olduğu dizine geldikten sonra plugin add komutu ile eklentiyi kuralım.

cordova plugin add https://github.com/Wizcorp/phonegap-facebook-plugin.git --variable APP_ID="FACEBOOK_UYGULAMA_ID" --variable APP_NAME="UYGULAMA_ADI"

Komuttaki gösterilen yerlere Facebook uygulama ID ve uygulama adı bilgilerini yazdıktan (tırnakları silmeyin) sonra çalıştırın.

2.1 Config.xml Düzenlemesi

Proje klasörünüzdeki config.xml dosyasında widget düğümünün içinde aşağıdaki bilgiyi ekleyin.

<gap:plugin name="com.phonegap.plugins.facebookconnect" version="0.8.0">
    <param name="APP_ID" value="UYGULAMA_ID" />
    <param name="APP_NAME" value="UYGULAMA_ADI" />
</gap:plugin>

Tabi ki uygulama ID ve uygulama adı bilgilerini kendinize göre düzeltin. Ardından uygulamanın erişim yetkisi olup olmadığına bakmak için config dosyasında aşağıdaki satırı arayın, yoksa kendiniz ekleyin.

<access origin="*" subdomains="true"/>

Her ikisini de eklediğinizde config dosyanızın en altında görünüm aşağıdaki gibi olacaktır.

    <gap:plugin name="com.phonegap.plugins.facebookconnect" version="0.8.0">
        <param name="APP_ID" value="UYGULAMA_ID" />
        <param name="APP_NAME" value="UYGULAMA_ADI" />
    </gap:plugin>
    <access origin="*" subdomains="true"/>
</widget>

3. Giriş Butonu Oluşturma

Sıra geldi HTML ve JS kodlarına. Örneğin, aşağıdaki gibi basit bir giriş butonu oluşturalım.

<a href="#" id="fblogin">Facebook ile Giriş Yap</a>

Javascript kısmında giriş işlemini onBodyLoad ya da onDeviceReady fonksiyonları içinde yapmanız en sağlıklısı olacaktır.

var btnLogin = document.getElementById("fblogin");
btnLogin.onclick = function (){
    facebookConnectPlugin.login(["public_profile"], function(userData){
        facebookConnectPlugin.api(userData.authResponse.userID + "/?fields=id,first_name,last_name", ["public_profile"],
            function (result) {
                alert("Giriş başarılı: " + result.first_name + " " + result.last_name);
                alert("Kullanıcı ID: " + result.id);
            },
            function (error) {
                alert("Hata: " + error);
            });
    }, function(){
        alert("Giriş başarısız, uygulamaya izin vermelisiniz.");
    });
};

4. Çıkış Yaptırma

Yine basit bir buton oluşturup çıkış işlemini yapalım.

<a href="#" id="fblogout">Çıkış Yap</a>

Javascript kısmında çıkış yapıldığında kullanıcıyı farklı sayfaya gönderme, erişim izinlerini ayarlama gibi işlemleri yapabilirsiniz.

var btnLogout = document.getElementById("fblogout");
btnLogout.onclick = function (){
    facebookConnectPlugin.logout(function (){
        alert("Çıkış işlemi başarılı!");
    }, function (){
        alert("Çıkış yaparken bir hata oluştu.");
    });
};

İşte bu kadar!

Yapmanız gereken başka birşey yok, eğer eklenti hakkında daha ayrıntılı bilgi edinmek ya da diğer platformlarda nasıl kullanıldığına bakmak istiyorsanız GitHub sayfasına göz atabilirsiniz.

Kolay gelsin!