部分使用者的管理作業,例如更新使用者的電子郵件地址, 重設使用者的密碼,系統就會將電子郵件傳送給使用者。這些 電子郵件內含連結,收件者可以開啟,完成或取消使用者授權 執行管理作業根據預設,使用者管理電子郵件會連結至預設動作 處理常式,也就是專案 Firebase 託管中由網址代管的網頁 網域。
您可以改為建立及代管自訂電子郵件動作處理常式,以便自訂郵件 處理資料,以及將電子郵件動作處理常式與您的網站整合。
下列使用者管理動作需要使用者完成指定動作 使用電子郵件動作處理常式:
- 重設密碼
- 撤銷電子郵件地址變更 (使用者變更帳戶時)主要 電子郵件地址,Firebase 會傳送電子郵件到舊地址, 復原變更
- 驗證電子郵件地址
如要自訂 Firebase 專案的電子郵件動作處理常式,請建立並 代管使用 Firebase JavaScript SDK 驗證請求的網頁 並完成要求。接著,您必須自訂 Firebase 專案的電子郵件範本,連結至自訂動作處理常式。
建立電子郵件動作處理常式頁面
Firebase 會在您的動作處理常式網址中加入多個查詢參數 產生使用者管理電子郵件例如:
https://example.com/usermgmt?mode=resetPassword&oobCode=ABC123&apiKey=AIzaSy...&lang=fr
這些參數會指定使用者進行的使用者管理工作 儲存完畢。你的電子郵件動作處理常式頁面必須處理下列查詢 參數:
參數 模式 要完成的使用者管理動作。可以是下列任一值 下列值:
resetPassword
recoverEmail
verifyEmail
oobCode 一次性代碼,用於識別及驗證要求 API 金鑰 Firebase 專案的 API 金鑰,為了方便起見 繼續網址 這是選用的網址,提供將狀態傳回 下載應用程式這與重設密碼和電子郵件有關 驗證模式傳送密碼重設電子郵件或 驗證電子郵件, ActionCodeSettings
物件需要 並使用繼續網址來指定這個值。這個 可讓使用者從上次中斷的地方繼續 執行相關動作語言 。 BCP47 表示使用者語言代碼的語言標記 (例如
fr
)。您可以用這個值提供本地化的電子郵件 執行這項動作本地化可透過 Firebase 控制台進行,或藉由 才觸發電子郵件 動作。例如,使用 JavaScript:
firebase.auth().languageCode = 'fr';
。為提供一致的使用者體驗,請確保電子郵件動作處理常式 本地化內容與電子郵件範本相符。
以下範例說明如何處理 瀏覽器式處理常式(您也可以將處理常式實作為 Node.js 使用類似邏輯的應用程式)。
Web
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': "YOUR_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
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);
處理密碼重設要求時,請先使用以下程式碼驗證動作程式碼:
verifyPasswordResetCode
;取得使用者的新密碼 至confirmPasswordReset
。例如:Web
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
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. }); }
先驗證動作程式碼,處理電子郵件地址變更撤銷作業
checkActionCode
;然後透過applyActionCode
。例如:Web
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
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. }); }
呼叫
applyActionCode
來處理電子郵件地址驗證事宜。例如:Web
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
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. }); }
將網頁託管於某處,例如使用 Firebase Hosting。
接下來,您必須設定 Firebase 專案,才能連結至自訂電子郵件 動作處理常式。
電子郵件範本中的自訂處理常式連結
如要將 Firebase 專案設為使用自訂電子郵件動作處理常式,請按照下列步驟操作:
- 在 Firebase 控制台中開啟專案。
- 前往「驗證」部分的「電子郵件範本」頁面。
- 在任一「Email Types」項目中,按一下鉛筆圖示來編輯 電子郵件範本。
- 按一下「自訂動作網址」,並指定自訂電子郵件的網址 動作處理常式
儲存網址後,所有 Firebase 專案的電子郵件都會使用這個網址 範本。