สร้างตัวจัดการการดำเนินการอีเมลที่กำหนดเอง

การดำเนินการบางอย่างในการจัดการผู้ใช้ เช่น การอัปเดตที่อยู่อีเมลของผู้ใช้และการรีเซ็ตรหัสผ่านของผู้ใช้ ส่งผลให้มีการส่งอีเมลไปยังผู้ใช้ อีเมลเหล่านี้มีลิงก์ที่ผู้รับสามารถเปิดเพื่อดำเนินการให้เสร็จสิ้นหรือยกเลิกการดำเนินการจัดการผู้ใช้ โดยค่าเริ่มต้น อีเมลการจัดการผู้ใช้จะลิงก์ไปยังตัวจัดการการดำเนินการเริ่มต้น ซึ่งเป็นหน้าเว็บที่โฮสต์ที่ URL ในโดเมน Firebase Hosting ของโปรเจ็กต์

คุณสามารถสร้างและโฮสต์ตัวจัดการการดำเนินการอีเมลแบบกำหนดเองแทนเพื่อดำเนินการแบบกำหนดเองและรวมตัวจัดการการดำเนินการอีเมลกับเว็บไซต์ของคุณ

การดำเนินการจัดการผู้ใช้ต่อไปนี้กำหนดให้ผู้ใช้ดำเนินการโดยใช้ตัวจัดการการดำเนินการอีเมล:

• การรีเซ็ตรหัสผ่าน
• การเพิกถอนการเปลี่ยนแปลงที่อยู่อีเมล—เมื่อผู้ใช้เปลี่ยนที่อยู่อีเมลหลักของบัญชี Firebase จะส่งอีเมลไปยังที่อยู่เดิมเพื่อให้ผู้ใช้สามารถเลิกทำการเปลี่ยนแปลงได้
• การยืนยันที่อยู่อีเมล

หากต้องการปรับแต่งเครื่องจัดการการดำเนินการอีเมลของโปรเจ็กต์ Firebase คุณต้องสร้างและโฮสต์หน้าเว็บที่ใช้ Firebase JavaScript SDK เพื่อตรวจสอบความถูกต้องของคำขอและดำเนินการตามคำขอ จากนั้น คุณต้องปรับแต่งเทมเพลตอีเมลของโปรเจ็กต์ Firebase เพื่อลิงก์กับตัวจัดการการดำเนินการที่กำหนดเอง

สร้างหน้าตัวจัดการการดำเนินการอีเมล

1. Firebase เพิ่มพารามิเตอร์การค้นหาหลายตัวให้กับ URL ตัวจัดการการดำเนินการของคุณเมื่อสร้างอีเมลการจัดการผู้ใช้ ตัวอย่างเช่น:

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

   พารามิเตอร์เหล่านี้ระบุงานการจัดการผู้ใช้ที่ผู้ใช้กำลังทำ หน้าตัวจัดการการดำเนินการอีเมลของคุณต้องจัดการพารามิเตอร์แบบสอบถามต่อไปนี้:

   พารามิเตอร์
   โหมด	การดำเนินการจัดการผู้ใช้จะเสร็จสมบูรณ์ สามารถเป็นค่าใดค่าหนึ่งต่อไปนี้: resetPassword recoverEmail verifyEmail
   oobCode	รหัสแบบใช้ครั้งเดียว ใช้เพื่อระบุและยืนยันคำขอ
   apiKey	คีย์ API ของโปรเจ็กต์ Firebase มีให้เพื่อความสะดวก
   ContinueUrl	นี่คือ URL ทางเลือกที่ให้วิธีการส่งสถานะกลับไปยังแอปผ่าน URL สิ่งนี้เกี่ยวข้องกับการรีเซ็ตรหัสผ่านและโหมดการยืนยันอีเมล เมื่อส่งอีเมลรีเซ็ตรหัสผ่านหรืออีเมลยืนยัน ต้องระบุออบเจ็กต์ ActionCodeSettings พร้อม URL ดำเนินการต่อเพื่อให้ใช้งานได้ ซึ่งทำให้ผู้ใช้สามารถดำเนินการต่อจากที่ค้างไว้หลังจากดำเนินการกับอีเมล
   แลง	นี่คือแท็กภาษา 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);
   auth_handle_mgmt_query_params.js

   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);
   custom-email-handler.js

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.
     });
   }
   auth_handle_reset_password.js

   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.
     });
   }
   custom-email-handler.js

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.
     });
   }
   auth_handle_recover_email.js

   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.
     });
   }
   custom-email-handler.js

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.
     });
   }
   auth_handle_verify_email.js

   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.
     });
   }
   custom-email-handler.js

5. โฮสต์เพจไว้ที่ใดที่หนึ่ง เช่น ใช้ Firebase Hosting

ถัดไป คุณต้องกำหนดค่าโปรเจ็กต์ Firebase เพื่อลิงก์กับเครื่องจัดการการดำเนินการอีเมลที่กำหนดเองในอีเมลการจัดการผู้ใช้

ลิงก์ไปยังตัวจัดการที่กำหนดเองในเทมเพลตอีเมลของคุณ

ในการกำหนดค่าโปรเจ็กต์ Firebase ให้ใช้ตัวจัดการการดำเนินการอีเมลที่กำหนดเอง ให้ทำดังนี้

1. เปิดโปรเจ็กต์ของคุณใน คอนโซล Firebase
2. ไปที่หน้า เทมเพลตอีเมล ในส่วนการ ตรวจสอบสิทธิ์
3. ในรายการ ประเภทอีเมล ใดๆ ให้คลิกไอคอนดินสอเพื่อแก้ไขเทมเพลตอีเมล
4. คลิก กำหนด URL การดำเนินการ และระบุ URL ไปยังตัวจัดการการดำเนินการอีเมลที่กำหนดเองของคุณ

หลังจากที่คุณบันทึก URL แล้ว เทมเพลตอีเมลของโปรเจ็กต์ Firebase ทั้งหมดจะใช้ URL นั้น