Angular + Firebase Authentication 登入系統

Angular + Firebase Authentication

Firebae 的功能非常完整，包括上一篇的主要功能 Datebase，還有內建登入系統，Hosting，甚至還有機器學習的工具，真不愧是在 Google 名下的服務。

這篇會將 Angular 加入 Authentication 的功能，而我們只會操作最通用的 Google Login。

Firebase 啟用登入驗證

首先，開啟 Firebase 的主控台，點選左邊的 Authentication。

接著會看到下圖各種可供選擇的登入方式。

點選 Google，啟用他

Angular設置
操作檔案基本上是延續上一篇，Angular+Firestore 的，
這裡引入驗證的 Module

import { AngularFireAuthModule } from '@angular/fire/auth';

同時 @NgModule 中也一定要引入的

AngularFireAuthModule

再回到 app.component.ts

引入

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';

很簡單將 Auth 的 Module 引入

再把它加入 constructor，

private afAuth: AngularFireAuth

再來就是加入登入登出的功能了，

async login() {
   const provider = new firebase.auth.GoogleAuthProvider();
   const credential = await this.afAuth.auth.signInWithPopup(provider);
 }

 logout() {
   this.afAuth.auth.signOut();
 }

localStorage 是我額外加入的，不用加入也沒有關係。

開啟 app.component.html，加入登入登出的按鈕，這裡只有簡單的邏輯，點選 Login 按鈕觸發剛剛的 login()，Logout 亦然。而會由一個 *ngIf 判斷此時是否登入中，決定顯示哪個按鈕。

<div *ngIf="afAuth.authState  | async; let user; else showLogin" class="GoogleSignInButton">
 <button (click)="logout()" mat-flat-button color="warn">
   Logout
 </button>
</div>



<ng-template #showLogin>
 <div class="GoogleSignInButton">
   <button (click)="login()" mat-flat-button>
     <img width="20px" alt="Google &quot;G&quot; Logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"/>
     Login with Google
   </button>
 </div>
</ng-template>