将 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-ios FirebaseTableViewDataSource 与 UITableView 同步
Firebase Auth 与 firebaseui-web 在身份验证后不会重定向
FirebaseUi - Swift - 将 UITableViewCell 的值转换为自定义类