2017-11-09 24 views
0

私には分かりませんが、わかりませんRxJSそのとおりです。サービス経由でFirebaseからユーザUIDを取得

私が作成したサービスとしてFirebaseからユーザのUIDを抽出する方法を知りたいと思います。それをコンポーネント内に実装します。

ここにコードがあります。

ファイル名:auth.service.tsは

import { Router } from '@angular/router'; 
import { Injectable } from '@angular/core'; 

import * as firebase from 'firebase/app'; 
import { AngularFireAuth } from 'angularfire2/auth'; 
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore'; 

import 'rxjs/add/operator/switchMap'; 
import { Observable } from 'rxjs/Observable'; 

declare var $: any; 
declare var jQuery: any; 

interface User { 
    uid: string; 
    email: string; 
    photoURL?: string; 
    displayName?: string; 
} 

@Injectable() 
export class AuthService { 

    user: Observable<User>; 

    constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) { 
     this.user = this.afAuth.authState.switchMap(user => { 
      if (user) { 
       return this.afs.doc<User>(`users/${user.uid}`).valueChanges(); 
      } else { 
       return Observable.of(null); 
      } 
     }) 
    } 

    googleLogin() { 
     const provider = new firebase.auth.GoogleAuthProvider(); 
     return this.oAuthLogin(provider); 
    } 

    githubLogin() { 
     const provider = new firebase.auth.GithubAuthProvider(); 
     return this.oAuthLogin(provider); 
    } 

    private oAuthLogin(provider) { 
     return this.afAuth.auth.signInWithPopup(provider).then((credential) => { 
      this.updateUserData(credential.user) 
     }).catch((err) => { 
      if (err.code === 'auth/account-exists-with-different-credential') { 
       ... 
      } else if (err.code === 'auth/internal-error') { 
       ... 
      } else { 
       ... 
      } 
     }) 
    } 

    private updateUserData(user) { 
     const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`); 

     const data: User = { 
      uid: user.uid, 
      email: user.email, 
      displayName: user.displayName, 
      photoURL: user.photoURL 
     } 

     return userRef.set(data); 
    } 

    signOut() { 
     ... 
    } 

    deleteUser() { 
     ... 
    } 

} 

追加情報:私もすべてのプロパティを取得することができた場合

@angular/animations: 4.2.4 
@angular/common: 4.2.4 
@angular/compiler: 4.2.4 
@angular/core: 4.2.4 
@angular/forms: 4.2.4 
@angular/http: 4.2.4 
@angular/platform-browser: 4.2.4 
@angular/platform-browser-dynamic: 4.2.4 
@angular/router: 4.2.4 
angular2-materialize: 15.1.10 
angularfire2: 5.0.0-rc.3 
core-js: 2.4.1 
firebase: 4.6.1 
font-awesome: 4.7.0 
hammerjs: 2.0.8 
jquery: 2.2.4 
materialize-css: 0.100.2 
rxjs: 5.4.2 
zone.js: 0.8.14 

にも便利になり、素晴らしいことです。

ご意見、ご提案は大きな助けになります。

答えて

1

を注入コンポーネントでこれを使用するには、これは私は現在、私のAuth.Serviceのセットアップを持っているかです。

ユーザー登録時に、ユーザーのUIDをFirebaseのユーザーの詳細に戻して保存するので、そのユーザーのすべてのデータを取得すると、必要なものすべてが得られます。

this.as.user.uidを使用して特定の詳細を取得できます。または他のもの。

 @Injectable() 
     export class AuthService { 

     private userSubject: BehaviorSubject<any> = new BehaviorSubject<any>(false); 

     constructor(private afAuth: AngularFireAuth) { 
      this.afAuth.authState 
      .switchMap(user => user ? this.fb.user(user.uid).valueChanges() : Observable.of(false)) 
      .subscribe(userData => this.userSubject.next(userData)); 
     } 

     get user() { 
      return this.userSubject.value; 
     } 

     get loggedIn() { 
      return !!this.userSubject.value; 
     } 

     userObservable() { 
      return this.userSubject.asObservable(); 
     } 

私の他のコンポーネントでは、私はいつもこのようなユーザーデータを待つことができます。

this.as.userObservable() 
    .filter(res => res) 
    .subscribe(res => this.user = res) 
0

以下は、私の認証サービスのコピーです。私は2つのプロパティ "currentUserId()"と "currentUserDisplayName()"を持っています。

user: Observable<firebase.User>; 
    private userDetails: firebase.User = null; 

    constructor(private firebaseAuth: AngularFireAuth, private router: Router) { 
    this.user = firebaseAuth.authState; 
    this.user.subscribe((user) => { 
     if (user) { 
      this.userDetails = user; 
     } 
     else { 
      this.userDetails = null; 
     } 
    }); 
    } 

    // Returns true if user is logged in 
get authenticated(): boolean { 
    // consider changing to 'return this.userDetails != null' 
    if (this.userDetails == null) { 
     return false; 
    } else { 
     return true; 
    } 
    } 

    // Returns current user UID 
    get currentUserId(): string { 
    return this.authenticated ? this.userDetails.uid : ''; 
    } 

    // Returns current user display name or Guest 
    get currentUserDisplayName(): string { 
     return this.userDetails.displayName || this.userDetails.email; 
    } 

だから、私はBehavioursubjectを使用して好むあなたのAUTHSVCと...

this.authSvc.currentUserId