Wie authentifiziere ich Benutzer und speichere ihre Details

Question

Ich habe versucht, angularfire2 Dokumente zu lesen, und bin bis hier heraufgekommen. Mein Authentifizierungsdienst ruft angularfire.auth.login auf. Ich habe diese Funktion abonniert und möchte die Benutzerinfo, die zurückgegeben wird, in der Datenbank speichern.

Typoskript Compiler gibt Fehler:

Error: Typescript found the following errors: /Users/macbook/dev/app/kichenclub/tmp/broccoli_type_script_compiler-input_base_path-nMnfGgj9.tmp/0/src/app/auth.service.ts (12, 25): Property 'displayName' does not exist on type 'FirebaseAuthState'.

und das gleiche für alle 'display'.

Bin ich in die richtige Richtung, sogar? Wie könnte man das anders machen?

authentication.service.ts:

import { Injectable } from '@angular/core'; 
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2'; 

@Injectable() 
export class AuthService { 
    private userModel= this.af.database.object('/users'); 
    constructor(private af: AngularFire) { 
    this.af.auth.subscribe((auth) => { 
     console.log(auth); 
     this.userModel.set({ 
     uid: auth.uid, 
     firstName: auth.displayName.split(0, auth.displayName.lastIndexOf(' ')), 
     lastName: auth.displayName.split(auth.displayName.lastIndexOf(' '), auth.displayName.length), 
     displayPic: auth.photoURL, 
     provider:auth.provider 
     }); 
    }); 
    } 

    public loginFacebook(): void { 
    this.af.auth.login({ 
     provider: AuthProviders.Facebook, 
     method: AuthMethods.Popup 
    }) 
    } 
} 

Lassen Sie mich wissen, ob weitere Informationen erforderlich sind.

Zum Schluss, danke für Ihren Besuch. :)

Answer 1

Ich habe mir den Angularfire2-Quellcode auf GitHub angesehen und das FirebaseAuthState-Interface untersucht, Sie finden es unter here. Sie können sehen, dass das TypeScript-Interface selbst keine Eigenschaft namens "displayName" hat. es wird jedoch zeigen, dass es ein Nullable-Typen, die die Daten enthalten, erscheinen Sie für

export interface FirebaseAuthState { 
    uid: string; 
    provider: AuthProviders; 
    auth: firebase.User; 
    expires?: number; 
    github?: CommonOAuthCredential; 
    google?: GoogleCredential; 
    twitter?: TwitterCredential; 
    facebook?: CommonOAuthCredential;//<---based on your code I think this is what you're looking for. 
    anonymous?: boolean; 
} 

suchen Ich denke, dass Sie einen genaueren Blick auf die auth.facebook Eigenschaft nehmen wollen. Um einen besseren Einblick in die Details zu bekommen, würde ich einfach den Code in der subscribe-Methode auskommentieren und das Objekt einfach auf die Konsole schreiben und es mit Browser-Entwicklertools in Ihrem Browser ansehen. Zum Beispiel so etwas.

this.af.auth.subscribe((auth) => { 
    console.log(auth); 
    //this.userModel.set({ 
    //uid: auth.uid, 
    //firstName: auth.displayName.split(0, auth.displayName.lastIndexOf(' ')), 
    //lastName: auth.displayName.split(auth.displayName.lastIndexOf(' '), auth.displayName.length), 
    //displayPic: auth.photoURL, 
    //provider:auth.provider 
    //}); 
}); 

Dies ermöglicht Ihnen, die Daten in auth.facebook genauer zu betrachten.