[AngularFire] Firebase OAuth Login With Custom Firestore User Data
2017-11-02 04:01
585 查看
import { NgModule } from '@angular/core'; import { AuthService } from './auth.service'; import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFirestoreModule } from 'angularfire2/firestore'; @NgModule({ imports: [ AngularFireAuthModule, AngularFirestoreModule ], providers: [AuthService] }) export class CoreModule { }
AuthService:
import { Injectable } from '@angular/core'; import { Router } from '@angular/router'; import * as firebase from 'firebase/app'; import { AngularFireAuth } from 'angularfire2/auth'; import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/switchMap' interface User { uid: string; email: string; photoURL?: string; displayName?: string; favoriteColor?: string; } @Injectable() export class AuthService { user: Observable<User>; constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) { //// Get auth data, then get firestore user document || null 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); } private oAuthLogin(provider) { return this.afAuth.auth.signInWithPopup(provider) .then((credential) => { this.updateUserData(credential.user) }) } private updateUserData(user) { // Sets user data to firestore on login 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() { this.afAuth.auth.signOut().then(() => { this.router.navigate(['/']); }); } }
Guard:
import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; import { AuthService} from './auth.service' import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/do'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/take'; @Injectable() export class AuthGuard implements CanActivate { constructor(private auth: AuthService, private router: Router) {} canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean { return this.auth.user .take(1) .map(user => !!user) .do(loggedIn => { if (!loggedIn) { console.log('access denied') this.router.navigate(['/login']); } }) } }
相关文章推荐
- [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor
- Android LoadData和loadDataWithBaseURL
- A Hybrid User and Item-Based Collaborative Filtering with Smoothing on Sparse Data
- change custom cursor base on Fire fox
- 转-WebView loadData与loadDataWithBaseURL用法、区别
- Login failed for user ''.Reason:Not associated with a trusted SQL Server connection.
- 【论文笔记】Information Extraction over Structured Data: Question Answering with Freebase
- Android LoadData和loadDataWithBaseURL
- How to plot line chart with Real-time data at Dialog-base application?
- 操作系统验证连接SQL Server Express发布服务报“Server Object instance on machine server is created with errors ,Bad login User”
- mysq 安装时候进行生成数据库系统时候执行语句 ./scripts/mysql_install_db --user=mysql --basedir=/usr/local/mysql --datadir=/data/mysql 时候报错
- Custom Database Integration with Openfire 3.6.4
- Understanding the error message: “Login failed for user ''. The user is not associated with a trusted SQL Server connect
- VSS 客户端不能访问问题“unable to open user login file\\服务器项目管理目录\data\logedin\用户名.log
- 【Android 进阶:翻译】Get Started With Firebase for Android
- [React Native + Firebase] React Native: Real time database with Firebase -- setup & CRUD
- VSS客户端不能访问问题“unable to open user login file\\服务器项目管理目录\data\logedin\用户名.log ”
- best practice of data structure of firebase database
- Angular 2 User Registration and Login Example & Tutorial - Built with Angular 2.0 Final.
- loadData与loadDataWithBaseURL的区别