カスタムメールのアクション ハンドラの作成

メールアドレスの更新やユーザー パスワードのリセットなど、一部のユーザー管理操作では、ユーザーにメールが送信されます。これらのメールには、そのユーザー管理操作を完了またはキャンセルするためのリンクが含まれます。ユーザー管理のメールはデフォルトで、プロジェクトの Firebase Hosting ドメインの URL でホストされているウェブページである、アクション ハンドラにリンクします。

代わりにカスタム処理のため、ウェブサイトとメールのアクション ハンドラを統合するカスタム メール アクション ハンドラを作成してホストすることもできます。

次のユーザー管理アクションでは、ユーザーがメールのアクション ハンドラを使用してアクションを完了することが必要です。

  • パスワードのリセット
  • メールアドレスの変更の取り消し - ユーザーが自分のアカウントのプライマリ メールアドレスを変更すると、元のアドレスにメールが送信され、こうして変更を元に戻すことができます。
  • メールアドレスの確認

Firebase プロジェクトのメール アクション ハンドラをカスタマイズするには、リクエストの妥当性を検証し、リクエストを完了するために、Firebase の JavaScript SDK でウェブページを作成し、ホストする必要があります。その後、カスタム アクション ハンドラにリンクするための Firebase プロジェクトのメール テンプレートをカスタマイズする必要があります。

メールのアクション ハンドラ ページを作成する

  1. Firebase は、ユーザー管理のメールを生成し、アクション ハンドラの URL にいくつかのクエリ パラメータを追加します。次に例を示します。

    https://example.com/usermgmt?mode=resetPassword&oobCode=ABC123&apiKey=AIzaSy...

    これらのパラメータでは、完了中のユーザー管理タスクを指定します。メール アクション ハンドラのページでは、次のクエリ パラメータを処理する必要があります。

    パラメータ
    モード

    完了するユーザー管理アクションは、次のいずれかの値です。

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCode リクエストを識別し、検証するためのワンタイム コード
    apiKey 便宜のために提供される Firebase プロジェクトの API キー

    次の例では、ブラウザベースのハンドラ内でクエリパラメータを処理する方法を示しています(また、同様のロジックを使用して Node.js アプリケーションとしてハンドラを実装することができます)。

    <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      // TODO: Implement getParameterByName()
    
      // Get the action to complete.
      var mode = getParameterByName('mode');
      // Get the one-time code from the query parameter.
      var actionCode = getParameterByName('oobCode'};
      // (Optional) Get the API key from the query parameter.
      var apiKey = getParameterByName('apiKey'};
    
      // Configure the Firebase SDK.
      // This is the minimum configuration required for the API to be used.
      var config = {
        'apiKey': apiKey  // This key could also be copied from the web
                          // initialization snippet found in the Firebase console.
      };
      var app = firebase.initializeApp(config);
      var auth = app.auth();
    
      // Handle the user management action.
      switch (mode) {
        case 'resetPassword':
          // Display reset password handler and UI.
          handleResetPassword(auth, actionCode);
          break;
        case 'recoverEmail':
          // Display email recovery handler and UI.
          handleRecoverEmail(auth, actionCode);
          break;
        case 'verifyEmail':
          // Display email verification handler and UI.
          handleVerifyEmail(auth, actionCode);
          break;
        default:
          // Error: invalid mode.
      }
    }, false);
    </script>
    
  2. 最初に verifyPasswordResetCode でアクション コードを確認することによって、パスワードのリセット リクエストを処理し、その後ユーザーから新しいパスワードを取得して、それを confirmPasswordReset に渡します。次に例を示します。

    function handleResetPassword(auth, actionCode) {
      var accountEmail;
      // Verify the password reset code is valid.
      auth.verifyPasswordResetCode(actionCode).then(function(email) {
        var accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
    
        // Save the new password.
        auth.confirmPasswordReset(actionCode, newPassword).then(function(resp) {
          // Password reset has been confirmed and new password updated.
    
          // TODO: Display a link back to the app, or sign-in the user directly
          // if the page belongs to the same domain as the app:
          // auth.signInWithEmailAndPassword(accountEmail, newPassword);
        }).catch(function(error) {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch(function(error) {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }
    
  3. 最初に checkActionCode でアクション コードを検証することによって、メールアドレスの変更取消しを処理し、その後、applyActionCode でユーザーのメールアドレスを復元します。次に例を示します。

    function handleRecoverEmail(auth, actionCode) {
      var restoredEmail = null;
      // Confirm the action code is valid.
      auth.checkActionCode(actionCode).then(function(info) {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return auth.applyActionCode(actionCode);
      }).then(function() {
        // Account email reverted to restoredEmail
    
        // TODO: Display a confirmation message to the user.
    
        // You might also want to give the user the option to reset their password
        // in case the account was compromised:
        auth.sendPasswordResetEmail(restoredEmail).then(function() {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch(function(error) {
          // Error encountered while sending password reset code.
        });
      }).catch(function(error) {
        // Invalid code.
      });
    }
    
  4. applyActionCode の呼び出しで、メールアドレスの確認を処理します。次に例を示します。

    function handleVerifyEmail(auth, actionCode) {
      // Try to apply the email verification code.
      auth.applyActionCode(actionCode).then(function(resp) {
        // Email address has been verified.
    
        // TODO: Display a confirmation message to the user.
        // You could also provide the user with a link back to the app.
      }).catch(function(error) {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }
    
  5. Firebase Hosting を使用するなど、いずれかのページをホストします。

次に、ユーザー管理メールでカスタムメールのアクション ハンドラにリンクするために、Firebase プロジェクトを設定する必要があります。

カスタムメールのアクション ハンドラを使用するように、Firebase プロジェクトを設定するには:

  1. Firebase console でプロジェクトを開きます。
  2. 認証セクションで [メール テンプレート] ページに移動します
  3. [メールの種類] エントリで、メールのテンプレートを編集するために鉛筆アイコンをクリックします。
  4. [アクション URL をカスタマイズ] をクリックして、カスタムメールのアクション ハンドラに URL を指定します。

URL は、保存した後、Firebase プロジェクトのメール テンプレートすべてで使用されます。

フィードバックを送信...