firebase使用_使用AngularJS和Firebase构建实时状态更新应用

最新推荐文章于 2024-08-12 11:55:09 发布

dingshi7798

最新推荐文章于 2024-08-12 11:55:09 发布

阅读量129

点赞数

文章标签： vue python java javascript 数据库 ViewUI

原文链接：https://www.sitepoint.com/real-time-status-update-app-angularjs-firebase/

版权

firebase使用

如果您花了很多时间来使用AngularJS，那么您可能会熟悉Firebase ，它是一种实时数据存储，可以非常轻松地在任何平台上保存和同步数据。 Firebase为其平台（称为AngularFire）提供了AngularJS绑定，这使使用Firebase API更加容易。

在本教程中，我们将创建一个简单的状态更新应用程序，该应用程序将让我们看到AngularJS和Firebase如何交互。对于用户界面，我们将使用Angular Material ，这是Google Material Design的AngularJS实现，并附带了许多出色的UI组件。 Angular Material基于flexbox，如果您还不熟悉它，可能需要一点时间来适应它。我们还将重点关注应用程序的身份验证部分，正如我们将看到的那样，它是由Firebase的内置身份验证系统简化的。

实时状态应用程序的屏幕截图1

本教程将假定您熟悉AngularJS，并大致了解了Firebase是什么以及它如何工作。

与以往一样，可以在GitHub上找到本教程的代码。

安装依赖项

首先，使用npm安装应用npm 。

在命令行中：

mkdir status-app && cd status-app
npm install angular-material angular-ui-router angularfire angular-md5

安装Angular Material还将为我们提供其他软件包，包括AngularJS的最新版本。我们包括了UI Router，因为我们需要处理两种不同的状态-一种用于登录/注册，另一种用于查看状态。 Angular MD5将为我们提供一种对电子邮件地址进行哈希处理的快速方法，这对于为用户获取Gravatar图像是必需的。

您还需要某种服务器来查看应用程序并与之交互。为此， http服务器是理想的。

设置应用

我们需要一个文件夹结构，以提供一种清晰的方法来划分不同的职责范围。为此，我们使用一个名为components的文件夹。整个文件夹结构应如下所示：

status-app
|-- components
    |-- auth
    |-- status
    |-- user
|-- node_modules
    * dependencies
-- app.js
-- index.html
-- style.css

让我们使用已安装的依赖项以及尚未创建的应用程序脚本的引用来设置index.html文件。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Status App</title>
    <link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body ng-app="statusApp">
    <div layout="row">
      <div flex="33" offset="33">
        <div ui-view></div>
      </div>
    </div>
  </body>

  <!-- Application Dependencies -->
  <script src="node_modules/angular/angular.js"></script>
  <script src="node_modules/angular-ui-router/build/angular-ui-router.js"></script>
  <script src="node_modules/angular-material/angular-material.js"></script>
  <script src="node_modules/angular-animate/angular-animate.js"></script>
  <script src="node_modules/angular-aria/angular-aria.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.6/firebase.js"></script>
  <script src="node_modules/angularfire/dist/angularfire.js"></script>
  <script src="node_modules/angular-md5/angular-md5.js"></script>

  <!-- Application Scripts -->
  <script src="app.js"></script>
  <script src="components/auth/authController.js"></script>
  <script src="components/auth/authService.js"></script>
  <script src="components/status/statusController.js"></script>
  <script src="components/status/statusService.js"></script>
  <script src="components/user/userService.js"></script>
</html>

我们已经在body标签上引导了应用程序，并将其命名为statusApp 。我们还通过指定开头的div标签应具有row布局来立即在主体中使用Angular Material。通过将布局设置为row ，容器内的所有内容都将被水平放置。如果将布局设置为column ，则所有内容将垂直堆叠。

在下一个div ，我们通过在flex属性上设置33的值来将宽度设置为33％。 offset属性使我们可以通过将元素向右移动三分之一来使元素居中。

最后一个元素是我们的ui-view标记，这是我们（尚未创建）UI路由器状态将被加载的点。

我们还需要一个app.js文件来启动应用程序。

// app.js

(function() {
  'use strict';

  angular
    .module('statusApp', ['firebase', 'ngMaterial', 'angular-md5', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

    // If a route other than status is requested,
    // go to the auth route
    $urlRouterProvider.otherwise('/auth');

    $stateProvider
      .state('auth', {
        url: '/auth',
        templateUrl: 'components/auth/authView.html',
        controller: 'AuthController as auth'
      })
      .state('status', {
        url: '/status',
        templateUrl: 'components/status/statusView.html',
        controller: 'StatusController as status'
      });
    });
})();

