L08084のブログ

技術記事の執筆は祈りに似ている

AngularでFirebase認証(その3) Firebase Authentication の呼び出し

前回の記事はこちら

引き続き、AngularとFirebaseを使って認証機能を作成していきます。

前回はログイン画面の見た目を作成したので、今回はそのログイン画面にFirebase Authenticationを使って認証機能を導入していきます。

テストアカウントの作成

これから実装するメールアドレスとパスワード認証機能をテストするために、Firebaseのコンソールからアカウントを一人作っておきましょう。

f:id:l08084:20190818191622p:plain
テストアカウントの作成

まずアカウントを追加したいプロジェクトを選択します。

続いてFirebaseコンソールのAuthenticationを選択、メールアドレスとパスワードを入力して「ユーザーを追加」ボタンをクリックするとアカウントが作成されます。

認証機能の実装

ログイン画面のコンポーネントクラスにFirebase Authenticationにメールアドレスとパスワードを渡す処理を書いていきます。

// ...省略
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';

// ...省略
export class LoginComponent implements OnInit {
  public loginFormGroup: FormGroup;
  public emailControl: FormControl;
  public passwordControl: FormControl;

  constructor(
    private fb: FormBuilder,
    // 追加
    private afAuth: AngularFireAuth,
    private router: Router
  ) {}

  /**
   * ログインボタン押下時に呼び出し
   *
   */
  public onSubmit() {
    // 下記の処理を追加
    // メールアドレスとパスワードをFirebase Authenticationに渡す
    this.afAuth.auth
      .signInWithEmailAndPassword(
        this.emailControl.value,
        this.passwordControl.value
      )
      // ログインに成功したらホーム画面に遷移する
      .then(user => this.router.navigate(['/home']))
      // ログインに失敗したらエラーメッセージをログ出力
      .catch(error => console.log(error));
  }

// ...省略
}

ログインボタンを押下した時に呼び出されるメソッドにFirebase AuthenticationのsignInWithEmailAndPasswordを追加します。

signInWithEmailAndPasswordの戻り値はPromiseなので、ログイン成功時の処理をthen句、失敗時の処理をcatch句に書いてください。

認証機能を実装するだけならば、この処理を書くだけで完成です。

ログインしてみる

作ったアカウントを使って認証機能を実装できているか検証します。

f:id:l08084:20190818193957p:plain
テストアカウントのメールアドレスとパスワードを入力

f:id:l08084:20190818194126p:plain
ログインに成功

正しいメールアドレスとパスワードを入力するとホーム画面に遷移します。

バージョン情報

  • Angular v7.2.0
  • firebase: v6.3.4
  • Angular Material v7.3.7