Facebook Connect + jQuery Mobile + Phonegap Build

时间:2013-09-10 13:24:47

标签: jquery-mobile facebook-javascript-sdk phonegap-build

我正在尝试了解如何将 Facebook Connect (登录)与 jQuery Mobile Phonegap Build 一起使用,但我正在搜索更多内容关于这些信息,我更加困惑。

我已经在Facebook上创建了我的应用程序,并且我有API编号。

我不知道最好的方法是调用PHP页面(通过ajax),通过Facebook PHP SDK或Facebook SDK Javascript验证EMAIL + PASS。对于SDK JS,我不明白如何将它集成到我的代码中(我不知道是否可以通过localhost对其进行测试)。

如果有人可以帮我解决这个问题......

更新

我尝试了@Dom建议,但当我点击按钮时,会发生任何动作。

在我的HTML代码下面:

<!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>

1 个答案:

答案 0 :(得分:2)

  1. 查看位于here的插件文档。

  2. 确保您在index.html的<head>中有以下内容:

    <script src="cdv-plugin-fb-connect.js"></script>
    <script src="facebook-js-sdk.js"></script>
    
  3. 确保您的config.xml包含以下内容:

    <gap:plugin name="com.phonegap.plugins.facebookconnect">
        <param name="APP_ID" value="..." />
        <param name="APP_NAME" value="..." />
    </gap:plugin>
    
  4. 最后,查看“简单示例”,了解如何使用位于here的插件

  5. 希望这会有所帮助。如果您仍然遇到问题,请发布一些您正在使用的代码来查看。