将 FirebaseUI 与 AngularFire2 结合使用

Question

我还没有找到任何样本。是否可以将 FirebaseUI 与 AngularFire2 一起使用？据我所知，UI 不是 AngularFire2 的一部分。

Answer 1

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

AngularFire2 内置了 sign-in 原语，这些原语与 Firebase 身份验证 JavaScript SDK 的 lower-level sign-in 功能集成。有关这些的更多信息，请参阅 AngularFire2 documentation on user authentication.

但考虑到 AngularFire2 和 FirebaseUI-Web 都构建在 Firebase 身份验证 JavaScript SDK 之上，它们也可能会很好地协同工作。如果您 start a sign-in flow from FirebaseUI, it will in the end trigger an onAuthStateChanged() event on the SDK level. That is the same event that AngularFire2 listens to 触发它自己的 onAuth() 事件。

Answer 2

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

1：导入 FirebaseUI 并授予其访问 Firebase 的权限（例如，在 bootstrap 之前）

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 but it currently suffers from this issue

将 FirebaseUI 与 AngularFire2 结合使用

Use FirebaseUI with AngularFire2

angular

firebase

firebase-authentication

angularfire2

firebaseui