前回の記事はこちら
引き続き、AngularとFirebaseを使って認証機能を作成していきます。
前回はログイン画面の見た目を作成したので、今回はそのログイン画面にFirebase Authenticationを使って認証機能を導入していきます。
テストアカウントの作成
これから実装するメールアドレスとパスワード認証機能をテストするために、Firebaseのコンソールからアカウントを一人作っておきましょう。
まずアカウントを追加したいプロジェクトを選択します。
続いて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
句に書いてください。
認証機能を実装するだけならば、この処理を書くだけで完成です。
ログインしてみる
作ったアカウントを使って認証機能を実装できているか検証します。
正しいメールアドレスとパスワードを入力するとホーム画面に遷移します。
バージョン情報
- Angular v7.2.0
- firebase: v6.3.4
- Angular Material v7.3.7