将 FirebaseUI 与 AngularFire2 一起使用

Question

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

Answer 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的影响

Answer 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() 事件。