zoukankan      html  css  js  c++  java
  • [AngularFire] Firebase OAuth Login With Custom Firestore User Data

    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']);
                 }
             })
      }
    }
  • 相关阅读:
    SSM中(Spring-SpringMVC-Mybatis)(一:概念)
    java中的==和equals()
    JAVA之二叉查找树
    Java中堆与栈
    java的运行机制(基础)
    覆盖(重写),重构,重载的区别
    JAVA多线程基础
    java中的类修饰符、成员变量修饰符、方法修饰符
    JAVA中的流程控制语句
    JAVA中的构造函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7770437.html
Copyright © 2011-2022 走看看