如您所见，我们正在调用AngularJS模块statusApp ，该模块与body标签上的ng-app声明匹配。我们通过在模块名称旁边的数组中指定所需的模块来注入所需的模块，然后为应用程序设置一些配置。在配置块中，我们将为UI路由器设置规则以处理我们的不同状态。为此，我们需要传递配置函数$stateProvider和$urlRouterProvider 。

我们尚未为这些状态设置实际的控制器和模板，但是在这里我们要说的是，当我们使用/auth的URI时，我们想加载auth视图和auth控制器。此状态负责为用户提供登录和注册框。

登录后，我们想要进入/status状态，该状态将加载状态控制器并进行查看。最后，我们想否定任何其他路由，因此如果有疑问，我们告诉$urlRouterProvider ，将用户发送到/auth状态。

一点CSS

我们需要一点CSS来设置应用程序中的状态列表样式。

/* style.css */

.face {
  border-radius: 30px;
  border: 1px solid #ddd;
  width: 48px;
  margin: 16px;
}

.remove-status {
  cursor: pointer;
  color: red;
  font-weight: bold;
}

处理身份验证

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

我们的应用将需要能够注册和验证用户，对于我们来说幸运的是，Firebase提供了一种易于使用的托管身份验证解决方案。虽然它提供了与Google，Facebook和其他人进行身份验证的方法，但我们将依靠他们的电子邮件和密码方法来简化事情。

注意：这些代码示例引用了我自己创建的Firebase应用程序，您可以免费使用它。或者，您可以创建自己的Firebase帐户，并在代码中更改对它的引用以指向该帐户。为此，请参阅本文结尾的“ 添加您自己的Firebase帐户 ”部分。

首先，让我们创建一个身份验证服务。

// components/auth/authService.js

(function() {
  'use strict';

  angular
    .module('statusApp')
    .factory('Auth', AuthService);

  function AuthService($firebaseAuth) {
    var ref = new Firebase("https://statusapp.firebaseio.com");
    return $firebaseAuth(ref);
  }

})();

我们为该factory命名为Auth并建立与已创建的名为statusapp Firebase应用的statusapp 。我们将应用程序引用传递给$firebaseAuth ，后者是负责处理Firebase身份验证方法的服务。从我们的Auth服务中返回该值，将使我们能够从我们的控制器中进行挂钩。

接下来，让我们使用一些将登录和注册用户的方法来设置身份验证控制器。

// components/auth/authController.js

(function() {
  'use strict';

  angular
    .module('statusApp')
    .controller('AuthController', AuthController);

  function AuthController(Auth, $state) {

    var vm = this;

    vm.createUser = createUser;
    vm.login = login;

    function createUser() {

      // If there is already a user logged in,
      // log them out before proceeding
      Auth.$unauth();

      Auth.$createUser({
        email: vm.email,
        password: vm.password
      }).then(function(userData) {
        login();
      }).catch(function(error) {
        vm.error = error;
      });
    }

    function saveUser() {
      // TODO: save the user data at the /users endpoint
    }

    function login() {

      Auth.$authWithPassword({
        email: vm.email,
        password: vm.password
      }).then(function(data) {
        vm.email = null;
        vm.password = null;
        $state.go('status');
      }).catch(function(error) {
        console.log(error);
      });
    }
  }

})();

我们在此控制器上拥有的第一个方法是createUser ，它负责接受用户输入并使用我们之前创建的Auth服务在Firebase中创建新用户。您会注意到，我们所调用的Auth方法并不是我们在任何地方创建的。实际上，这些方法实际上是从$fireabaseAuth服务访问的，而这正是我们从Auth服务返回的结果。

成功创建新用户后，我们将调用login方法，在该方法中，我们将再次使用内置Firebase身份验证方法之一$authWithPassword 。此方法接受带有和电子邮件及密码密钥的对象，我们将其设置为用户为这些字段输入的内容。 then ，其中的成功处理程序让我们清除用户输入，如果他们成功登录，则将其重定向到主状态页面。如果登录失败，我们将捕获它，现在将错误记录到控制台。

您将看到，在saveUser方法中，我们目前仅具有一个代码注释，我们需要添加支持以将用户数据保存在Firebase中的/users端点上。我们将需要创建另一个服务来处理此问题，这将在下一部分中进行。

