如何在 Angular 5 应用程序中使用 Firebase（Authentication / Firestore）？-JavaScript中文网-JavaScript教程资源分享门户

Firebase 是一个 Google 开发的移动和网络应用程序开发平台，它提供了一系列工具和服务，使得开发者可以更快地构建高质量的应用程序。Firebase 提供了多种服务，其中最受欢迎的是 Firebase Authentication 和 Firebase Firestore 服务。本文将介绍如何在 Angular 5 应用程序中使用这两个 Firebase 服务。

Firebase Authentication

Firebase Authentication 是一个用户身份验证服务，它提供了多种身份验证方法，例如电子邮件/密码、Google、Facebook、Twitter 等。在 Angular 5 应用程序中使用 Firebase Authentication 很简单，只需要按照以下步骤进行操作：

安装 Firebase 和 AngularFire 库。

npm install firebase @angular/fire --save

在 app.module.ts 中导入 AngularFireModule 和 AngularFireAuthModule。

// javascriptcn.com 代码示例
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    // ...
  ],
  // ...
})
export class AppModule { }

在需要使用 Firebase Authentication 的组件中导入 AngularFireAuth。

import { AngularFireAuth } from '@angular/fire/auth';

在组件的构造函数中注入 AngularFireAuth。

constructor(private afAuth: AngularFireAuth) { }

使用 AngularFireAuth 提供的方法进行身份验证。

this.afAuth.auth.signInWithEmailAndPassword(email, password)
  .then(userCredential => {
    // 登录成功
  })
  .catch(error => {
    // 登录失败
  });

以上步骤就是在 Angular 5 应用程序中使用 Firebase Authentication 的基本操作。当然，Firebase Authentication 还提供了很多其他的方法，例如注册、注销、重置密码等，具体可以参考 Firebase 文档。

Firebase Firestore

Firebase Firestore 是一个云托管的 NoSQL 数据库服务，它提供了实时同步数据的功能，可以轻松地在多个客户端之间共享数据。在 Angular 5 应用程序中使用 Firebase Firestore 也很简单，只需要按照以下步骤进行操作：

安装 Firebase 和 AngularFire 库。

npm install firebase @angular/fire --save

在 app.module.ts 中导入 AngularFireModule 和 AngularFirestoreModule。

// javascriptcn.com 代码示例
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    // ...
  ],
  // ...
})
export class AppModule { }

在需要使用 Firebase Firestore 的组件中导入 AngularFirestore。

import { AngularFirestore } from '@angular/fire/firestore';

在组件的构造函数中注入 AngularFirestore。

constructor(private afs: AngularFirestore) { }

使用 AngularFirestore 提供的方法进行数据操作。

// javascriptcn.com 代码示例
this.afs.collection('users').doc('user1').set({
  name: '张三',
  age: 20
})
  .then(() => {
    // 写入成功
  })
  .catch(error => {
    // 写入失败
  });

以上步骤就是在 Angular 5 应用程序中使用 Firebase Firestore 的基本操作。当然，Firebase Firestore 还提供了很多其他的方法，例如查询、更新、删除等，具体可以参考 Firebase 文档。

示例代码

下面是一个完整的示例代码，演示了如何在 Angular 5 应用程序中使用 Firebase Authentication 和 Firebase Firestore。

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="login()">登录</button>
      <button (click)="logout()">注销</button>
      <button (click)="addUser()">添加用户</button>
      <button (click)="getUser()">获取用户</button>
    </div>
  `
})
export class AppComponent {
  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) { }

  login() {
    this.afAuth.auth.signInWithEmailAndPassword('test@example.com', '123456')
      .then(userCredential => {
        console.log('登录成功', userCredential.user);
      })
      .catch(error => {
        console.error('登录失败', error);
      });
  }

  logout() {
    this.afAuth.auth.signOut()
      .then(() => {
        console.log('注销成功');
      })
      .catch(error => {
        console.error('注销失败', error);
      });
  }

  addUser() {
    this.afs.collection('users').doc('user1').set({
      name: '张三',
      age: 20
    })
      .then(() => {
        console.log('添加用户成功');
      })
      .catch(error => {
        console.error('添加用户失败', error);
      });
  }

  getUser() {
    this.afs.collection('users').doc('user1').get()
      .subscribe(userSnapshot => {
        console.log('获取用户成功', userSnapshot.data());
      }, error => {
        console.error('获取用户失败', error);
      });
  }
}

总结

Firebase 是一个功能强大的移动和网络应用程序开发平台，它提供了多种工具和服务，使得开发者可以更快地构建高质量的应用程序。Firebase Authentication 和 Firebase Firestore 是 Firebase 中最受欢迎的两个服务，它们可以帮助开发者轻松地实现用户身份验证和数据管理。本文介绍了如何在 Angular 5 应用程序中使用 Firebase Authentication 和 Firebase Firestore，希望能对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657ac1a6d2f5e1655d5382de