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身份验证方法有关。 / p>

Answer 1

＆＃39; auth＆＃39;从工厂返回的对象是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后端不必在其（分布式）服务器上保持会话状态。他们只需要检查每个请求中发送的令牌的有效性。

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

用户验证的新Firebase方法

1 个答案: