通過Cordova / Angular / Ionic在手機上登錄Facebook

Question

我正在使用一個混合應用程序來報告我們城市的坑窪。 用戶可以以傳統方式（填寫表格）或通過社交網絡之一（facebook，gmail，twitter）注冊到應用程序。

該系統通過導軌上的服務器和作為客戶端（離子/角度）的移動應用程序工作

在服務器端，我們已經解決了這個問題，用戶可以按照自己的方式注冊/登錄頁面。

但是由於該應用程序存在一些問題，因此當您單擊“通過Facebook登錄”按鈕時，該應用程序不執行任何操作

這是它組織的樣式。

app/
plugins/
    InAppBrowser
www/
    css/
    js/
        controllers/
            splash.js
            map.js
            tabs.js
        services/
            users.js
            notifications.js
        app.js
        utils.js
    lib/
        angular/
        ng-cordova-oauth/
        ngCordova/
        ionic/
    templates/
        map.html
        splash.html
        tabs.html
    index.html

splash.js控制器負責執行登錄功能。

angular.module('app')
.controller('SplashCtrl', function($scope, User, $state, $ionicPopup, $auth, $cordovaOauth) {
$scope.session_id = User.session_id;

$scope.facebookLogin = function() {
     alert("flag1");
    User.fbSignIn().then(function() {
         alert("flag2");
        User.fbGetData().then(function() {
             alert("flag3");
            User.fbAuth().then(function() {
                 alert("flag4");
                // Detect if it is a sign in or sign up
                if (User.username) {
                    console.log('Controller reports successfull social login.');
                    $state.go('tab.map');
                } else {
                    // Open finish signup modal
                    console.log('Contorller reports this is a new user');
                    $state.go('finish_signup');
                }
            }, function() {
                 alert("flag5");
                $ionicPopup.alert({
                    title: '<b>App</b>',
                    template: 'Credenciales no válidas, vuelve a intentar.',
                    okText: 'Aceptar',
                    okType: 'button-energized'
                })
            });
        }, function() {
             alert("flag6");
            // alert('Could not get your Facebook data...');
        });
    }, function() {
         alert("flag7");
        // alert('Could not sign you into Facebook...');
    });
}
})

我通過這些功能添加了一些警告標志，以查看應用程序卡在哪里。 我只能在電話上看到“ flag1”警報，然后什么也沒有發生

控制器與服務users.js通信我將代碼放在pastebin上，因為users.js服務太長

客戶端必須向服務器請求訪問令牌，然后在SplashCtrl中進行比較（如果客戶端獲得了令牌訪問權限），則應用會將用戶重定向到作為主頁的tabs.html模板。

控制台服務器什么也不顯示。 因此，請求應用程序永遠不會與服務器通信。 盡管app.js中已經聲明了“ CLIENTS”和“ SERVER”變量

.constant('SERVER', {

url: 'https://rails-tutorial-denialtorres.c9.io'
  })
.constant('CLIENTS', {
  facebook: 'fb Api'
  });

如果我以傳統方式預覽用戶名和密碼，則只能登錄服務器

我希望你能幫我這個家伙

問候和感謝！

Answer 1

你試試這個嗎？ http://ngcordova.com/docs/plugins/oauth/

我測試並運行得很好，易於實現，並且您還可以使用令牌解析json（並在需要時使用服務器端）

記住這項工作僅適用於真實設備，而不適用於Ionic Serve。

如果您要尋找自定義的Facebook登錄名（javascript），請嘗試以下代碼：

facebookStatus = function() {

    var dfd = new jQuery.Deferred();

    FB.getLoginStatus(function(response) {

      if (response.status === 'connected') {
        dfd.resolve({status: response.status, token: response.authResponse.accessToken});
      } else if (response.status === 'not_authorized') {
        // the user is logged in to Facebook, //but not connected to the app
        dfd.resolve({status: response.status, token: false});
      } else {
        // the user isn't even logged in to Facebook.
        FB.login(function(response) {
          if (response.status=="connected"){
            var token = response.authResponse.accessToken;
            dfd.resolve({status: response.status, token: response.authResponse.accessToken});
          }
        }, {scope:'YOUR SCOPE HERE'});
      }

    });
    return dfd.promise();
  };

*請記住，如果您使用此代碼，請在索引頁面上添加標准的Facebook App詳細信息（類似）

<div id="fb-root"></div>
<script>

    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'YOUR APP ID',
            status     : true, // check login status
            cookie     : false, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
        });

    };

    // Load the SDK asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));

</script>

Answer 2

當我通過add org.apache.cordova.inappbrowser安裝cordova插件時，該插件的ID為cordova-plugin-inappbrowser ，而ngcordova.js庫正在尋找org.apache.cordova.inappbrowser

更改ngcordova.js上的這些行即可解決此問題。