在继续之前，让我们放置身份验证页面HTML，以便我们看到所获得的内容。

<!-- components/auth/authView.html -->

<md-content class="md-padding">
  <md-tabs md-dynamic-height md-border-bottom>

    <md-tab label="login">
      <md-content class="md-padding">
        <h1 class="md-display-2">Login</h1>
        <md-input-container>
          <label>Email</label>
          <input ng-model="auth.email" type="text">
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input type="password" ng-model="auth.password" type="text">
        </md-input-container>
        <md-button class="md-raised md-warn" ng-click="auth.login()">Login</md-button>
      </md-content>
    </md-tab>

    <md-tab label="register">
      <md-content class="md-padding">
        <h1 class="md-display-2">Register</h1>
        <md-input-container>
          <label>User Name</label>
          <input ng-model="auth.username" type="text">
        </md-input-container>
        <md-input-container>
          <label>Email</label>
          <input ng-model="auth.email" type="text">
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input type="password" ng-model="auth.password" type="text">
        </md-input-container>
        <md-button class="md-raised md-primary" ng-click="auth.createUser()">
          Register
        </md-button>
      </md-content>
    </md-tab>

  </md-tabs>
</md-content>

那是一些非常密集HTML！ Angular Material非常棒，可以实现非常漂亮的UI设计，但是HTML可能会加起来。但是，令人高兴的是，我们具有描述性很强的自定义HTML标记，可帮助我们了解每个元素的用途。

我们在登录/注册页面使用Angular Material的选项卡。我们在这里有两个按钮在工作-一个用于登录，另一个用于注册。您将看到我们为它们每个声明了ng-click ，并且它们从authController调用了适当的方法。

如果一切正常，您应该看到以下内容：

实时状态应用程序的屏幕截图2

实时状态应用程序的屏幕截图3

保存新用户数据

Firebase身份验证使使用电子邮件和密码管理简单的用户身份验证非常容易。但是，它的局限性在于，在为用户创建帐户时，我们无法存储有关该用户的任何其他任意数据。能够存储用户名和任何可能感兴趣的传记信息将是很棒的。

幸运的是，我们可以通过创建专门用于用户及其数据的端点来轻松解决此问题，然后可以在我们的应用程序中对其进行访问。

首先，让我们创建一个新服务，该服务将负责处理与用户相关的数据存储。

// components/user/userService.js

(function() {

  'use strict';

  angular
    .module('statusApp')
    .factory('User', UserService);

  function UserService($firebaseObject) {

    function newUserRef(user) {
      var ref = new Firebase("https://statusapp.firebaseio.com/users/" + user.uid);
      return $firebaseObject(ref);
    }

    function getUserData(user) {
      var ref = new Firebase("https://statusapp.firebaseio.com/users/" + user);
      return $firebaseObject(ref);
    }

    function getLoggedInUser() {
      var user = localStorage.getItem('firebase:session::statusapp');
      if(user) {
        return JSON.parse(user);
      }
    }

    return {
      newUserRef: newUserRef,
      getUserData: getUserData,
      getLoggedInUser: getLoggedInUser
    }

  }

})();

在这里，我们有一个名为User的新工厂服务，该服务返回三种方法。您会注意到，我们在这里利用Firebase的$firebaseObject服务来设置同步对象。

newUserRef方法负责在/users端点为新注册的用户创建密钥。我们依赖于新用户的uid ，这是Firebase为我们创建的唯一标识符，该标识符可确保在Firebase支持的所有身份验证提供程序中都是唯一的。使用提供者方法格式化uid ，然后使用数字表示用户。对于我们的简单登录方法，第30个用户将获得一个simplelogin:30的uid 。当新用户注册时，成功返回的对象将包含该用户的uid ，这就是我们可以在User Service中User它的原因。

第二种方法getUserData负责在/users端点访问特定用户的用户数据，这为我们提供了一种在整个应用程序中访问用户信息的简便方法。

最后，使用getLoggedInUser方法，我们可以为当前登录用户访问Firebase存储在本地存储中的数据。对于我们的应用程序，Firebase会将这些数据保存在名为firebase:session::statusapp 。由于数据存储为字符串，因此我们必须应用JSON.parse将其转换为有用的对象。

现在我们的User服务已经到位，让我们向authController添加一些逻辑以使用它。

// components/auth/authController.js

