typescript - Hur man autentiserar användare och sparar deras uppgifter

Jag har försökt läsa angularfire2-dokumentationen och har kommit hit. Min autentiseringstjänst kallar angularfire.auth.login. Jag har prenumererat på denna funktion och jag vill spara användarinformationen som returneras, till databasen.

Typescript-kompilatorn returnerar fel:

Fel: Typescript hittade följande fel: /Users/macbook/dev/app/kichenclub/tmp/broccoli_type_script_compiler-input_base_path-nMnfGgj9.tmp/0/src/app/auth.service.ts (12, 25): Egenskapen 'displayName' finns inte på typen 'FirebaseAuthState'.

och samma för alla 'displayName'.

Är jag på rätt väg, ens? Hur annars ska man lösa detta.

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

Låt mig veta om ytterligare information behövs.

Till sist, tack för att du tittade förbi. :)

Svar #1

Jag tog en titt på angularfire2-källkoden på GitHub och jag undersökte FirebaseAuthState-gränssnittet, du kan hitta det här. Du kan se att TypeScript-gränssnittet i sig inte har en egenskap som heter 'displayName'. Däremot visar det att det finns nullbara typer som verkar innehålla den data du letar efter.

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;
}

Jag tror att du kommer vilja ta en närmare titt på auth.facebook-egenskapen. För att få en bättre titt på detaljerna skulle jag helt enkelt kommentera ut koden i din subscribe-metod och bara skriva ut objektet till konsolen och titta på det i din webbläsare med hjälp av webbläsarens utvecklarverktyg. Till exempel något som detta.

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
  //});
});

Detta kommer att låta dig titta närmare på datan inne i auth.facebook.