如何显示错误的密码在Firebase简单登录电子邮件密码的错误状态

How to show error state for wrong password on Firebase Simple Login email password

本文关键字：密码 错误 简单 Firebase 登录 电子邮件 状态 何显示 显示      更新时间：2023-09-26

我使用Firebase的简单登录作为博客格式网站的管理员登录。正确的电子邮件和pw组合可以对Firebase上的数据库进行写访问。根据文档，我创建了单独的块。

验证变量:

var chatRef = new Firebase('https://fiery-fire-291.firebaseio.com/');
var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
    if (error) {
        // an error occurred while attempting login
        console.log(error);
    } else if (user) {
        // user authenticated with Firebase
        console.log('User ID: ' + user.id + ', Provider: ' + user.provider);
    } else {
    // user is logged out
    }
});

授权登录，我已经包装在登录控制器中:

app.controller('LoginCtrl', function ($scope) {
    $scope.login = function() {
        auth.login('password', {
            email: $scope.loginEmail,
            password: $scope.loginPassword, 
            debug: true 
        });
    };
});

从登录表单获取数据:

<div ng-controller="LoginCtrl">
    <form ng-submit="login()">
        <fieldset ng-class="">
            <input type="email" ng-model="loginEmail">
            <input type="password" ng-model="loginPassword">
        </fieldset>
        <button type="submit" href="#">Login</button>
    </form>
</div>

设置ng-class为登录表单错误以显示用户时Firebase登录错误的正确/最佳方法是什么?

我觉得我不应该在Angular中设置CSS(我可以很容易地在错误回调中这样做)。我试过在回调中设置一个全局变量，它将被

拾取
ng-class="{error: !userAuthenticated}"

但除了不工作，我觉得这也是错误的

这里最简单的方法是将错误写入回调中的$scope。你需要通过调用$apply或$timeout来提醒Angular开始编译:

var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
    $timeout(function() {
       if (error) {
           $scope.error = error;
       } else if (user) {
           $scope.error = null;
       } else {
          $scope.error = 'user is logged out';
       }
    });
});

显示在你的页面:

<p class="error" ng-show="error">{{error}}</p>

你可以通过使用Angular+Firebase开发的本地工具来节省大量的工作:Angular+Firebase Quick Start, angularFire库，angularFire -seed

angularFire-seed包含了一个完整的、功能性的登录示例，包括错误处理，你也可以参考。

我对Angular一点也不熟悉，但看过Firebase文档后，我相信回调正是你想要这样做的，这就是它的作用。来自文档:

auth.createUser(email, password, function(error, user) {
  if (!error) {
    console.log('User Id: ' + user.id + ', Email: ' + user.email);
  }
});

如果你想让CSS本身远离控制器，那么我建议你看看Coderwall上的这个代码片段，它不仅可以通过类名，还可以通过对象+表达式来设置ng-class。然后，你可以在错误回调中设置给定的布尔值来控制ng-class，你的angular模板将相应地更新，但你还没有将类设置"混合"到控制器代码中。

相关文章：