私には分かりませんが、わかりません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
にも便利になり、素晴らしいことです。
ご意見、ご提案は大きな助けになります。