Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기

사용자 지정 이메일 작업 처리기 만들기

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

사용자 이메일 주소 업데이트 및 사용자 비밀번호 재설정과 같은 일부 사용자 관리 작업으로 인해 사용자에게 이메일이 전송됩니다. 이러한 이메일에는 수신자가 사용자 관리 작업을 완료하거나 취소하기 위해 열 수 있는 링크가 포함되어 있습니다. 기본적으로 사용자 관리 이메일은 프로젝트의 Firebase 호스팅 도메인에 있는 URL에서 호스팅되는 웹페이지인 기본 작업 핸들러에 연결됩니다.

대신 사용자 정의 이메일 작업 핸들러를 만들고 호스팅하여 사용자 정의 처리를 수행하고 이메일 작업 핸들러를 웹사이트와 통합할 수 있습니다.

다음 사용자 관리 작업을 수행하려면 사용자가 전자 메일 작업 처리기를 사용하여 작업을 완료해야 합니다.

  • 비밀번호 재설정
  • 이메일 주소 변경 취소 - 사용자가 계정의 기본 이메일 주소를 변경하면 Firebase는 변경을 취소할 수 있도록 이전 주소로 이메일을 보냅니다.
  • 이메일 주소 확인

Firebase 프로젝트의 이메일 작업 핸들러를 맞춤설정하려면 Firebase JavaScript SDK를 사용하여 요청의 유효성을 확인하고 요청을 완료하는 웹페이지를 만들고 호스팅해야 합니다. 그런 다음 Firebase 프로젝트의 이메일 템플릿을 맞춤설정하여 맞춤 작업 핸들러에 연결해야 합니다.

이메일 작업 처리기 페이지 만들기

  1. Firebase는 사용자 관리 이메일을 생성할 때 작업 핸들러 URL에 여러 쿼리 매개변수를 추가합니다. 예:

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

    이 매개변수는 사용자가 완료하는 사용자 관리 작업을 지정합니다. 이메일 작업 핸들러 페이지는 다음 쿼리 매개변수를 처리해야 합니다.

    매개변수
    방법

    완료할 사용자 관리 작업입니다. 다음 값 중 하나일 수 있습니다.

    • resetPassword
    • recoverEmail
    • verifyEmail
    oob코드 요청을 식별하고 확인하는 데 사용되는 일회성 코드
    API 키 편의를 위해 제공되는 Firebase 프로젝트의 API 키
    계속 URL 이것은 URL을 통해 앱에 상태를 다시 전달하는 방법을 제공하는 선택적 URL입니다. 이는 비밀번호 재설정 및 이메일 확인 모드와 관련이 있습니다. 비밀번호 재설정 이메일이나 확인 이메일을 보낼 때 계속 URL을 사용하여 ActionCodeSettings 개체를 지정해야 사용할 수 있습니다. 이렇게 하면 사용자가 전자 메일 작업 후에 중단한 위치에서 계속할 수 있습니다.

    이것은 사용자의 로케일을 나타내는 선택적 BCP47 언어 태그입니다(예: fr ). 이 값을 사용하여 사용자에게 현지화된 이메일 작업 핸들러 페이지를 제공할 수 있습니다.

    현지화는 Firebase 콘솔을 통해 설정하거나 이메일 작업을 트리거하기 전에 해당 클라이언트 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. 예를 들어 Firebase 호스팅 을 사용하여 페이지를 어딘가에 호스팅합니다.

다음으로 사용자 관리 이메일에서 사용자 정의 이메일 작업 핸들러에 연결하도록 Firebase 프로젝트를 구성해야 합니다.

맞춤 이메일 작업 핸들러를 사용하도록 Firebase 프로젝트를 구성하려면 다음 안내를 따르세요.

  1. Firebase 콘솔 에서 프로젝트를 엽니다.
  2. 인증 섹션의 이메일 템플릿 페이지로 이동합니다.
  3. 이메일 유형 항목에서 연필 아이콘을 클릭하여 이메일 템플릿을 편집합니다.
  4. 사용자 지정 작업 URL 을 클릭하고 사용자 지정 전자 메일 작업 처리기에 대한 URL을 지정합니다.

URL을 저장하면 모든 Firebase 프로젝트의 이메일 템플릿에서 사용됩니다.