用于用户身份验证的新 Firebase 方法

Question

我从这个主题开始的原因是，在每次搜索与 Firebase 和 User Auth 相关的内容时，您看到的所有内容都会转到 SIMPLE LOGIN，它已经不推荐使用了。因此，我想消除一些疑问，并希望收到有关实施 Firebase 功能/方法的最佳方法的反馈。

如果我们提供带有 JS 和 HTML 部分的示例会更好。我将从我正在开发的应用程序的一些代码开始

首先创建新用户，登录和注销

//CREATE USER
<form name="sign-up">

      <input type="text" ng-model="user.name">

      <input type="email" ng-model="user.email">

      <input type="password" ng-model="user.password">

      <input type="password" ng-model="user.confirm">

      <button ng-click="createUser(user)">
       Create Account
      </button>

    <label ng-if="signUpErrorShow">
      <span>{{signUpErrorMsg}}</span>
    </label>
  </div>
</form>

//LOGIN USER
<form name="login">
      <input type="text" ng-model="user.email">

      <input type="password" ng-model="user.pwdForLogin">

      <button ng-click="signIn(user)">
        LOGIN
      </button>

      <button ng-click="logOut(user)">
        Logout
      </button>

    <label class="item item-text-wrap text-center" ng-if="signInErrorShow">
      <span>{{signInErrorMsg}}</span>
    </label>
  </div>
</form>

这是用于创建部分和登录的 HTML，这里我有一个问题，除了电子邮件和密码之外，我添加了一个带有 user.name 的输入，用户在其中输入他的姓名，一旦登录，什么可以我会使用 Angular 插值显示他的名字吗？

这里是服务

angular.module('urbanet.app.services', [])
// create a custom Auth factory to handle $firebaseAuth
.factory("Auth", function ($firebaseAuth, $rootScope) {
  var ref = new Firebase('https://urbanetapp.firebaseio.com/');
  return $firebaseAuth(ref);
});

还有什么我需要补充的吗？

现在是控制器：

angular.module('urbanet.app.controllers', [])

.controller("LoginCtrl", function($scope, $rootScope, $ionicLoading, $ionicModal,
                                  $timeout, $firebaseAuth, $state, $ionicPopup) {

  var ref = new Firebase('https://urbanetapp.firebaseio.com/'),
      auth = $firebaseAuth(ref);

  $scope.signUpErrorShow = false;
  $scope.signInErrorShow = false;

  //CREATING USER
  $scope.createUser = function(user) {
    $scope.validationError = false;
    if (user && user.email && user.name ) {
      if (user.password === user.confirm ) {

        auth.$createUser({
          email: user.email,
          password: user.password
        }).then(function (userData) {
          ref.child("users").child(userData.uid).set({
            email: user.email,
            displayName: user.name
          });
        }).catch(function (error) {
          alert("Error: " + error);
          $ionicLoading.hide();
        });
        $ionicPopup.show({
          template: 'Succesfully created',
          scope: $scope,
          buttons: [
            {
              text: 'Accept',
              onTap: function() {
                $state.transitionTo('tabs.news');
              }
            }
          ]
        });

      }else {
        $scope.signUpErrorMsg = "Error confirming pass";
      }
    }else {
      $scope.signUpErrorMsg = "Required field";
    }
  };

  //LOGIN USER
  $scope.signIn = function (user) {
    $scope.signInErrorShow = false;
    if (user && user.email && user.pwdForLogin) {
      auth.$authWithPassword({
        email: user.email,
        password: user.pwdForLogin
      }).then(function (authData) {
        ref.child("users").child(authData.uid).once('value', function (snapshot) {
          var val = snapshot.val();
          $scope.$apply(function () {
            $rootScope.displayName = val;
          });
        });
      }).catch(function (error) {
        $ionicPopup.alert({
          title: 'Error entering',
          template: "Auth failed " + error.message
        });
      });
    } else
    $scope.signInErrorShow = true;
    $scope.signInErrorMsg = 'E-mail & pass required'
  };

  // LOG OUT USER
  $scope.logOut = function() {
    ref.unauth();
  };    
});

现在，我的代码有问题吗？这里有些奇怪的是，一旦我创建了用户，我就会在浏览器的网络部分看到返回的数据，一旦我登录时也是如此，但是一旦我注销，我就看不到任何事情发生，这是正确的行为吗？

另外，这是我最需要你帮助的地方，我需要实现一种方法来重置密码。 Here are the docs for that，该功能如何工作？我需要先设置更改密码的方法吗？还是怎么做？

你们所有人的帮助对于其他人来说非常重要，不仅仅是我，正如我上面提到的，大多数网络用户的例子都与旧的firebase身份验证方法有关。

Answer 1

从工厂返回的 'auth' 对象是一个 firebase 对象。更好的设计是将此功能封装在您自己的服务中。然后，firebase api 中的更改仅反映在您的服务上，而不是在您的应用程序中使用身份验证的所有地方。

angular.module('urbanet.app.services', [])
// create a custom Auth factory to handle $firebaseAuth
.factory("AuthService", function ($firebaseAuth, $rootScope) {
  var ref = new Firebase("https://urbanetapp.firebaseio.com/");
  var firebaseAuth = $firebaseAuth(ref);


  // now create the interface between firebase and your application
  var authService = {};

  authService.logon = function(credentials){
    ... probably reference firebaseAuth object somewhere here
  }
  authService.logoff = function(){
    ... probably reference firebaseAuth object somewhere here
  }
  authservice.createUser = function(credentials){
    ... probably reference firebaseAuth object somewhere here
  }
  authService.resetPassword = function(...){
    ... probably reference firebaseAuth object somewhere here
  }       
  return authService;
});

在您的控制器中，您只需要调用 authService 上的方法，而不是一些一直在变化的后端特定代码。

angular.module('urbanet.app.controllers', [])

.controller("LoginCtrl", function($scope, $rootScope, $ionicLoading, $ionicModal,
             $timeout, AuthService, $state, $ionicPopup) {

    ...
    AuthService.createUser(...)
      .then(function(response){
        ...
    })
    ...
})

如果您选择这样做，也可以轻松地将 firebase 交换为另一个身份验证提供程序。

关于未显示任何网络活动的注销：登录时，firebase 可能会在您登录时为您提供访问令牌（由 firebase 客户端脚本保存）。登录后，您的应用程序访问 firebase 时，它​​会将此令牌添加到您的请求标头（授权标头？）。当您注销时，firebase 客户端脚本只会删除令牌。 这样，firebase 后端不必在其（分布式）服务器上保留会话状态。他们只需要检查每个请求中发送的令牌的有效性。

很抱歉对密码重置问题没有帮助。我得查一下...