angular - 如何将 FirebaseUI 正确配置到我的 Angular 项目中？

Question

我正在开发 Angular 应用程序，我有以下疑问。此应用程序使用 FirebaseUI 库来处理 Firebase 身份验证。过去，我使用它直接将其配置到我的 login 组件中。这次我是按照官方的指导直接配置到app.module.ts文件中(哪种方案更好？)

现在进入我的 app.module.ts 文件，我有这样的东西:

import {
    BrowserModule
} from '@angular/platform-browser';
import {
    NgModule
} from '@angular/core';
import {
    FormsModule
} from '@angular/forms';
import {
    AppComponent
} from './app.component';
import {
    firebase,
    firebaseui,
    FirebaseUIModule
} from 'firebaseui-angular';
import {
    environment
} from '../environments/environment';
import {
    AppRoutingModule
} from './app-routing.module';
import {
    AngularFireModule
} from '@angular/fire';
import {
    AngularFireAuth,
    AngularFireAuthModule
} from '@angular/fire/auth';
import {
    BrowserAnimationsModule
} from '@angular/platform-browser/animations';


import {
    HomeComponent
} from './home/home.component';
import {
    LoginComponent
} from './login/login.component';
import {
    SidebarComponent
} from './sidebar/sidebar.component';

import {
    ButtonModule
} from 'primeng/button';
import {
    SidebarModule
} from 'primeng/sidebar';


const firebaseUiAuthConfig: firebaseui.auth.Config = {
    signInFlow: 'popup',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID

    ],
    //tosUrl: '<your-tos-link>',
    //privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
    credentialHelper: firebaseui.auth.CredentialHelper.NONE
};


@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        SidebarComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ButtonModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFireAuthModule,
        FirebaseUIModule.forRoot(firebaseUiAuthConfig),

        SidebarModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

它工作正常。我的疑问与如何为与 FirebaseUI 组件相关的标签设置自定义名称有关。

正如另一个项目所说，我将其直接配置到我的日志组件中，如下所示:

@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {

    ui: firebaseui.auth.AuthUI;

    constructor(private afAuth: AngularFireAuth,
        private router: Router,
        private ngZone: NgZone) {

    }

    ngOnInit() {

        const uiConfig = {
            signInOptions: [
                firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                firebase.auth.EmailAuthProvider.PROVIDER_ID
            ],
            callbacks: {

                signInSuccessWithAuthResult: this
                    .onLoginSuccessful
                    .bind(this)
            }

        };

        this.ui = new firebaseui.auth.AuthUI(this.afAuth.auth);

        this.ui.start('#firebaseui-auth-container', uiConfig);


    }

    ngOnDestroy() {
        this.ui.delete();
    }

    onLoginSuccessful(result) {

        console.log("Firebase UI result:", result);

        //this.ngZone.run(() => this.router.navigateByUrl('/work-shift-allocator'));
        this.ngZone.run(() => this.router.navigate(['/work-shift-allocator']));

        //this.router.navigate(['/heroes', { id: itemId }]);

    }
}

正如您在最后一个片段(与另一个项目相关)中看到的那样，我将它配置到我的组件中，声明 ** ui: firebaseui.auth.AuthUI;** 变量，然后在其上设置标签的值:

this.ui.start('#firebaseui-auth-container', uiConfig);

我想知道我是否以及如何在我将 FirebaseUI 配置直接声明到 app.module.ts 文件中的项目中做同样的事情。

Answer 1

您问的是根据官方文档直接在 app.module.ts 中配置您的 FirebaseUI 是否是正确的方法。

答案是否 - Google/Firebase 官方文档(可用 here 和 here)实际上没有提到这种方法，甚至没有作为一种选择。

您在当前代码中使用的是围绕(官方)FirebaseUI API 的非官方 Angular 包装器。

即 FirebaseUI-Angular，一个非官方的 Angular 包装器，在 Github 上可用 here .

显然，实现许多有用的 Angular 包装器之一并没有错，例如 FirebaseUI-Angular。在他们的doc ，他们确实指示主要从您的 app.module.ts 中配置它，但这是非标准的。

这里只是我的意见，但我认为直接从官方包中实现 FirebaseUI 应该是更好的选择，如果您需要其他替代包中的某些特定内容，请期待。

我确实在我的几个 Angular 应用程序中使用了官方 FirebaseUI，它与 Angular 配合得很好。无需重大调整/调整。我认为不需要“支持较少”的包装器。

所以，简而言之，我认为最好继续将其直接配置到您的登录组件中 - 正如您过去所做的那样，并按照 Firebase 团队的官方说明。