2014-11-22 142 views
0

我試圖在多個頁面中持久保留Firebase用戶身份驗證狀態。持久性Firebase OAuth身份驗證

$scope.loginGoogle = function() { 
     console.log("Got into google login"); 
     ref.authWithOAuthPopup("google", function(error, authData) { 
      $scope.loggedIn = true; 
      $scope.uniqueid = authData.google.displayName; 
       }, { 
      remember: "sessionOnly", 
      scope: "email" 
     }); 
    }; 


     function checkLogin() { 
      ref.onAuth(function(authData) { 
      if (authData) { 
       // user authenticated with Firebase 
       console.log("User ID: " + authData.uid + ", Provider: " + authData.provider); 
      } else { 
       console.log("Nope, user is not logged in."); 
      } 
      }); 
     }; 

然而,當checkLogin函數被調用在另一頁,的authData沒有定義,即使用戶已經登錄,登錄頁面上。什麼似乎是這個問題?

+0

你在'onAuth'中定義'ref'變量的地方。你能提供一個JSBin或Plnker來顯示你的問題嗎? – 2014-11-22 18:52:51

+0

我們在這裏有一個jsfiddle:http://jsfiddle.net/leeuwenhoek/9abg634q/1/ – leeuwenhoek 2014-11-22 19:17:54

+0

您的示例未正確加載。它在控制檯中拋出錯誤。 – 2014-11-22 19:20:51

回答

6

這裏有兩件事要知道。

首先,您將JS客戶端身份驗證方法與AngularFire結合使用。雖然這不是一件壞事,但您需要注意一些問題。

其次,你可以使用$firebaseAuthmodule in AngularFire 0.9來處理下面所有的瘋狂的東西。

當使用Firebase JS客戶端級別的功能時,由於它的摘要循環,Angular不會總是選擇它們。對於任何外部JS庫都是如此。解決這個問題的方法是使用$timeout服務。

CodePen

// inject the $timeout service 
app.controller("fluttrCtrl", function($scope, $firebase, $timeout) { 

    var url = "https://crowdfluttr.firebaseio.com/"; 
    var ref = new Firebase(url); 
    $scope.loginGoogle = function() { 
    console.log("Got into google login"); 

    ref.authWithOAuthPopup("google", function(error, authData) { 

    // wrap this in a timeout to allow angular to display it on the next digest loop 
    $timeout(function() { 
     $scope.loggedIn = true; 
     $scope.uniqueid = authData.google.displayName; 
    }); 

    }, { 
     remember: "sessionOnly", 
     scope: "email" 
    }); 

    }); 

}); 

通過在$timeout包裹$scope性質另一個週期將被運行,它會顯示在頁面上。

理想情況下,你不想自己處理這個問題。使用嵌入到AngularFire中的$firebaseAuth模塊。您需要升級到0.9版才能使用該模塊。