前回記事はこちら→SES営業のぼくでもできた！Google FirebaseでセルフDX(5)
皆さん、こんにちは！
株式会社TSOneでSES営業を担当しているHYです。
弊社が得意としているVue.jsとFireBaseを利用したアプリ開発を素人がどこまでできるのか？
ブログで紹介していきたいと思います♪
SES営業がエンジニアとつながりたくて作ったアプリ
「SalesPromotionalTools(営業推進ツール)」（※以降SPTs)
開発したアプリをホスティングしてエンジニアの皆さんに使ってもらうことにしたところ、早速問い合わせが、
「このアプリって認証機能(ログイン画面)ないの？」
ですよね。。
手軽に使ってほしかったからログイン画面を排除したんだけど(言い訳）
では、作りますか。ログイン画面(認証機能)！Firebaseで手軽にね！
FirebaseにはFirebase Authenticationという認証処理を行うための機能が提供されています。独自で認証処理をプログラミングする必要はなく、Firebase Authenticationの初期設定と、用意されているメソッド(Function）を呼び出すだけでＯＫ。とはいえ、ログインする画面の開発や、諸々の設定は必要なので、早速実装を開始してみます。
[参考資料]
https://firebase.google.com/docs/auth/web/manage-users?hl=ja
注意：今回はFirebase V8での実装です。現在の最新はV9となり若干実装が変わります。ごめんなさい。
Firebase側の設定
Firebase Authenticationを利用することで、
アプリケーションにユーザー認証機能を独自で実装することなく、
ユーザー認証機能を提供できるようになります。
認証方法には、主に以下が用意されています。
- メールアドレスとパスワードによる認証
- 主要なプロバイダーアカウントによる認証（Google / Twitter / Facebook / Github / Apple / Yahoo! / Microsoft 等）
- 匿名認証
- カスタム認証
- 電話番号認証
今回は入門しやすそうなメールアドレスとパスワードでの認証で実装したいと思います。
早速、Firebaseのコンソールから認証を許可するユーザーを登録します。
これによって、Firebaseに登録されたユーザーしかアプリにログインできない設定を行えます。
認証を許可するユーザーのメールアドレスとパスワードを設定します。
※パスワードは後で変更できるので、任意の初期パスワードを設定します。
ここまででFirebase Authenticationへのユーザ登録が完了です。
アプリ側の実装
FirebaseのコンソールからFirebase Authenticationにユーザ登録を行ったら、アプリ側でログイン画面を実装します。今回もプログラムを/src/componetsフォルダに作成していきたいと思います。
ファイルはそのまんまLogin.vue という名前にしました。
Firebase Authentication側でメールアドレスとパスコードでの認証を選択したので、アプリ側のログイン画面からの入力を「メールアドレス」と「パスワード」にし、入力された値をパラメータとしてFirebase Authenticationへの認証処理を行います。
ログイン画面を実装する。
vuetifyの機能を利用してログイン画面を作成しました。
ここで入力されたメールアドレスとパスワードでFirebase Authenticationへの認証処理を行います。
src/components/Login.vueより抜粋
async fireBaseAuth() {
this.loading = true;
// 認証成功をセット
this.isAuthSuccess = true;
await firebase
.auth()
.signInWithEmailAndPassword(this.emailAddr + "@tsone.co.jp", this.pass)
.then(() => {
this.isAuthSuccess = true;
})
.catch((err) => {
// Handle Errors here.
var errorCode = err.code;
console.log(errorCode);
this.isAuthSuccess = false;
this.loading = false;
});
}, が、実際にFirebase Authenticationでの認証を行っている部分になります。
FirebaseAuthenticationが提供しているメソッドsignInWithEmailAndPasswordを実行します。
signInWithEmailAndPasswordにパラメータとして「メールアドレス」と「パスワード」を渡すと、Firebaseが認証処理を行います。パラメータで渡された「メールアドレス」と「パスワード」が事前にFirebase上に登録されたユーザ情報に存在すれば正常終了となり、ログイン成功です。
逆に、Firebase上に存在しない「メールアドレス」と「パスワード」の組み合わせであればエラーとしてcatchされます。※紛らわしいですが、今回作成したログイン画面では「メールアドレス」項目の入力値をドメイン前までとしているので、signInWithEmailAndPasswordのパラメータとして渡す前に文字列にドメイン部分（@tsone.co.jp）を結合しています。
ここまででアプリ側でのログイン画面の実装と、Firebase Authenticationを利用した認証処理が完了です。
ユーザ登録画面を作ってみよう♪
Firebase Authentication を利用して、認証処理の方法を記載しましたが、
今回説明した方法だと、利用するユーザを追加する度にFirebaseのコンソールからユーザ登録をしなければなりません。ちょっと面倒ですよね。
ということで、アプリ側からFirebase Authenticationへユーザ登録する画面を開発したいと思います。Firebase Authenticationでは、ユーザ登録をアプリから実施できるように、メソッドが提供されています。それを利用して「SPTs」を利用できるユーザーをFirestoreDBとFirebase Authenticationで管理したいと思います。
vuetifyの機能を利用してユーザ登録の画面を作成しました。社員番号や所属など弊社の社員情報を登録できる画面です。ここで登録されたユーザのみが「SPTs」を利用できる仕組みとします。
画面から入力された情報はアプリ側で管理(利用)するために、FirestoreDBへ登録します。FirestoreDBへの登録方法については以前投稿したブログで紹介させていただいてますので、細かい実装部分は割愛し、今回はFirebase Authenticationとの連携部分に絞って説明します。
await firebase
.auth()
.createUserWithEmailAndPassword(
this.emailAddr + "@tsone.co.jp",
this.password
)実際にFirebase Authenticationへのユーザ登録を行う処理はこれだけです。
今回開発したユーザ情報登録画面ではFirestoreDBへユーザ情報の登録処理が正常終了した後で、Firebase Authenticationの提供しているメソッドcreateUserWithEmailAndPasswordを実行します。
画面入力項目の「メールアドレス」と「パスワード」をcreateUserWithEmailAndPasswordにパラメータとして渡して、Firebase Authenticationへユーザ登録を行います。※繰り返しになりますが、ログイン画面と同様に、今回作成した登録画面ではメールアドレス項目をドメイン前までとしているので、createUserWithEmailAndPasswordのパラメータとして渡す前に文字列にドメイン部分（@tsone.co.jp）を結合しています。
パスワード変更をアプリ側で実装してみる。
Firebase Authenticationでは登録しているユーザーのパスワード変更をする機能も提供されています。
流れとしては、
1.パスワード変更をしたいユーザのメールアドレスをFirebase Authenticationに伝える。
2.「1」で指定のメールアドレスへFirebase Authenticationからメールが送信され、メール本文のリンクをクリックするとパスワードが変更できます。
アプリ側で必要な実装は
「1.パスワード変更をしたいユーザのメールアドレスをFirebase Authenticationに伝える。」
が必要となります。これだけです。
vuetifyの機能を利用してログインしたユーザのプロフィールが参照できる画面を作成しました。社員IDや所属などユーザ情報が参照できる画面です。
この画面に[パスワード変更]ボタンを配置し、ボタン押下のイベントでsendPasswordResetEmailを呼び出す実装にしました。
こちらも細かい実装部分は割愛し、Firebaseとの連携部分のみ説明します。
[パスワード変更]ボタンが押下された際に実行されるメソッドを実装し内部で以下を実行します。
firebase
.auth()
.sendPasswordResetEmail("xxxxxxxxxx@tsone.co.jp");実際にFirebase Authenticationへ指定ユーザ(メールアドレス)のパスワード変更を行う処理はこれだけです。sendPasswordResetEmailというメソッドにパスワード変更したいユーザーのメルアドをパラメータとして渡すだけ。
あとは、パラメータで渡したメールアドレスにFirebaseからメールが届くので、メール本文のリンクをクリックするとパスワードが変更できます。
ここまでがぼくが利用したFirebase Authenticationの認証機能です。
今回メールアドレスとパスワードによる認証を採用したため、他の認証についての実装は行っていませんが、一般的な認証処理を簡単に実装できて、やはりFirebaseは便利だなー。って感じました。
そして、今回の認証処理の実装にともない、我が「SPTs」にログイン画面、ユーザ登録画面、プロフィール画面が仲間入りしました。使える機能が増えてくると開発のモチベーションが上がって、もっと作りたくなってきますね♪