Angular8でFirebaseを使ってGoogleアカウント認証機能を実装する

AngularにはFirebaseを操作できるAngularFireという素晴らしいモジュールがあったので、試しに使ってみました。

簡単にGoogleアカウント認証機能を実装できたので、紹介します。

環境
手順
1. Firebaseでプロジェクト作成
2. AngularFireのセットアップ
まとめ

環境

前回と変わらず、以下の通りです。

OS: Ubuntu 18.04
Angular: 8.2.14
Angular CLI: 8.3.19
Node.js: 12.13.0

手順

大まかな流れとしては、以下の通りです。

Firebaseでプロジェクト作成
AngularからFirebaseを操作するAngularFireをセットアップ
トップページにGoogleアカウント認証機能を実装

それでは始めましょう。

Firebaseでプロジェクト作成

Firebaseのサイトにアクセスします。
Googleアカウントが必要なので、持っていない場合は新規に取得しましょう。

案内に従ってプロジェクトを作成したら、プロジェクトの設定に移動します。

Project Overview > プロジェクトの設定

以下の部分を記録します。

「全般タブ」のプロジェクトIDと、ウェブAPIキー

「クラウドメッセージング」タブの送信者ID

確認し終わったら、実際に、Aunglarアプリケーションに、Googleアカウントログイン機能を実装していきます。

AngularFireのセットアップ

AngularFireとFirebaseをインストール

$ npm install @angular/fire firebase --save

プロジェクトのパラメーターファイルにFirebaseの設定を追記
「Firebaseのセットアップ」で確認した値を使います。

$ vi src/environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: '<ウェブAPIキー>',
    authDomain: "<プロジェクトID>.firebaseapp.com",
    databaseURL: "https://<プロジェクトID>.firebaseio.com",
    projectId: "<プロジェクトID>",
    storageBucket: "<プロジェクトID>.appspot.com",
    messagingSenderId: "<送信者ID>",
  }
};

@NgModuleの設定

$ vi src/app/app.module.ts

...
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';
...

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

ログイン処理を実装

$ vi src/app/app.component.ts

import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Portfolio'
  constructor(public afAuth: AngularFireAuth) {
  }
  login() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }
}

ナビヘッダーの中に、ログインボタンを実装

$ vi src/app/app.component.html

...
    <div *ngIf="afAuth.user | async as user; else showLogin">
      <span style="color: white"> ようこそ{{ user.displayName }}</span>
      <button class="btn btn-primary ml-2" (click)="logout()">Logout</button>
    </div>
    <ng-template #showLogin>
      <button class="btn btn-primary ml-2" (click)="login()">Login with Google</button>
    </ng-template>
...

サーバーを起動して画面を確認すると、画面右上にログインボタンが表示されています。

クリックし、Googleアカウントでログインすると、右上にGoogleアカウント名が表示され、ログインボタンがログアウトボタンに変わっています。

以上で、実装完了です。

まとめ

今回は、Firebaseを使って、Googleアカウント認証機能を実装しました。
面倒な認証処理機構を自分で作らなくていいので、非常に便利です。

今回紹介した認証はGoogleアカウントのみですが、他にもFacebookやTwitterなど、有名どころにはだいたい対応しています。

次回は、認証したユーザーをFirestoreに登録する機能を実装します。