javascript - 持久 Firebase OAuth 身份验证

Question

我正在尝试在多个页面上保留 Firebase 用户身份验证状态。

    $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也没有定义。看起来是怎么回事？

Answer 1

这里有两件事需要了解。

首先，您将 JS 客户端身份验证方法与 AngularFire 结合使用。虽然这并不是一件坏事，但您需要注意一些问题。

其次，您可以使用 $firebaseAuth module 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"
    });

  });

});

通过将 $scope 属性包装在 $timeout 中，将运行另一个周期并将其显示在页面上。

理想情况下，您不想自己处理这个问题。使用 AngularFire 中内置的 $firebaseAuth 模块。您需要升级到0.9版本才能使用该模块。