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

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

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

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

  • การรีเซ็ตรหัสผ่าน
  • การเพิกถอนการเปลี่ยนแปลงที่อยู่อีเมล เมื่อผู้ใช้เปลี่ยนที่อยู่อีเมลหลักของบัญชี 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 ของคุณมีให้เพื่อความสะดวก
    ดำเนินการต่อUrl นี่คือ URL ทางเลือกที่ให้วิธีส่งสถานะกลับไปยังแอปผ่าน URL สิ่งนี้เกี่ยวข้องกับการรีเซ็ตรหัสผ่านและโหมดการยืนยันอีเมล เมื่อส่งอีเมลรีเซ็ตรหัสผ่านหรืออีเมลยืนยัน จะต้องระบุออบเจ็กต์ ActionCodeSettings พร้อมด้วย URL ดำเนินการต่อเพื่อให้สามารถใช้งานได้ ซึ่งจะทำให้ผู้ใช้สามารถดำเนินการต่อจากจุดที่พวกเขาค้างไว้หลังจากดำเนินการกับอีเมลได้
    หลาง

    นี่คือแท็กภาษา BCP47 ที่ไม่บังคับซึ่งแสดงถึงสถานที่ของผู้ใช้ (เช่น fr ) คุณสามารถใช้ค่านี้เพื่อจัดเตรียมเพจตัวจัดการการดำเนินการอีเมลที่แปลเป็นภาษาท้องถิ่นแก่ผู้ใช้ของคุณ

    สามารถตั้งค่าการแปลเป็นภาษาท้องถิ่นผ่านคอนโซล Firebase หรือแบบไดนามิกโดยการเรียก API ไคลเอ็นต์ที่เกี่ยวข้องก่อนที่จะทริกเกอร์การดำเนินการอีเมล ตัวอย่างเช่น การใช้ JavaScript: firebase.auth().languageCode = 'fr'; .

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

    ตัวอย่างต่อไปนี้แสดงวิธีที่คุณอาจจัดการกับพารามิเตอร์การสืบค้นในตัวจัดการที่ใช้เบราว์เซอร์ (คุณยังสามารถใช้ตัวจัดการเป็นแอปพลิเคชัน Node.js โดยใช้ตรรกะที่คล้ายกัน)

    Web modular API

    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 namespaced API

    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 modular API

    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 namespaced API

    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 modular API

    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 namespaced API

    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 modular API

    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 namespaced API

    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 Hosting

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

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

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

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