Uygulamanızda facebook login kullanmak için öncelikle facebook üzerinde bir uygulama kimliği oluşturmalısınız . Google da ufak bir arama ile bunu nasıl yapacağınızı bulabilrsiniz .
Facebookda bir uygulama kimliğiniz olduğunu varsayıyor ve öyle devam ediyorum .
Öncelikle projenize facebook plugin i dahil ediyoruz .
Aşağıdaki komutu terminal ekranına yapıştırıp download etmesini bekliyoruz
$ git clone https://github.com/Wizcorp/phonegap-facebook-plugin.git
– Download dan sonra terminal ekranından projemizin olduğu dizine gidiyoruz
– Aşağıdaki komutu uyguluyoruz
$ phonegap local plugin add /Users/macbook/phonegap-facebook-plugin –variable APP_ID=”facebookdan aldığınız app id yazılacak” –variable APP_NAME=”facebookda belirttiğiniz uygulama adı yazılacak”
komutunu uyguluyoruz . /Users/macbook/phonegap-facebook-plugin bu kısım downlopad ettiğimiz dosyanın yolu kendinize gore değiştirin .
Bu işlemler bittikden sonra gerekli javascript dosyalarını ve kodlarını projeye ekleyelim.
head tagları arasına <script type=”text/javascript” src=”js/facebookConnectPlugin.js”></script>
facebookConnectPlugin.js dosyamızı dahil ediyoruz
facebookConnectPlugin.js dosyasının içeriği şöyle :
"use strict";
/*
* @author Ally Ogilvie
* @copyright Wizcorp Inc. [ Incorporated Wizards ] 2014
* @file - facebookConnectPlugin.js
* @about - JavaScript interface for PhoneGap bridge to Facebook Connect SDK
*
*
*/
if (cordova.platformId == "browser") {
var facebookConnectPlugin = {
getLoginStatus: function (s, f) {
// Try will catch errors when SDK has not been init
try {
FB.getLoginStatus(function (response) {
s(response);
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
showDialog: function (options, s, f) {
if (!options.name) {
options.name = "";
}
if (!options.message) {
options.message = "";
}
if (!options.caption) {
options.caption = "";
}
if (!options.description) {
options.description = "";
}
if (!options.href) {
options.href = "";
}
if (!options.picture) {
options.picture = "";
}
// Try will catch errors when SDK has not been init
try {
FB.ui(options,
function (response) {
if (response && (response.request || !response.error_code)) {
s(response);
} else {
f(response);
}
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
// Attach this to a UI element, this requires user interaction.
login: function (permissions, s, f) {
// JS SDK takes an object here but the native SDKs use array.
var permissionObj = {};
if (permissions && permissions.length > 0) {
permissionObj.scope = permissions.toString();
}
FB.login(function (response) {
if (response.authResponse) {
s(response);
} else {
f(response.status);
}
}, permissionObj);
},
getAccessToken: function (s, f) {
var response = FB.getAccessToken();
if (!response) {
if (!f) {
console.error("NO_TOKEN");
} else {
f("NO_TOKEN");
}
} else {
s(response);
}
},
logEvent: function (eventName, params, valueToSum, s, f) {
// AppEvents are not avaliable in JS.
s();
},
logPurchase: function (value, currency, s, f) {
// AppEvents are not avaliable in JS.
s();
},
logout: function (s, f) {
// Try will catch errors when SDK has not been init
try {
FB.logout( function (response) {
s(response);
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
api: function (graphPath, permissions, s, f) {
// JS API does not take additional permissions
// Try will catch errors when SDK has not been init
try {
FB.api(graphPath, function (response) {
if (response.error) {
f(response);
} else {
s(response);
}
});
} catch (error) {
if (!f) {
console.error(error.message);
} else {
f(error.message);
}
}
},
// Browser wrapper API ONLY
browserInit: function (appId, version) {
if (!version) {
version = "v2.0";
}
FB.init({
appId : appId,
cookie : true,
xfbml : true,
version : version
});
}
};
// Bake in the JS SDK
(function () {
if (!window.FB) {
console.log("launching FB SDK");
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/sdk.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
if (!window.FB) {
// Probably not on server, use the sample sdk
e.src = 'phonegap/plugin/facebookConnectPlugin/fbsdk.js';
document.getElementById('fb-root').appendChild(e);
console.log("Attempt local load: ", e);
}
}
}());
module.exports = facebookConnectPlugin;
} else {
var exec = require("cordova/exec");
var facebookConnectPlugin = {
getLoginStatus: function (s, f) {
exec(s, f, "FacebookConnectPlugin", "getLoginStatus", []);
},
showDialog: function (options, s, f) {
exec(s, f, "FacebookConnectPlugin", "showDialog", [options]);
},
login: function (permissions, s, f) {
exec(s, f, "FacebookConnectPlugin", "login", permissions);
},
logEvent: function(name, params, valueToSum, s, f) {
// Prevent NSNulls getting into iOS, messes up our [command.argument count]
if (!params && !valueToSum) {
exec(s, f, "FacebookConnectPlugin", "logEvent", [name]);
} else if (params && !valueToSum) {
exec(s, f, "FacebookConnectPlugin", "logEvent", [name, params]);
} else if (params && valueToSum) {
exec(s, f, "FacebookConnectPlugin", "logEvent", [name, params, valueToSum]);
} else {
f("Invalid arguments");
}
},
logPurchase: function(value, currency, s, f) {
exec(s, f, "FacebookConnectPlugin", "logPurchase", [value, currency]);
},
getAccessToken: function(s, f) {
exec(s, f, "FacebookConnectPlugin", "getAccessToken", []);
},
logout: function (s, f) {
exec(s, f, "FacebookConnectPlugin", "logout", []);
},
api: function (graphPath, permissions, s, f) {
if (!permissions) { permissions = []; }
exec(s, f, "FacebookConnectPlugin", "graphApi", [graphPath, permissions]);
}
};
module.exports = facebookConnectPlugin;
}
Şimdi facebook login yapmak ve kullanıcı nın mail adresini , adını , soyadını vs bilgileri alacağımız kod parçasını projeye dahil edelim .
if (!window.cordova) {
var appId = prompt("facebook app id yazılacak ", "facebook da belirttiğiniz uygulama adınız yazılacak");
facebookConnectPlugin.browserInit(appId);
}
facebookConnectPlugin.login( ["email"],
function (response) { fbgiris ();},
function (response) { });
function fbgiris (){
facebookConnectPlugin.api( "me/?fields=id,name,email", ["user_birthday","email","public_profile"],
function (response) {
var fb_name =response.name;//Kullanıcı adı
var fb_email =response.email;// email adresi
var fb_id =response.id; //facebook id si
},function (response) {}); }
Birde fuul çalışan bir kod örneği verelim :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>facebook Login</title>
</head>
<body>
<div class="app">
<h1>MOBİLMUAYENE.COM</h1>
<div id="deviceready" class="blink">
<p class="event listening">cİHAZA BAĞLANIYOR</p>
<p class="event received">CİHAZ HAZIR</p>
</div>
<div class="event listening button" onclick="login();">Login Facebook</div>
<div class="event listening button" onclick="showDialog();">facebook ile dialog</div>
<div class="event listening button" onclick="apiTest();">facebook api testi</div>
<div class="event listening button" onclick="getAccessToken();">facebook ile kullanıcı bilgileri</div>
<div class="event listening button" onclick="logPurchase();">Log Purchase Event</div>
<div class="event listening button" onclick="logEvent();">Log Event</div>
<div class="event listening button" onclick="getStatus();">login statü bilgileri</div>
<div class="event listening button" onclick="logout();">Logout Facebook</div>
</div>
<div id="fb-root"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/facebookConnectPlugin.js"></script>
<script type="text/javascript">
var login = function () {//facebookConnectPlugin.js dosyasını eklemeyi unutmayın
if (!window.cordova) {
var appId = prompt("facebook app id", "uygulama adınız");
facebookConnectPlugin.browserInit(appId);
}
facebookConnectPlugin.login( ["user_birthday","email","public_profile"],
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var showDialog = function () {
facebookConnectPlugin.showDialog( { method: "feed" },
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var apiTest = function () {
facebookConnectPlugin.api("me/?fields=id,name,picture,email", ["user_birthday","email","public_profile"],
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var logPurchase = function () {
facebookConnectPlugin.logPurchase(1.99, "USD",
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var logEvent = function () {
// Daha fazlası aşağıdaki adreslerder mevcut
// https://developers.facebook.com/docs/ios/app-events
// https://developers.facebook.com/docs/android/app-events
facebookConnectPlugin.logEvent("Purchased",
{
NumItems: 1,
Currency: "USD",
ContentType: "shoes",
ContentID: "HDFU-8452"
}, null,
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var getAccessToken = function () {
facebookConnectPlugin.getAccessToken(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var getStatus = function () {
facebookConnectPlugin.getLoginStatus(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
var logout = function () {
facebookConnectPlugin.logout(
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) });
}
</script>
</body>
</html>
