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] Firebase OAuth Login With Custom Firestore User Data的更多相关文章

  1. Unity编辑器扩展-Custom List, displaying data your way

    本文转自http://catlikecoding.com/unity/tutorials/editor/custom-list/ Custom List, displaying data your w ...

  2. [Firebase] 3. Firebase Simple Login Form

    Using $firebaseSimpleLogin service. Here we use three methods for login, logout, register and getCur ...

  3. Linux - SSH - Password-less login - generate public key - migrate data without password between two VM servers

    SUMMARY:two server : A , Bsource server : Adestination server : Bthe steps of migrate data from A to ...

  4. [AngularFire] Resolve snapshotChanges doesn't emit value when data is empty

    Updated to AngularFire2 v5.0. One important change is that you need to call .snapshotChanges() or .v ...

  5. Data Protection - how to manage expired key?(转载)

    问 According to ASP.NET Key Management: Deleting a key is truly destructive behavior, and consequentl ...

  6. Spring boot --- Spring Oauth(三)

    本节将学习 spring security oauth  实现单点登录 概述 首先我们来了解什么是单点登录.看下面两张图就明白了. 很明显,单点登录最重要解决的就是登录和注销的功能,今天的例子,可以用 ...

  7. Spring boot --- Spring Oauth(一)

       文章部分图片来自参考资料,这篇文章主要讲 spring security  oauth 概述 上一篇我们学习了 SS 中重要的工作原理和几个大概的认证和授权过程.而 spring securit ...

  8. [miniApp] WeChat user login code

    in client/app.js, we put user login logic inside here, so that other module can reuse those code by ...

  9. 基于 OAuth 安全协议的 Java 应用编程

    OAuth 简介 OAuth 是由 Blaine Cook.Chris Messina.Larry Halff 及 David Recordon 共同发起的,目的在于为 API 访问授权提供一个安全. ...

随机推荐

  1. HDU 4939 Stupid Tower Defense 简单DP

    题意: 地图为长为n个单位长度的直线,每通过一个单位长度需要t秒. 有3种塔,红塔可以在当前格子每秒造成x点伤害,绿塔可以在之后格子造成y点伤害,蓝塔可以使通过单位长度的时间增加z秒. 让你安排塔的排 ...

  2. Android向unity发送消息

    有些时候需要Android向unity发送消息,有两种方法实现,一.通过unity再带的消息机制,二.通过注册回调的方式. 一.通过UnityPlayer.UnitySendMessage():方法 ...

  3. JavaScript 回车键绑定登录 事件 常用键位码(keyCode)

    1.回车键绑定登录事件 $(document).keydown(function (e) { if ((e.keyCode || e.which) == 13) { //document.queryS ...

  4. ECNUOJ 2857 编辑距离

    编辑距离 Time Limit:5000MS Memory Limit:65536KBTotal Submit:314 Accepted:128 Description  有两个字符串(仅有英文小写字 ...

  5. javaEE之-------统计站点刷新量

    每一个站点都有自己的统计訪问量,可是少不了server会出现意外情况,(如断电..) 所以就须要我们在站点挂机的前段时间将这个数据存起来. 我们就须要用到站点最大的容器,application,我们採 ...

  6. java基础 this keyword!

    为了程序的可读性,通常将一个类中的表示同一属性的变量进行统一的命名.可是这样做又会导致成员变量与局部变量名字冲突导致无法訪问成员变量.为了解决问题,java中引入了this这个keyword!所以th ...

  7. 洛谷P2633 Count on a tree

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  8. The method getDispatcherType() is undefined for the type HttpServletRequest错误解决方法

    使用Eclipse Luna版本,jdk1.7和tomcat8.0开发JAVA EE应用.写一个简单的JSP部署后访问报JSP编译错误,具体错误信息如下: The method getDispatch ...

  9. msiexec

    msiexec: runCmd = new String[]{ "msiexec", "/i", exeName, "/quiet", &q ...

  10. OpenCV中Mat数据的访问报错

    最近再写一段程序的时候,要访问Mat中的元素.在定义Mat型数据的时候,用 Mat ObjectPoints(48,3,CV_32FC1,0) 对其进行初始化后,用at进行访问时报内存错误. Mat ...