将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
}

为什么你不能像使用Firebase那样import * as firebaseui

2：在服务中初始化FirebaseUI（这样它只发生一次），并传递给它由AngularFire创建的身份验证实例。

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...}})
    }
}

还有一个可用的模块，但目前存在此问题

Answer 2

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

AngularFire2 内置了登录原语，可与 Firebase 身份验证 JavaScript SDK 的较低级别登录功能集成。有关这些的更多信息，请参阅有关用户身份验证的AngularFire2文档。

但鉴于 AngularFire2 和 FirebaseUI-Web 都是建立在 Firebase 身份验证 JavaScript SDK 之上的，它们也可能很好地协同工作。如果您从 FirebaseUI 启动登录流程，最终会在 SDK 级别触发onAuthStateChanged()事件。这与 AngularFire2 监听的事件相同，以触发自己的onAuth()事件。