zoukankan      html  css  js  c++  java
  • [Angular2Fire] Firebase auth (Google, Github)

    To do auth, first you need to go firebase.console.com to enable the auth methods, for example, enable google, github...

    Enable goolge is quite simple, just one click, enable Github, Twitter, you need to do more configuration.

    Follow the link: https://firebase.google.com/docs/auth/web/github-auth

    After successfully enable it, we create a service to do the auth:

    import {AuthProviders, FirebaseAuthState, FirebaseAuth} from "angularfire2";
    import {Injectable} from "@angular/core";
    
    @Injectable()
    export class AuthService {
    
      private authState: FirebaseAuthState = null;
    
      constructor(public auth$: FirebaseAuth) {
        auth$.subscribe((state: FirebaseAuthState) => {
          this.authState = state;
        });
      }
    
      get authenticated(): boolean {
        return this.authState !== null;
      }
    
      get id(): string {
        return this.authenticated ? this.authState.uid : '';
      }
    
      signIn(provider: number): firebase.Promise<FirebaseAuthState> {
        return this.auth$.login({provider})
          .catch(error => console.log('ERROR @ AuthService#signIn() :', error));
      }
    
      signInWithGithub(): firebase.Promise<FirebaseAuthState> {
        return this.signIn(AuthProviders.Github)
      }
    
      signInWithGoogle(): firebase.Promise<FirebaseAuthState> {
        return this.signIn(AuthProviders.Google);
      }
    
      signInWithTwitter(): firebase.Promise<FirebaseAuthState> {
        return this.signIn(AuthProviders.Twitter);
      }
    
      signOut(): void {
        this.auth$.logout();
      }
    }

    Using it in controller: 

    <section class="signup">
      <button md-button (click)="signInWithGoogle()">Google</button>
      <button md-button (click)="signInWithTwitter()">Twitter</button>
      <button md-button (click)="signInWithGithub()">Github</button>
    </section>
    import {Component, OnInit} from '@angular/core';
    import {AuthService} from "../shared";
    import {Router} from "@angular/router";
    
    @Component({
      selector: 'app-signup',
      templateUrl: './signup.component.html',
      styleUrls: ['./signup.component.css']
    })
    export class SignupComponent implements OnInit {
    
      constructor(private auth: AuthService, private router: Router) {
    
      }
    
      ngOnInit() {
      }
    
      signInWithGithub(){
        this.auth.signInWithGithub()
          .then(this.postSignIn.bind(this))
      }
    
      signInWithTwitter(){
        this.auth.signInWithTwitter()
          .then(this.postSignIn.bind(this))
      }
    
      signInWithGoogle(){
        this.auth.signInWithGoogle()
          .then(this.postSignIn.bind(this))
      }
    
      postSignIn() {
        console.log("Auth id: ", this.auth.id);
        this.router.navigate(['/home']);
      }
    
    }

    Happy Auth!

  • 相关阅读:
    maven创建父子工程
    webservice之jersey简单实用
    EL表达式处理字符串
    oracle不等于1怎么查?
    day_07 搭建Tomcat服务器使用Servlet服务,后端接受前端请求过来的表单数据并使用
    Day_06 流程控制-循环结构-嵌套循环结构的原理解析
    Day05_流程控制02 循环结构
    day_5 流程控制 选择结构的两种常用语句的使用语法
    day_04 运算符详解
    day_03 变量的数据类型详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6014604.html
Copyright © 2011-2022 走看看