持久性Firebase OAuth身份验证

问题描述:

我试图在多个页面中持久保留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

这里有两件事要知道。

首先,您将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版才能使用该模块。