如何在 Ionic 中获取当前在 Firebase 中的用户

Firebase 是一个广受欢迎的移动和 Web 应用程序开发平台，提供强大的后端服务，包括身份验证、数据库、存储、分析和推送通知等功能。Ionic 是一个基于 Angular 框架的混合移动应用程序开发框架，可以轻松地将 Web 应用程序构建为本机应用程序，并与 Firebase 集成。

当用户使用 Firebase 身份验证功能登录应用程序时，Ionic 应用程序需要知道当前已登录的用户是谁。在本文中，我们将介绍如何在 Ionic 中获取 Firebase 中当前用户的详细信息。

首先，确保已在 Ionic 应用程序中安装 firebase，以及 Angular 的 AngularFireAuth 库：

npm install firebase @angular/fire

接下来，在应用程序的模块文件中，导入 AngularFireModule 和 AngularFireAuthModule：

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

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

在 environment.ts 文件中，添加 Firebase 项目的配置：

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR_AUTH_DOMAIN',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_STORAGE_BUCKET',
    messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
    appId: 'YOUR_APP_ID',
    measurementId: 'YOUR_MEASUREMENT_ID'
  }
};

接下来，在组件类中注入 AngularFireAuth：

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { User } from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  user: User;

  constructor(private afAuth: AngularFireAuth) {
    this.afAuth.authState.subscribe(user => {
      this.user = user;
    });
  }
}

在构造函数中，订阅 authState 流以获取当前用户信息。 authState 流提供用户的身份验证状态，包括已登录的用户以及未登录的用户。如果用户已经登录，则 authState 流的 User 对象包含用户的详细信息。在上面的代码中，我们将 user 对象指派为当前用户，以在模板中使用。

最后，在模板文件中，可以使用 NgIf 检查当前用户是否已登录，并显示用户信息：

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic + Firebase
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ng-container *ngIf="user">
    <ion-card>
      <ion-card-header>
        <ion-card-title>{{ user.displayName }}</ion-card-title>
      </ion-card-header>

      <ion-card-content>
        <p>Email: {{ user.email }}</p>
        <p>UID: {{ user.uid }}</p>
      </ion-card-content>
    </ion-card>
  </ng-container>

  <ng-container *ngIf="!user">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Not Logged In</ion-card-title>
      </ion-card-header>

      <ion-card-content>
        <p>Please sign in to access the app.</p>
      </ion-card-content>
    </ion-card>
  </ng-container>
</ion-content>

在这个示例中，我们使用 *ngIf 来检查当前用户是否已登录。如果是，我们将显示卡片，其中包含用户的姓名、电子邮件地址和 UID。否则，我们将显示一条消息，提示用户登录以访问应用程序。

总结：

在本教程中，我们介绍了如何在 Ionic 应用程序中使用 AngularFire 和 Firebase 身份验证来获取当前用户的详细信息。我们介绍了如何订阅 authState 流以侦听用户身份验证状态，并演示了如何在模板中使用 *ngIf 和 User 对象来显示相关的用户信息。