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

メールアドレスの更新やユーザー パスワードのリセットなど、一部のユーザー管理操作では、ユーザーにメールが送信されます。これらのメールには、そのユーザー管理操作を完了またはキャンセルするためのリンクが含まれます。ユーザー管理のメールはデフォルトで、プロジェクトの 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 キー
    continueUrl URL を使用して状態をアプリに戻す方法を提供するオプションの URL。これは、パスワード リセットとメール確認モードに関係します。パスワード リセットのメールまたは確認メールを送信するときは、ActionCodeSettings オブジェクトを継続 URL で指定して、このパラメータを使用できるようにする必要があります。これにより、ユーザーはメール アクション後に中断したところから続行することができます。

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

    <script src="https://www.gstatic.com/firebasejs/4.3.1/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');
      // (Optional) Get the continue URL from the query parameter if available.
      var continueUrl = getParameterByName('continueUrl');
    
      // 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, continueUrl);
          break;
        case 'recoverEmail':
          // Display email recovery handler and UI.
          handleRecoverEmail(auth, actionCode);
          break;
        case 'verifyEmail':
          // Display email verification handler and UI.
          handleVerifyEmail(auth, actionCode, continueUrl);
          break;
        default:
          // Error: invalid mode.
      }
    }, false);
    </script>
    
  2. 最初に verifyPasswordResetCode でアクション コードを確認することによって、パスワードのリセット リクエストを処理し、その後ユーザーから新しいパスワードを取得して、それを confirmPasswordReset に渡します。次に例を示します。

    function handleResetPassword(auth, actionCode, continueUrl) {
      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);
    
          // TODO: If a continue URL is available, display a button which on
          // click redirects the user back to the app via continueUrl with
          // additional state determined from that URL's parameters.
        }).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, continueUrl) {
      // 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.
    
        // TODO: If a continue URL is available, display a button which on
        // click redirects the user back to the app via continueUrl with
        // additional state determined from that URL's parameters.
      }).catch(function(error) {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }
    
  5. Firebase Hosting を使用するなどして、ページをホストします。

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

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

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

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

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

ご不明な点がありましたら、Google のサポートページをご覧ください。