Использование FirebaseUI с AngularFire2

Question

Я не нашел никаких образцов. Можно ли использовать FirebaseUI с AngularFire2? AFAIK Пользовательский интерфейс не является частью AngularFire2.

Answer 1

Не существует прямой интеграции между FirebaseUI (для Интернета) и AngularFire2.

AngularFire2 имеет встроенные примитивы входа, которые интегрируются с функциями входа более низкого уровня в JavaScript SDK для проверки подлинности Firebase. Подробнее об этом см. В разделе AngularFire2 documentation on user authentication.

Но, учитывая, что как AngularFire2, так и FirebaseUI-Web построены поверх SDK для проверки подлинности Firebase, они, вероятно, будут работать вместе отлично. Если вы start a sign-in flow from FirebaseUI, он будет в конце trigger an onAuthStateChanged() event на уровне SDK. Это same event that AngularFire2 listens to, чтобы запустить его собственное событие onAuth().

Answer 2

Да, 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: Init FirebaseUI в обслуживании (так, что это происходит только один раз) , и передать ему экземпляр auth, созданный AngularFire.

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

3: Визуализация пользовательского интерфейса в компоненте

@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