(function() {

  'use strict';

  angular
    .module('statusApp')
    .controller('AuthController', AuthController);

  function AuthController(Auth, User, $state) {

    var vm = this;

    vm.createUser = createUser;
    vm.login = login;
    vm.loggedInUser;  

    function createUser() {

      // If there is already a user logged in,
      // log them out before proceeding
      Auth.$unauth();

      Auth.$createUser({
        email: vm.email,
        password: vm.password
      }).then(function(userData) {
        saveUser(userData);       
        login();
      }).catch(function(error) {
        vm.error = error;
      });
    }

    function saveUser(userData) {

      var user = User.newUserRef(userData);
      user.username = vm.username;
      user.email = vm.email;

      user.$save().then(function(success) {
        vm.username = null;
        vm.email = null;
        vm.password = null; 
        $state.go('status');
      }, function(error) {
        console.log("there was an error! " + error);
      });
    }

  ...

我们首先将User服务注入AuthController函数，以便可以在saveUser使用其方法。 saveUser方法将一些用户数据作为参数，在我们的示例中，它将是创建新用户时Firebase返回的对象。该用户数据被传递到User服务上的newUserRef方法，如我们先前所见，该方法在/users端点上建立了一个新的用户密钥。

您会看到我们正在为新建立的user建立一些属性（ username和email 。如果然后仅调用AngularFire的$save方法，则数据将被推送到Firebase。

如果保存成功，我们将清除用户输入并将用户重定向到status状态。

设置很多！现在让我们进入有趣的部分，并实际保存和检索用户的状态。

保存状态

我们将所有用户状态保存在Firebase数据存储区的/status端点上。要设置该连接，让我们创建一个名为Status的新服务。

// components/status/statusService.js

(function() {

  'use strict';

  angular
    .module('statusApp')
    .factory('Status', StatusService);

  function StatusService($firebaseArray) {
    var ref = new Firebase("https://statusapp.firebaseio.com/status");
    return $firebaseArray(ref);
  }

})();

在此服务中，我们看到了第三个AngularFire服务包装器$firebaseArray firebaseArray，该包装器用于设置同步集合。

有了Status服务，我们现在可以在控制器中使用它，该控制器负责将状态数据提供给视图并添加新状态。

// components/status/statusController.js

(function() {

  'use strict';

  angular
    .module('statusApp')
    .controller('StatusController', StatusController);

  function StatusController($rootScope, Status, md5) {

    var vm = this;  

    vm.addStatus = addStatus;
    vm.md5 = md5;
    vm.statusData = Status;

    function addStatus() {
      if(vm.statusText) {       
        vm.statusData.$add({

          // Add the status data to Firebase
          date: Firebase.ServerValue.TIMESTAMP,
          text: vm.statusText,
          user: {
            username: $rootScope.loggedInUserData.username,
            email: $rootScope.loggedInUserData.email
          }
        });
        vm.statusText = '';
      }
    }
  }

})();

我们可以通过简单地调用Status服务并将该调用分配给键来获取所有状态数据作为数组，这就是我们在vm.statusData = Status所做的。现在，我们将能够在我们的视图中对该数据进行ng-repeat ，我们将在下面看到。

我们希望获取Gravatar图像供用户在其状态更新旁边显示，这需要我们对他们的电子邮件地址进行哈希处理。我们将在视图中维护所有这些权利，以使事情保持简单，但是要做到这一点，我们需要访问模板中的Angular MD5。这可以通过设置vm.md5 = md5来完成。

在我们的addStatus方法中，我们首先检查视图中是否存在状态条目，如果存在，则使用AngularFire的$add方法将条目添加到数据存储中。我们传入带有一些额外数据的对象，包括与服务器上实际时间戳相等的日期。使用Firebase服务器的时间戳很重要，因为它是记录条目的“正式”时间。如果我们依靠用户自己计算机上的时间戳，那么通过有线发送数据时的小延迟将意味着数据记录的实际时间不准确，这可能导致以后数据顺序错误。

您会看到在传递给$add方法的user对象中，我们正在设置username和email密钥，这些username和email密钥从$rootScope中获取数据。我们尚未为此设置$rootScope ，但是我们将在下一部分中进行设置。

最后，在添加状态后，我们清除vm.statusText字段。

现在控制器就位，让我们进入模板。

<!-- components/status/statusView.html -->

<md-input-container>
  <label>Status</label>
  <textarea ng-model="status.statusText" type="text"></textarea>
</md-input-container>
<md-button class="md-raised md-warn" ng-click="status.addStatus()">Post</md-button>

<md-content>
  <md-list>
    <md-list-item class="md-3-line" ng-repeat="statusItem in status.statusData | orderBy:'-date'">
      <img ng-src="http://www.gravatar.com/avatar/{{status.md5.createHash(statusItem.user.email)}}" class="face" alt="{{statusItem.user.username}}">
      <div class="md-list-item-text">
        <h3>{{statusItem.user.username}}</h3>
        <span>{{statusItem.date | date:'mediumDate'}}</span>
        <p>{{statusItem.text}}</p>          
      </div>
      <md-divider md-inset></md-divider>
    </md-list-item>
  </md-list>
</md-content>

在视图的顶部，我们有一个文本区域和“提交”按钮，供用户记录其状态。我们将ng-model设置为等于statusText键， ng-click在提交按钮上ng-click以等于addStatus 。

为了显示保存的状态，我们使用Angular Material的md-list-item元素，并在其上设置ng-repeat来遍历状态数组。您会看到我们在这里按日期排序，但是相反，因此我们在顶部显示最新状态。为此，我们可以简单地在date前面加上一个负号，以便得到orderBy:'-date' 。

要为我们的用户获取Gravatar图像，我们只需要将img标签的ng-src设置为Gravatar的域，并在最后添加用户的哈希电子邮件地址即可。由于我们已经在控制器中引用了Angular MD5，因此现在可以在视图中使用它。我们调用createHash方法并传递用户的电子邮件地址以生成哈希。

从那里，我们仅显示状态更新的用户名，日期和文本。如果一切顺利，您应该看到以下内容：

实时状态应用程序的屏幕截图4

将当前用户添加到$ rootScope

如前所述，为了使addStatus方法正常工作，我们需要向$rootScope添加一些属性，这些属性引用当前登录用户的数据。我们可以通过将Angular的$on事件侦听器与UI Router附带的$stateChangeStart事件一起使用，在app.js文件的run方法中执行此操作。本质上，我们想要的是从我们之前设置的/users端点获取登录用户的数据，并在新用户注册时填充该数据。为了完成此步骤，我们将使用前面在User服务中看到的几种方法。

//app.js

(function() {

  'use strict';

  angular
    .module('statusApp', ['firebase', 'ngMaterial', 'angular-md5', 'ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

    // If a route other than status is requested,
    // go to the auth route
    $urlRouterProvider.otherwise('/auth');

    $stateProvider
      .state('auth', {
        url: '/auth',
        templateUrl: 'components/auth/authView.html',
        controller: 'AuthController as auth'
      })
      .state('status', {
        url: '/status',
        templateUrl: 'components/status/statusView.html',
        controller: 'StatusController as status'
      });
    })
    .run(function($rootScope, $state, User) {

      // Listen for changes to the state and run the code
      // in the callback when the change happens
      $rootScope.$on('$stateChangeStart', function() {

        // Use the User service to get the currently
        // logged-in user from local storage
        var loggedInUser = User.getLoggedInUser();

        // Check that we actually have a logged-in user
        // saved in local storage
        if(loggedInUser) {

          // Use the getUserData method on the User service
          // to grab the data from the /users endpoint in
          // Firebase for the logged-in user
          $rootScope.loggedInUserData = User.getUserData(loggedInUser.uid);
        }
      });
    });

})();

在run方法中，我们在听的更改应用程序的状态，例如，在用户登录或注册后会被重定向到status的状态。发生这种情况时，我们想使用User服务获取当前登录的用户，该用户依赖于使用Firebase通过键firebase:session::statusapp为用户存储在本地存储中的数据。如果在那里存储了数据，我们想在User服务上调用getUserData方法，并为我们的登录用户传递uid 。然后，从该调用返回的数据将放在$rootScope的loggedInUserData属性中，该属性使我们可以在应用程序中进行访问。

现在，我们在$rootScope上拥有了当前用户的数据，我们可以在StatusController访问它，这样，当用户进行状态更新时，其用户名和电子邮件将随其状态一起保存。

删除状态

我们在这里要做的最后一件事是使已登录的用户能够删除自己的状态。为此，我们可以使用AngularFire提供的$remove方法。让我们在StatusController中创建一个新方法来处理删除。

// components/status/statusController.js

(function() {

  'use strict';

  angular
    .module('statusApp')
    .controller('StatusController', StatusController);

  function StatusController($rootScope, Status, md5) {

    var vm = this;

    vm.addStatus = addStatus;
    vm.deleteStatus = deleteStatus;
    vm.md5 = md5;
    vm.statusData = Status;

    function addStatus() {
      if(vm.statusText) {

        // Add the status data to Firebase
        vm.statusData.$add({
          date: Firebase.ServerValue.TIMESTAMP,
          text: vm.statusText,
          user: {
            username: $rootScope.loggedInUserData.username,
            email: $rootScope.loggedInUserData.email
          }
        });
        vm.statusText = '';
      }
    }

    function deleteStatus(status) {

      // Remove the status that was passed in
      // from the views
      vm.statusData.$remove(status);
    }
  }

})();

我们添加了一个名为vm.deleteStatus的方法，该方法引用了新定义的deleteStatus函数。这将接受一个状态，并使用AngularFire的$remove将其从Firebase中删除，并自动更新视图以反映该删除。使用此方法后，我们需要在视图中使用它。

<!-- components/status/statusView.html -->

...

<md-content>
  <md-list>
    <md-list-item class="md-3-line" ng-repeat="statusItem in status.statusData | orderBy:'-date'">
      <img ng-src="http://www.gravatar.com/avatar/{{status.md5.createHash(statusItem.user.email)}}" class="face" alt="{{statusItem.user.username}}">
      <div class="md-list-item-text">
        <h3>{{statusItem.user.username}}</h3>
        <span>{{statusItem.date | date:'mediumDate'}}</span>
        <p>{{statusItem.text}}</p>                
      </div>
      <md-divider md-inset></md-divider>
      <md-icon class="remove-status" 
          ng-if="statusItem.user.username === loggedInUserData.username" 
          ng-click="status.deleteStatus(statusItem)">
          X
      </md-icon>
    </md-list-item>
  </md-list>
</md-content>

您会在这里看到我们已经向视图添加了一个新的md-icon元素。 ng-if指令表示，仅当状态的用户名等于当前登录用户的用户名时，才希望包含此元素。这样，删除状态的选项仅显示给该状态的所有者。我们将ng-click设置为在StatusController创建的deleteStatus方法，并传入当前statusItem 。现在，当用户单击X时，该状态将被删除。

实时状态应用程序的屏幕截图1

添加您自己的Firebase帐户

使用状态应用程序来获取自己的Firebase帐户非常容易。您首先需要注册Firebase ，这将使您可以访问免费的入门级。注册后，通过在信息中心中选择“创建新应用”来添加一个应用，并提供您喜欢的名称。接下来，您需要通过选择“管理应用程序”，然后从边栏中选择“登录和验证”并选中“启用电子邮件和密码验证”旁边的框来启用简单验证。最后，您需要通过将statusapp三个不同文件中的应用程序名称来更改应用程序与之通信的Firebase帐户的名称：

组件/auth/authService.js
组件/状态/statusService.js
组件/用户/userService.js

有关安全性的注意事项

在正式投入生产之前，我们确实确实需要为应用程序增加一层安全保护。没有它，了解Firebase如何工作的用户可能会篡改该应用程序，并创建和删除属于其他用户的状态。具体来说，我们需要向我们的应用添加规则，以定义谁可以做什么。例如，我们必须说，必须对用户进行身份验证才能添加新状态，并且用户只有拥有状态才能删除状态。

Firebase规则用JSON编写，可以在应用程序仪表板的“安全和规则”选项卡中定义。要了解有关Firebase规则以及如何在您的应用程序中实现它们的更多信息，请阅读有关基于用户的安全性。

结语

在本教程中，我们已经看到了如何使用AngularFire和Angular Material来组合AngularJS和Firebase应用程序的样式。我们非常关注应用程序的身份验证部分，还研究了如何创建和删除用户状态。

希望当您为下一个项目实施Firebase时，这对您有用。我很想在评论中听到您正在从事的工作！

翻译自: https://www.sitepoint.com/real-time-status-update-app-angularjs-firebase/

firebase使用

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
firebase使用_使用AngularJS和Firebase构建实时状态更新应用

firebase使用如果您花了很多时间来使用AngularJS，那么您可能会熟悉Firebase ，它是一种实时数据存储，可以非常轻松地在任何平台上保存和同步数据。 Firebase为其平台（称为AngularFire）提供了AngularJS绑定，这使使用Firebase API更加容易。在本教程中，我们将创建一个简单的状态更新应用程序，该应用程序将让我们看到AngularJS和Fire...
复制链接

扫一扫