Facebook Connect + jQuery Mobile + Phonegap Build
Ich versuche zu verstehen, wie Facebook Connect (login) mit jQuery Mobile und Phonegap Build, aber mehr Suche ich über diese information, mehr bin ich verwirrt.
Habe ich bereits meine app erstellt auf Facebook, und ich habe API-Nummer.
Ich weiß nicht, ob der beste Weg ist der Aufruf einer PHP-Seite (via ajax), wo überprüft E-MAIL + PASS via Facebook PHP-SDK oder die Facebook Javascript SDK. Für SDK JS ich verstehe nicht, wie integriert man es in meinem code (und ich weiß nicht, ob es möglich ist, testen Sie es, indem Sie "localhost").
Wenn mir jemand helfen könnte, mit dieser Frage...
Update
Habe ich versucht @Dom Anregung, aber wenn ich klicken Sie auf den Knopf, jede Handlung geschieht.
Unten mein 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="[email protected]">
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>Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Werfen Sie einen Blick auf die plugin-Dokumentation befindet sich hier.
Sicherstellen, dass Sie die unten in der
<head>Ihrer index.html:Sicherzustellen, dass Ihre config.xml enthält die folgenden:
Schließlich, überprüfen Sie die "Einfache Probe", wie das plugin zu benutzen, sich hier
Hoffe, das hilft. Wenn Sie weiterhin Probleme haben, poste doch code, den Sie verwenden, für uns zu schauen.