今日はGDG DevFest Tokyoへ行ってきました。 目的はもちろんFirebaseです（それだけではないですが）。 Firebaseの有意義な話がたくさん聞けました。 今帰りの新幹線でこの記事を書いています(^_^;
本日より早速アプリを作っていこうと思います。
とりあえずユーザーがログインできないと始まらないよね！ということで認証周りから組み込んでいきます。
認証方式
Firebase Authenticationドキュメントを読むと、大きく分けて
- FirebaseUI Auth
- Firebase SDK Authentication
の２つの方法がある模様。
FirebaseUIを使うと画面遷移なども含めた認証機能（しかもメールアドレス＆パスワード、電話番号、各種フェデレーション ID プロバイダ認証等サポート）がシュッと作れそう。便利！
ただ今回はFirebaseの練習もかねてFirebase SDK Authenticationでゴリゴリ組んでいこうと思います(^_^;
SDK Authenticationでも様々なログイン方法が実装出来る様ですが、まずはメールアドレス＆パスワードのみのよくあるログイン画面を作成します。
ログインを有効にする
まずFirebaseコンソールからメールアドレス＆パスワードのログインを有効にする必要があります。
コンソール左メニューより「Authentication」を選択し、「メール/パスワード」をクリックします。
トグルを有効にします。
「メールリンク（パスワードなしでログイン）」トグルは一旦そのままにしておきます。
これで準備完了。早速実装に入ります。
サインアップ（ユーザー登録）
画面イメージ
実装
JavaScript でパスワード ベースのアカウントを使用して Firebase 認証を行う | Firebase
を参考にサインアップ（ユーザー登録処理）を組み込みます。 AuthサービスのcreateUserWithEmailAndPasswordメソッドを使用します。
export function signUp(email, password) { firebase.auth().createUserWithEmailAndPassword(email, password) .then(function(userCredential) { let user = userCredential.user; console.log(user) // ユーザー情報保存処理(Svelte) _currentUser = {id: user.uid, name: user.displayName}; currentUser.set(_currentUser); }) .catch(function(error) { // とりあえず手抜きでalert window.alert('login failed. ' + error.code + ':' + error.message); }); }
createUserWithEmailAndPasswordメソッドはPromise
createUserWithEmailAndPasswordが成功すると、ユーザーは自動的にログイン状態になります。 ということは、Emailの正式な持ち主でないユーザーもアカウントを作成できてしまうことになります。
UserのsendEmailVerificationメソッドで確認リンクをメール送信出来る様です。ユーザーがメールのリンクを踏むとemailVerifiedプロパティがtrueになる・・・のかな？メールアドレスが正しい持ち主である必要がある場合はemailVerifiedを都度確認する必要がありそうです。
ちょっと時間がなくなってきたのでこの辺は明日検証しますm( )m
サインイン（認証）
画面イメージ
実装
作成済ユーザーのログイン処理はAuthサービスの signInWithEmailAndPasswordメソッド を使用します。
使用方法はcreateUserWithEmailAndPasswordとほぼ同じです。
export function signIn(email, password) { firebase.auth().signInWithEmailAndPassword(email, password) .then(function(userCredential) { let user = userCredential.user; console.log(user) // ユーザー情報保存処理(Svelte) _currentUser = {id: user.uid, email: user.email, name: user.displayName}; currentUser.set(_currentUser); }) .catch(function(error) { // とりあえず手抜きでalert window.alert('login failed. ' + error.code + ':' + error.message); }); }
以上でサインイン＆サインアップが動作することになりました＼(^o^)／
ちなみに firebase server で起動したローカルサーバーでも動作してFirebaseプロジェクトにアカウント作成されました。モックになるのかと思ってましたがそういうものなんですかね。。
あと・・ログイン情報の保持はどうするのが定石でしょうか・・。 都度Auth.currentUserで取得すればいいのかな？🤔
まとめ
Firebase SDK Authenticationでメールアドレス/パスワードのサインアップ＆サインイン処理を実装しました。
かなり中途半端な状態ですが、 進捗悪くても完成まで毎日更新する と宣言したのでここまでで更新します（ｷﾞﾘｷﾞﾘ間に合った）(^ω^;;
