今日は近所の美術館の粘土教室に子供を連れて行ってきました。ほんとに陶芸で使う様な粘土を大量に使って好きに遊べるので、ものすごく楽しかったです。子供そっちのけで親が夢中になってしました。

ってホントに日記になってしまってますね(^^;;

本日はあまり昨日保留になっていたメールアドレスのVerificationにトライします。

メールアドレスの持ち主であることを確認して初めてサインイン可能とします。

サインアップ

サインアップ（ユーザー登録）後に確認メールを送信します。

確認メールはUserのsendEmailVerificationメソッドで送信できます。

export function signUp(email, password) {
  firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(function(userCredential) {
    let user = userCredential.user;
    console.log(user)

    const actionCodeSettings = {
      url: window.location.origin + `/`
    };
    return user.sendEmailVerification(actionCodeSettings);
  })
  .then(function() {
    window.alert('確認メールを送信しました。メール内のURLからサインインしなおしてください。');
  })
  .catch(function(error) {
    // とりあえず手抜きでalert
    window.alert('login failed. ' + error.code + ':' + error.message);
  });
}

actionCodeSettings.urlに確認フロー完了後に遷移するURLを設定します。

サインアップしたところ、下の様なメールが届きました。 f:id:knightso:20191215213713p:plain

ちなみにメールの文面はFirebaseコンソールの「Authentication」→「テンプレート」から変更出来る様です。

f:id:knightso:20191215214122j:plain

メールのリンクをクリックすると、下記の様に表示されます。

「CONTINUE」をクリックするとactionCodeSettings.urlに設定したURLにジャンプします。（actionCodeSettings.urlが未設定だとCONTINUEボタンは表示されません）

本アプリでは、現状サインインページが表示されます。ユーザーは未サインイン状態なのでサインインを行う必要あります。

ちょっと面倒ですね。リンクを踏んだら即サインイン出来る様にしたいところですが、どうしたらよいのだろう？ 🤔

メールリンクログインの機能（ドキュメント）を使う必要があるのかもです。

この辺は一旦スコープから外します。また機会があれば調べてみます。🙇‍♂️

サインイン

サインイン処理ではUserのemailVerifiedプロパティチェックを追加します。

ユーザーがメールアドレスVerificationを行なっていない場合ここにfalseが設定されます。その場合はサインアップ同様確認メールを送信します。あとのフローはサインアップで記述したものと同様です。

export function signIn(email, password) {
  firebase.auth().signInWithEmailAndPassword(email, password)
  .then(function(userCredential) {
    let user = userCredential.user;
    //console.log(user)

    if (!user.emailVerified) {
      const actionCodeSettings = {
        url: window.location.origin + `/`
      };
      return user.sendEmailVerification(actionCodeSettings).then(function() {
        window.alert('確認メールを送信しました。メール内のURLからサインインしなおしてください。');
      });
    }

    _currentUser = {id: user.uid, email: user.email, name: user.email};
    currentUser.set(_currentUser);
  })
  .catch(function(error) {
    // とりあえず手抜きでalert
    window.alert('login failed. ' + error.code + ':' + error.message);
  });
}