Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

代わりに、カスタムの電子メールアクションハンドラーを作成してホストし、カスタム処理を実行して、電子メールアクションハンドラーをWebサイトに統合することができます。

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

  • パスワードのリセット
  • メールアドレスの変更を取り消す-ユーザーがアカウントのメインのメールアドレスを変更すると、Firebaseは古いアドレスにメールを送信して変更を元に戻すことができます
  • メールアドレスの確認

Firebaseプロジェクトのメールアクションハンドラをカスタマイズするには、Firebase JavaScript SDKを使用してリクエストの有効性を確認し、リクエストを完了するWebページを作成してホストする必要があります。次に、Firebaseプロジェクトのメールテンプレートをカスタマイズして、カスタムアクションハンドラーにリンクする必要があります。

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

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

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

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

    パラメーター
    モード

    完了するユーザー管理アクション。次のいずれかの値になります。

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCodeリクエストの識別と検証に使用されるワンタイムコード
    apiKey便利なように提供されたFirebaseプロジェクトのAPIキー
    continueUrlこれは、URLを介して状態をアプリに戻す方法を提供するオプションのURLです。これは、パスワードのリセットと電子メールの確認モードに関連しています。パスワードリセットメールまたは確認メールを送信する場合、これを使用できるようにするには、 ActionCodeSettingsオブジェクトを継続URLで指定する必要があります。これにより、ユーザーは電子メールアクションの後で中断したところから続行できます。
    lang

    これは、ユーザーのロケールを表すオプションのBCP47言語タグです(たとえば、 fr )。この値を使用して、ローカライズされた電子メールアクションハンドラーページをユーザーに提供できます。

    ローカリゼーションは、Firebase Consoleを介して設定することも、メールアクションをトリガーする前に対応するクライアントAPIを呼び出すことで動的に設定することもできます。たとえば、JavaScriptを使用しますfirebase.auth().languageCode = 'fr';

    一貫したユーザーエクスペリエンスを実現するには、メールアクションハンドラーのローカリゼーションがメールテンプレートのローカリゼーションと一致していることを確認してください。

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

    Web version 9

    import { initializeApp } from "firebase/app";
    import { getAuth } from "firebase/auth";
    
    document.addEventListener('DOMContentLoaded', () => {
      // TODO: Implement getParameterByName()
    
      // Get the action to complete.
      const mode = getParameterByName('mode');
      // Get the one-time code from the query parameter.
      const actionCode = getParameterByName('oobCode');
      // (Optional) Get the continue URL from the query parameter if available.
      const continueUrl = getParameterByName('continueUrl');
      // (Optional) Get the language code if available.
      const lang = getParameterByName('lang') || 'en';
    
      // Configure the Firebase SDK.
      // This is the minimum configuration required for the API to be used.
      const config = {
        'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
                                // snippet found in the Firebase console.
      };
      const app = initializeApp(config);
      const auth = getAuth(app);
    
      // Handle the user management action.
      switch (mode) {
        case 'resetPassword':
          // Display reset password handler and UI.
          handleResetPassword(auth, actionCode, continueUrl, lang);
          break;
        case 'recoverEmail':
          // Display email recovery handler and UI.
          handleRecoverEmail(auth, actionCode, lang);
          break;
        case 'verifyEmail':
          // Display email verification handler and UI.
          handleVerifyEmail(auth, actionCode, continueUrl, lang);
          break;
        default:
          // Error: invalid mode.
      }
    }, false);

    Web version 8

    document.addEventListener('DOMContentLoaded', () => {
      // 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 continue URL from the query parameter if available.
      var continueUrl = getParameterByName('continueUrl');
      // (Optional) Get the language code if available.
      var lang = getParameterByName('lang') || 'en';
    
      // Configure the Firebase SDK.
      // This is the minimum configuration required for the API to be used.
      var config = {
        'apiKey': "YOU_API_KEY" // Copy this key 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, lang);
          break;
        case 'recoverEmail':
          // Display email recovery handler and UI.
          handleRecoverEmail(auth, actionCode, lang);
          break;
        case 'verifyEmail':
          // Display email verification handler and UI.
          handleVerifyEmail(auth, actionCode, continueUrl, lang);
          break;
        default:
          // Error: invalid mode.
      }
    }, false);
  2. 最初にverifyPasswordResetCodeを使用してアクションコードを確認することにより、パスワードリセット要求を処理します。次に、ユーザーから新しいパスワードを取得し、 confirmPasswordResetに渡します。例えば:

    Web version 9

    import { verifyPasswordResetCode, confirmPasswordReset } from "firebase/auth";
    
    function handleResetPassword(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
    
      // Verify the password reset code is valid.
      verifyPasswordResetCode(auth, actionCode).then((email) => {
        const accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
        const newPassword = "...";
    
        // Save the new password.
        confirmPasswordReset(auth, actionCode, newPassword).then((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((error) => {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch((error) => {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }

    Web version 8

    function handleResetPassword(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
    
      // Verify the password reset code is valid.
      auth.verifyPasswordResetCode(actionCode).then((email) => {
        var accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
        var newPassword = "...";
    
        // Save the new password.
        auth.confirmPasswordReset(actionCode, newPassword).then((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((error) => {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch((error) => {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }
  3. 最初にcheckActionCodeを使用してアクションコードを確認することにより、電子メールアドレスの変更の取り消しを処理します。次に、 applyActionCodeを使用してユーザーの電子メールアドレスを復元します。例えば:

    Web version 9

    import { checkActionCode, applyActionCode, sendPasswordResetEmail } from "firebase/auth";
    
    function handleRecoverEmail(auth, actionCode, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      let restoredEmail = null;
      // Confirm the action code is valid.
      checkActionCode(auth, actionCode).then((info) => {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return applyActionCode(auth, actionCode);
      }).then(() => {
        // 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:
        sendPasswordResetEmail(auth, restoredEmail).then(() => {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch((error) => {
          // Error encountered while sending password reset code.
        });
      }).catch((error) => {
        // Invalid code.
      });
    }

    Web version 8

    function handleRecoverEmail(auth, actionCode, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      var restoredEmail = null;
      // Confirm the action code is valid.
      auth.checkActionCode(actionCode).then((info) => {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return auth.applyActionCode(actionCode);
      }).then(() => {
        // 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(() => {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch((error) => {
          // Error encountered while sending password reset code.
        });
      }).catch((error) => {
        // Invalid code.
      });
    }
  4. applyActionCodeを呼び出して、メールアドレスの確認を処理します。例えば:

    Web version 9

    function handleVerifyEmail(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      // Try to apply the email verification code.
      applyActionCode(auth, actionCode).then((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((error) => {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }

    Web version 8

    function handleVerifyEmail(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      // Try to apply the email verification code.
      auth.applyActionCode(actionCode).then((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((error) => {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }
  5. ページをどこかでホストします。たとえば、 FirebaseHostingを使用します。

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

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

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

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