reactjs + firebase auth クライアント認証の実装(その2)

firebaseでは下記のイベントをデフォルトで受け取り処理してくれますが、自分のサイトでイベントを受け取り処理を行うように変更します。

・ユーザが新規登録をし、メール確認をする時
・ユーザがパスワードのリセットを求めた時
・ユーザがメールアドレスを更新したい時

今回は「ユーザが新規登録をし、メール確認をする時」、「ユーザがパスワードのリセットを求めた時」の処理をまとめます。

    「ユーザが新規登録をし、メール確認をする時」

  1. 画面上で、メールアドレスとパスワードを登録する
  2. 仮登録メールが配信される
  3. ユーザはそのメールに記載されているurlを押下
  4. 本登録が完了し、ログインができるようになる

3の処理は、デフォルトで firebaseで提供されている画面に飛びます。
しかし、実際は自分のサービスの画面へ遷移させる必要があります。

    「ユーザがパスワードのリセットを求めた時」

  1. パスワードをリセットするボタンをユーザが押下する
  2. パスワードをリセットメールが配信される
  3. ユーザはそのメールに記載されているurlを押下
  4. 画面で更新用フォームを表示する
  5. 新しいパスワードでログインができるようになる

設定
firebaseのコンソールで、Authenticationのタブ「テンプレート」を押下
デフォルトのテンプレートが表示されます。

今回は本登録までの流れなので「メールアドレスの確認」を押下、鉛筆ボタンを押下します。
アクション URL(%LINK% 値)の項目があります。
こちらをデフォルト値から、自分のサービスのURLに変更します。

「URL」+「?mode=hoge&oobCode=hogehoge&apiKey=hogehogehoge」

の形でurlが叩かれるようになります。

設定はここまで。
あとは受け取る側に処理を書きます。

    流れ的には

  1. apiKeyの整合性を確認
  2. modeで大枠の処理を決め
  3. oobCodeを使用して処理を行う

私は、ユーザがログインを行う画面に対して処理を追加しました。

url内にクエリが含まれていたら、キーワードで取得します

      let mode = this.getParameterByName('mode');
      let actionCode = this.getParameterByName('oobCode');
      let apiKey = this.getParameterByName('apiKey');
      let continueUrl = this.getParameterByName('continueUrl');

上記で取得したmodeで処理を振り分けます。

  switch (mode) {
            case 'resetPassword':
                message = await this.handleResetPassword(firebaseAuth, actionCode, continueUrl);
                break;
            case 'recoverEmail':
                                //今回は未使用
                message = await this.handleRecoverEmail(firebaseAuth, actionCode);
                break;
            case 'verifyEmail':
                message = await this.handleVerifyEmail(firebaseAuth, actionCode, continueUrl);
                break;
            default:
        }

Eメールの確認の処理

handleVerifyEmail(auth, actionCode, continueUrl) {
    return new Promise(async (resolve, reject) => {
        await auth.applyActionCode(actionCode).then(function (resp) {
            resolve('本登録が完了しました。ログインを行なってください。');
        }).catch(function (error) {
            console.log(error);
            resolve('本登録が失敗しました。確認メールを再度お確かめください。');
        });
    });
}

パスワードリセットの処理
一旦、叩かれたurlを受け止めて、下記の処理後画面に、更新用のパスワード入力フォーム、更新ボタンを表示しました。

handleResetPassword(auth, actionCode, continueUrl) {
        return new Promise(async (resolve, reject) => {
            await auth.verifyPasswordResetCode(actionCode).then(function (email) {
                var accountEmail = email;
                resolve('新規にパスワードを設定し直してください。');
            }).catch(function (error) {
                console.log(error);
                resolve('パスワードの初期化に失敗しました。時間をおいて再度お試しください');
            });
        });
    }

更新ボタンを押下すると、firebaseへ更新されたパスワードの登録を行います。

handleCommitNewPassword(auth, actionCode, newPassword, continueUrl) {
        return new Promise(async (resolve, reject) => {
                await auth.confirmPasswordReset(actionCode, newPassword).then(function (resp) {
                resolve('パスワードの更新が完了しました。');
            }).catch(function (error) {
                console.log(error);
                resolve('パスワードの更新に失敗しました。時間をおいて再度お試しください');
            });
        });
    }

試験してて気づいたのが、たまにメールが送られるのに遅延が発生します。
Gmailなのかfirebaseなのか。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Bitnami