将 FirebaseUI 与 AngularFire2 一起使用

Posted 2023-02-23

【中文标题】将 FirebaseUI 与 AngularFire2 一起使用

【英文标题】：Use FirebaseUI with AngularFire2

【发布时间】：2017-05-28 07:20:18

【问题描述】：

我没有找到任何样品。是否可以将FirebaseUI 与 AngularFire2 一起使用？ AFAIK UI 不是 AngularFire2 的一部分。

【参考方案1】：

是的，AngularFire 和 FirebaseUI 可以一起工作。您需要：

1：导入 FirebaseUI 并为其授予对 firebase 的访问权限（例如，在引导之前）

import * as firebase from 'firebase/app'

// Attach firebase to window so FirebaseUI can access it
(<any>window).firebase = firebase

// Import FirebaseUI standalone (as its npm.js file causes double firebase code)
import 'firebaseui/dist/firebaseui'  // Imports for side effects only

// Declare `window.firebaseui` that the above import creates
declare global 
    const firebaseui

Why you can't just import * as firebaseui like you do with firebase

2：在服务中初始化 FirebaseUI（使其只发生一次），并将 AngularFire 创建的 auth 实例传递给它。

constructor(private af_auth: AngularFireAuth)
    this.fui_auth = new firebaseui.auth.AuthUI(this.af_auth.auth)

3：在组件中渲染 UI

@Component(
    'selector': 'app-signin',
    'template': '',  // Populated by `fui_auth.start()`
)
export class SigninComp 

    constructor(private user: UserService)

    ngOnInit()
        // Show Firebase UI auth widget
        this.user.fui_auth.start('app-signin', config...)
    

还有a module available，但目前受到this issue的影响

【参考方案2】：

FirebaseUI（用于网络）和 AngularFire2 之间确实没有直接集成。

AngularFire2 内置了与 Firebase 身份验证 javascript SDK 的低级登录功能集成的登录原语。有关这些的更多信息，请参阅AngularFire2 documentation on user authentication。

但鉴于 AngularFire2 和 FirebaseUI-Web 都构建在 Firebase 身份验证 JavaScript SDK 之上，它们很可能也可以很好地协同工作。如果你start a sign-in flow from FirebaseUI，它最终会在SDK级别上trigger an onAuthStateChanged() event。那就是same event that AngularFire2 listens to 触发它自己的onAuth() 事件。

【讨论】：

一个真正可行的例子会非常好。有github.com/RaphaelJenni/FirebaseUIAngularIntegration，但它对我不起作用。 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

除了在app.module.ts 中调用AngularFireModule.initializeApp(firebaseConfig) 之外，似乎还需要重复调​​用firebase.initializeApp(firebaseConfig)。