Verwenden FirebaseUI mit AngularFire2

Question

Ich habe keine Proben gefunden. Ist es möglich, die FirebaseUI mit AngularFire2 zu verwenden? AFAIK die Benutzeroberfläche ist nicht Teil von AngularFire2.

Answer 1

Es gibt tatsächlich keine direkte Integration zwischen FirebaseUI (für das Web) und AngularFire2.

AngularFire2 verfügt über integrierte Anmeldeelemente, die in die untergeordnete Anmeldefunktion des Firebase Authentication JavaScript SDK integriert sind. Mehr dazu finden Sie unter AngularFire2 documentation on user authentication.

Aber da sowohl AngularFire2 als auch FirebaseUI-Web auf dem Firebase Authentication JavaScript SDK basieren, funktionieren sie wahrscheinlich auch gut zusammen. Wenn Sie start a sign-in flow from FirebaseUI, wird es am Ende trigger an onAuthStateChanged() event auf der SDK-Ebene. Das ist die same event that AngularFire2 listens to, um ihr eigenes Ereignis onAuth() auszulösen.

Answer 2

Ja, AngularFire und FirebaseUI können zusammenarbeiten. Sie müssen:

1: Import FirebaseUI und geben ihm den Zugang zu Feuerbasis (zB vor 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: Init FirebaseUI in einem Dienst (so dass es passiert nur einmal) und übergeben Sie die von AngularFire erstellte Authentifizierungsinstanz.

constructor(private af_auth: AngularFireAuth){ 
    this.fui_auth = new firebaseui.auth.AuthUI(this.af_auth.auth) 
} 

3: Übertragen Sie die Benutzeroberfläche in einer Komponente

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

Es gibt auch a module available, aber es leidet zur Zeit von this issue