将 FirebaseUI 与 AngularFire2 一起使用

Posted

技术标签:

【中文标题】将 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)

以上是关于将 FirebaseUI 与 AngularFire2 一起使用的主要内容,如果未能解决你的问题,请参考以下文章

无法将FirebaseUI与片段一起使用

firebaseui-ios FirebaseTableViewDataSource 与 UITableView 同步

Firebase Auth 与 firebaseui-web 在身份验证后不会重定向

FirebaseUi - Swift - 将 UITableViewCell 的值转换为自定义类

无法将 java.lang.String 类型的对象转换为类型 - FirebaseUI

将 FirebaseUI-IOS 与自定义 UICollectionViewCell 一起使用时出错