使用 Google OAuth in Angular 12 with @angular/fire@^7.0.0 firebase@^9.0.0

Question

在 app.module.ts

中导入 angular/file 个模块后

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

如何在惰性特色模块上管理 Auth 服务？

Answer 1

我认为他们还没有更新文档。我不得不通过反复试验弄清楚：

app.module.ts

provideAuth(() => getAuth()),

auth.service.ts

import {
  Auth,
  signOut,
  signInWithPopup,
  GoogleAuthProvider,
  user
} from '@angular/fire/auth';

...

export class AuthService {

  user$: Observable<any>;

  constructor(private auth: Auth) {
    this.user$ = user(this.auth);
  }

  logout(): void {
    signOut(this.auth);
  }

  login(): void {
    signInWithPopup(this.auth, new GoogleAuthProvider);
  }

  async isLoggedIn(): Promise<boolean> {

    // only use in code, use observable in template
    return !! await this.user$.pipe(take(1)).toPromise();
  }

}

J

使用 Google OAuth in Angular 12 with @angular/fire@^7.0.0 firebase@^9.0.0

Using Google OAuth in Angular 12 with @angular/fire@^7.0.0 firebase@^9.0.0

angular

firebase

firebase-authentication

angularfire2

angular12