在Firebase数据库中存储用户额外信息的实现方法

Hey there! Let's walk through exactly how to store extra user fields in Firebase (we'll use Firestore here since it's the most common choice for structured user data) and retrieve them later in your Ionic/Angular app. I'll tie this directly to the code snippet you shared.

Step 1: Update Your User Interface #

First, make sure your User interface includes all the custom fields you want to store. Add them right alongside the default auth fields:

// src/interfaces/user.ts
export interface User {
  uid: string;
  email: string;
  displayName?: string;
  // Add your custom fields here!
  nickname?: string;
  phoneNumber?: string;
  favoriteGenre?: string; // Example custom field
}

Step 2: Modify Your UserData Provider #

You'll need to add methods in your UserData provider to save custom fields to Firestore and fetch the full user data later. Make sure you've imported AngularFireAuth and AngularFireFirestore (if you haven't already set up AngularFire in your app, that's a prerequisite!).

// src/providers/user-data.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireFirestore } from '@angular/fire/firestore';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from '../interfaces/user';

@Injectable()
export class UserData {
  constructor(
    private afAuth: AngularFireAuth,
    private afStore: AngularFireFirestore
  ) {}

  // Save custom user fields to Firestore
  async saveCustomUserFields(customData: Partial<User>) {
    try {
      const currentUser = await this.afAuth.currentUser;
      if (currentUser) {
        // Use the user's UID as the document ID (keeps data organized)
        await this.afStore.collection('users').doc(currentUser.uid).set(
          { ...customData },
          { merge: true } // Critical: merges new fields without overwriting existing data
        );
        console.log('Custom fields saved successfully!');
      }
    } catch (error) {
      console.error('Failed to save custom fields:', error);
      throw error; // Let the component handle the error
    }
  }

  // Fetch the full user profile (including custom fields)
  getFullUserProfile(): Observable<User | null> {
    return this.afAuth.authState.pipe(
      switchMap(user => {
        if (user) {
          // Pull the user's document from Firestore
          return this.afStore.collection('users').doc<User>(user.uid).valueChanges();
        } else {
          return of(null); // Return null if no user is logged in
        }
      })
    );
  }
}

Step 3: Use These Methods in Your Component #

Now you can call these methods from your page component (like a profile edit page) to save and load custom user data:

// Your page component (e.g., profile.ts)
import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GoogleAnalytics } from '@ionic-native/google-analytics';
import { UserData } from '../../providers/user-data';
import { User } from '../../interfaces/user';

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html'
})
export class ProfilePage implements OnInit {
  // Bind this to your HTML form inputs
  userCustomData: Partial<User> = {
    nickname: '',
    phoneNumber: ''
  };

  constructor(
    public navCtrl: NavController,
    private ga: GoogleAnalytics,
    private userData: UserData
  ) {}

  ngOnInit() {
    // Load existing custom fields when the page initializes
    this.userData.getFullUserProfile().subscribe(user => {
      if (user) {
        this.userCustomData.nickname = user.nickname;
        this.userCustomData.phoneNumber = user.phoneNumber;
      }
    });
  }

  // Trigger this when the user submits their custom data
  onSaveCustomData() {
    this.userData.saveCustomUserFields(this.userCustomData)
      .then(() => {
        alert('Your profile has been updated!');
      })
      .catch(error => {
        alert(`Oops, something went wrong: ${error.message}`);
      });
  }
}

Key Notes to Remember #

• Firestore Security Rules: Don't forget to set up secure rules in the Firebase Console to ensure users can only access their own data:

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /users/{userId} {
        allow read, write: if request.auth != null && request.auth.uid == userId;
      }
    }
  }
  

• merge: true: This parameter ensures you don't overwrite existing user data (like email or displayName) when saving custom fields. Always use this unless you intentionally want to replace the entire document.
• Realtime Updates: The valueChanges() method returns an observable, so your UI will automatically update if the user's data changes elsewhere.

内容的提问来源于stack exchange，提问作者javapatriot