I'm trying to understand how to use Facebook Connect (login) with jQuery Mobile and Phonegap Build, but as more I search about this information, more I get confused.
I have already my app created on Facebook, and I have API number.
I don't know if the best way is to call a PHP page (via ajax) where validates EMAIL + PASS via Facebook PHP SDK or Facebook SDK Javascript. For SDK JS I don't understand how to integrate it in my code (and I don't know if it's possible to test it by localhost).
If someone could help me with this question...
Update
I tried @Dom suggestion, but when I click in the button, any action happens.
Below my HTML code:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Test</title>
<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/codiqa.ext.css">
<!-- jQuery and jQuery Mobile -->
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/jquery-1.9.0.js"></script>
<script src="js/utf8.js"></script>
<script src="js/cdv-plugin-fb-connect.js"></script>
<script src="js/facebook-js-sdk.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
<!-- These are the notifications that are displayed to the user through pop-ups if the above JS files does not exist in the same directory-->
if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable does not exist. Check that you have included cordova.js correctly');
if (typeof CDV == 'undefined') alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
if (typeof FB == 'undefined') alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
FB.Event.subscribe('auth.login', function(response) {
alert('auth.login event');
});
FB.Event.subscribe('auth.logout', function(response) {
alert('auth.logout event');
});
FB.Event.subscribe('auth.sessionChange', function(response) {
alert('auth.sessionChange event');
});
FB.Event.subscribe('auth.statusChange', function(response) {
alert('auth.statusChange event');
});
/*function getSession() {
alert("session: " + JSON.stringify(FB.getSession()));
}
*/
function getLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('logged in');
} else {
alert('not logged in');
}
});
}
var friendIDs = [];
var fdata;
function me() {
FB.api('/me/friends', { fields: 'id, name, picture' }, function(response) {
if (response.error) {
alert(JSON.stringify(response.error));
} else {
var data = document.getElementById('data');
fdata=response.data;
console.log("fdata: "+fdata);
response.data.forEach(function(item) {
var d = document.createElement('div');
d.innerHTML = "<img src="+item.picture+"/>"+item.name;
data.appendChild(d);
});
}
var friends = response.data;
console.log(friends.length);
for (var k = 0; k < friends.length && k < 200; k++) {
var friend = friends[k];
var index = 1;
friendIDs[k] = friend.id;
//friendsInfo[k] = friend;
}
console.log("friendId's: "+friendIDs);
});
}
function logout() {
FB.logout(function(response) {
alert('logged out');
});
}
function login() {
FB.login(
function(response) {
if (response.session) {
alert('logged in');
} else {
alert('not logged in');
}
},
{ scope: "email" }
);
}
function facebookWallPost() {
console.log('Debug 1');
var params = {
method: 'feed',
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
};
console.log(params);
FB.ui(params, function(obj) { console.log(obj);});
}
function publishStoryFriend() {
randNum = Math.floor ( Math.random() * friendIDs.length );
var friendID = friendIDs[randNum];
if (friendID == undefined){
alert('please click the me button to get a list of friends first');
}else{
console.log("friend id: " + friendID );
console.log('Opening a dialog for friendID: ', friendID);
var params = {
method: 'feed',
to: friendID.toString(),
name: 'Facebook Dialogs',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
};
FB.ui(params, function(obj) { console.log(obj);});
}
}
document.addEventListener('deviceready', function() {
try {
alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({ appId: "appid", nativeInterface: CDV.FB, useCachedDialogs: false });
document.getElementById('data').innerHTML = "";
} catch (e) {
alert(e);
}
}, false);
</script>
</head>
<body>
<div data-role="page" id="page_login">
<div data-role="content" id="content-login">
<div id="content">
<a href="#" onclick="login()" data-role="button">Login Facebook</a>
<a href="#" onclick="me()" data-role="button">Me</a>
<a href="#" onclick="getLoginStatus()" data-role="button">Get Login Status</a>
<a href="#" onclick="facebookWallPost()" data-role="button">facebookWallPost</a>
<a href="#" onclick="publishStoryFriend()">friendstory</a>
</div>
</div>
</div>
</body>
</html>
XML code:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "br.com.test"
version = "1.0.0">
<name>Test</name>
<!-- FB Connect Section -->
<gap:plugin name="com.phonegap.plugins.facebookconnect">
<param name="APP_ID" value="XXXXXXXXXX...." /> <!-- FB App ID-->
<param name="APP_NAME" value="test" /> <!-- FB App Namespace-->
</gap:plugin>
<description>
Test
</description>
<author href="http://test.com.br" email="atendimento@test.com.br">
Test
</author>
<gap:plugin name="com.phonegap.plugins.barcodescanner" />
<feature name="http://api.phonegap.com/1.0/device" />
<preference name="phonegap-version" value="2.9.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" />
<icon src="res/icon/webos/icon-64.png" gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" />
<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />
</widget>
Take a look at the plugin documentation located here.
Ensure you have the below in the
<head>of your index.html:<script src="cdv-plugin-fb-connect.js"></script> <script src="facebook-js-sdk.js"></script>Ensure your config.xml contains the below:
<gap:plugin name="com.phonegap.plugins.facebookconnect"> <param name="APP_ID" value="..." /> <param name="APP_NAME" value="..." /> </gap:plugin>Finally, review the "Simple Sample" on how to use the plugin located here
Hope this helps. If you are still having issues, post some code you are using for us to take a look at.
来源：https://stackoverflow.com/questions/18720201/facebook-connect-jquery-mobile-phonegap-build