Facebook Connect + jQuery Mobile + Phonegap构建 [英] Facebook Connect + jQuery Mobile + Phonegap Build
本文介绍了Facebook Connect + jQuery Mobile + Phonegap构建的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图了解如何将 Facebook Connect (登录)与 jQuery Mobile 和 Phonegap Build 结合使用，但随着搜索次数的增加，关于这些信息，我感到更加困惑.
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.
我已经在Facebook上创建了我的应用，并且我拥有API编号.
I have already my app created on Facebook, and I have API number.
我不知道最好的方法是调用一个PHP页面(通过ajax)，该页面通过Facebook PHP SDK或Facebook SDK Javascript验证EMAIL + PASS.对于SDK JS，我不了解如何将其集成到我的代码中(而且我不知道是否可以通过本地主机对其进行测试).
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...
更新
我尝试了@Dom建议，但是当我单击按钮时，会发生任何操作.
I tried @Dom suggestion, but when I click in the button, any action happens.
在我的HTML代码下面:
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代码:
<?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>
推荐答案
-
在此处中查看插件文档.
确保在index.html的<head>中具有以下内容:
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>
确保您的config.xml包含以下内容:
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>
最后，查看如何使用位于希望这会有所帮助.如果您仍然遇到问题，请发布一些您正在使用的代码，以便我们查看.
Hope this helps. If you are still having issues, post some code you are using for us to take a look at.
这篇关于Facebook Connect + jQuery Mobile + Phonegap构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
