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

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

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

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

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

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

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

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

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

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

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

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

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

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