สร้างเครื่องจัดการอีเมลที่กำหนดเอง

การดำเนินการด้านการจัดการผู้ใช้บางอย่าง เช่น การอัปเดตอีเมลของผู้ใช้และการรีเซ็ตรหัสผ่านของผู้ใช้ จะส่งผลให้มีการส่งอีเมลไปยังผู้ใช้ อีเมลเหล่านี้มีลิงก์ที่ผู้รับสามารถเปิดเพื่อดำเนินการให้เสร็จสมบูรณ์หรือยกเลิกการดำเนินการจัดการผู้ใช้ โดยค่าเริ่มต้น อีเมลการจัดการผู้ใช้จะลิงก์ไปยังตัวแฮนเดิลการดำเนินการเริ่มต้น ซึ่งเป็นหน้าเว็บที่โฮสต์ใน 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 ดำเนินการต่อเพื่อให้พร้อมใช้งาน ซึ่งจะช่วยให้ผู้ใช้ดำเนินการต่อจากจุดที่ค้างไว้ได้ หลังจากดำเนินการกับอีเมล
   lang	นี่คือแท็กภาษา BCP47 ที่ไม่บังคับซึ่งแสดงถึงภาษาของผู้ใช้ (เช่น fr) คุณสามารถใช้ค่านี้เพื่อระบุหน้าตัวแฮนเดิลการดำเนินการทางอีเมลที่แปลแล้วให้แก่ผู้ใช้ คุณตั้งค่าการแปลได้ผ่านคอนโซล Firebase หรือแบบไดนามิกโดย เรียกใช้ Client API ที่เกี่ยวข้องก่อนที่จะทริกเกอร์การดำเนินการทางอีเมล ตัวอย่างเช่น การใช้ 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);
   auth_handle_mgmt_query_params.js

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

2. จัดการคำขอรีเซ็ตรหัสผ่านโดยตรวจสอบรหัสการดำเนินการกับ 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.
     });
   }
   auth_handle_reset_password.js

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

3. จัดการการเพิกถอนการเปลี่ยนแปลงอีเมลโดยตรวจสอบรหัสการดำเนินการก่อน ด้วย 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.
     });
   }
   auth_handle_recover_email.js

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

4. จัดการการยืนยันอีเมลโดยการเรียกใช้ 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.
     });
   }
   auth_handle_verify_email.js

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

5. โฮสต์หน้าเว็บที่ใดที่หนึ่ง เช่น ใช้ Firebase Hosting

การแก้ปัญหา: คีย์ API ที่ล้าสมัยหรือไม่ถูกต้องในลิงก์การดำเนินการ

แบ็กเอนด์การตรวจสอบสิทธิ์ Firebase จะจัดการคีย์ API ที่ฝังอยู่ใน ลิงก์การดำเนินการที่สร้างขึ้น เช่น พารามิเตอร์ apiKey ใน URL หากคุณหมุนเวียนคีย์ API ของโปรเจ็กต์หรือลบคีย์ที่เชื่อมโยงกับ Firebase Auth ในตอนแรก ผู้ใช้อาจได้รับลิงก์ที่มีคีย์ไม่ถูกต้อง ซึ่งจะทำให้เกิดข้อผิดพลาด auth/invalid-api-key

วิธีแก้ไขปัญหามีดังนี้

• หากคุณใช้ Firebase Hosting: ระบบอาจแคชคีย์ API ไว้ใน init.json ทําให้เว็บไซต์โฮสติ้ง (firebase deploy --only hosting) เวอร์ชันใหม่ใช้งานได้เพื่อบังคับให้บริการข้อมูลเมตาแบ็กเอนด์สร้างการกําหนดค่าใหม่ด้วยคีย์ API ที่ใช้งานอยู่
• หากต้องอัปเดตคีย์แบ็กเอนด์เอง: เนื่องจากแก้ไขการแมปคีย์ API แบ็กเอนด์โดยตรงโดยใช้คอนโซลหรือ SDK ไม่ได้ คุณจึงต้องติดต่อทีมสนับสนุนเพื่อขออัปเดตการกำหนดค่าการตรวจสอบสิทธิ์แบ็กเอนด์สำหรับโปรเจ็กต์

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

ลิงก์ไปยังแฮนเดิลที่กำหนดเองในเทมเพลตอีเมล

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

1. ในFirebaseคอนโซล ให้ไปที่ ความปลอดภัย > การตรวจสอบสิทธิ์ > แท็บเทมเพลต

2. ในรายการประเภทอีเมล ให้คลิกไอคอนดินสอเพื่อแก้ไข เทมเพลตอีเมล

3. คลิกปรับแต่ง URL การดำเนินการ แล้วระบุ URL ไปยังตัวแฮนเดิลการดำเนินการทางอีเมลที่กำหนดเอง

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

เริ่มต้น