はじめに
Firebase×React×MaterialUIにて個人開発を行いました。
その際に使用したFirebase Authenticationについて、書いていきます。
Firebaseのドキュメントを見て「ウォェッ。」
となって人が少しでも分かるような記事にして行けたらと思います。
最後に環境を用意しなくてもオンライン上でコードの動きを確認できるようにもしているので
そちらもご確認いただければと思います。
Firebase Authenticationとは
一言で言うとGoogle様が作ったユーザー認証機能をローコードで実装できるものです。
ユーザー認証機能というのは実際に作ってみるとかなーり複雑です。
複雑な様子をいくつかあげると
- パスワードのハッシュ化
- ユーザ情報が登録されたDBとのやりとり
- レスポンス内容
などなど。
これらの処理をFirebase Authenticationにまかせることで多くのメリットが生まれます。
メリット・デメリット
メリット
- 無料！（ココはかなり大きい）
- 複雑な処理のコードを書かずに済む
- 浮いた時間を他の開発作業に当てることができる
- Google準拠のセキュリティであるため、システムの頑健性がかなり保証される
デメリット
- 込み入ったカスタマイズができない（そもそもFirebaseでかなり込み入った認証機能が作成できると思う）
正直メリットしかないと思います。（笑）
サインアップを題材としたソースの解説
ソースコード
firebase.auth().createUserWithEmailAndPassword(email, password)
.then((userCredential) => {
// サインアップ成功の処理を記述する
// 例えばサインアップに成功したユーザの情報を出力する
console.dir(userCredential.user)
})
.catch((error) => {
// サインアップ失敗の時はこちらの例外に飛ぶ
var errorCode = error.code;
var errorMessage = error.message;
// 例えばサインアップ失敗の原因をアラートで出力する
alert(errorMessage)
});動作の解説
- createUserWithEmailAndPassword(email, password)
例えば、フォームから取得したemailとpasswordをこのメソッドの引数に取ることで
新しいユーザが登録されます。
新しいユーザの登録が成功すると２行目のthenの中に飛びます。
成功時にFirebaseからのレスポンスをuserCredentialで受け取って
処理を書いていくというイメージです。
この際に”既に登録済みのユーザ”であったり”メールのフォーマットが違う”などであったりすると、
７行目の.catchに飛んで行きます。
こちらもFirebaseからのレスポンスをerrorという引数で受け取って
処理を書いていくイメージです。
【手元で動かせます】実装例
はじめに
実際に手元で動かしてみてください。Firebaseの無料版を使用しているため、
新規登録ユーザが多すぎると使用できなくなるかもしれません。
その際はお手数ですが、Firebaseのアカウントを自分で作って
firebaseConfigを自分のものに変えてみてください。
この体験版により取得されるデータは管理人が悪用することはありません。
本当に誓います。また、パスワードもハッシュ化されているので、
管理人がそれ確認することはできません。
簡単に使い方説明
サインアップをするのが怖い方はこちらを使用してサインインの動きを見てみてください！
メールアドレス：hello@hello.world
パスワード： helloworld
- サインアップ
テキストボックスに値をメールアドレスとパスワード（６文字以上）を入力して押下すると
Firebaseにてアカウントが作成されます。
その後ログイン状態になります。
また、”既に登録済みのメールアドレス”や”入力値が不正”だとモーダルでメッセージを出力します。
- サインイン
テキストボックスに登録済みのメールアドレスとパスワードを入力して押下すると、
認証判定を行います。
”メールアドレスやパスワードが不正”だとモーダルでメッセージを出力します。
- ログインユーザー確認
このボタンを押下すると、現在ログインされているユーザのメールアドレスを出力します。
ただし、ログインされている状態でなければ、エラーメッセージを出力します。
- サインアウト
このボタンが押下されるとサインアウトします。
- Sign In With Google
Googleアカウントでログインするための新しいウィンドウが出現します。
（chromeではそうですが、他は分かりません。）
See the Pen firebaseAuthenticationDEMO by atsushiIMG (@atsushiimg) on CodePen.
おわり
コメント