如何验证用户并保存其详细信息

时间:2016-07-31 11:06:48

标签: typescript angular firebase firebase-authentication angularfire2

我已经尝试过阅读angularfire2文档,并且已经到了这里。我的身份验证服务调用angularfire.auth.login。我订阅了这个函数,我想将返回的userinfo保存到数据库中。

Typescript编译器返回错误:

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'.

和所有'displayName'相同。

我是否朝着正确的方向前进?如何解决这个问题。

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

如果需要进一步的信息,请告诉我。

最后,感谢您的光临。 :)

1 个答案:

答案 0 :(得分:2)

我看了一下GitHub上的angularfire2源代码,我检查了FirebaseAuthState接口,你可以找到它here。您可以看到TypeScript接口本身没有名为' displayName'的属性。但是,它确实显示存在可以为您保存所需数据的可空类型

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

我想您需要仔细查看auth.facebook属性。为了更好地了解细节,我只需在您的订阅方法中注释掉代码,然后将对象写入控制台,并使用浏览器开发人员工具在浏览器中查看它。例如,像这样的东西。

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

这样您就可以仔细查看auth.facebook中的数据。

相关问题