Trang này được dịch bởi Cloud Translation API.

Tạo trình xử lý thao tác tuỳ chỉnh với email

Một số thao tác quản lý người dùng, chẳng hạn như cập nhật địa chỉ email và đặt lại mật khẩu của người dùng, dẫn đến việc email được gửi cho người dùng. Những email này chứa các đường liên kết mà người nhận có thể mở để hoàn tất hoặc huỷ thao tác quản lý người dùng. Theo mặc định, các email quản lý người dùng sẽ liên kết đến trình xử lý hành động mặc định – một trang web được lưu trữ tại một URL trong miền Lưu trữ Firebase của dự án.

Thay vào đó, bạn có thể tạo và lưu trữ một trình xử lý thao tác qua email tuỳ chỉnh để xử lý tuỳ chỉnh và tích hợp trình xử lý hành động qua email với trang web của mình.

Các thao tác quản lý người dùng sau đây yêu cầu người dùng hoàn tất thao tác đó bằng cách sử dụng một trình xử lý thao tác qua email:

Đặt lại mật khẩu
Thu hồi thay đổi địa chỉ email – khi người dùng thay đổi địa chỉ email chính của tài khoản, Firebase sẽ gửi email đến các địa chỉ cũ của họ để cho phép họ hoàn tác thay đổi
Xác minh địa chỉ email

Để tuỳ chỉnh trình xử lý hành động qua email của dự án Firebase, bạn phải tạo và lưu trữ một trang web sử dụng SDK JavaScript của Firebase để xác minh tính hợp lệ của yêu cầu và hoàn tất yêu cầu. Sau đó, bạn phải tuỳ chỉnh các mẫu email của dự án Firebase để liên kết với trình xử lý hành động tuỳ chỉnh.

Tạo trang trình xử lý thao tác qua email

Firebase thêm một số tham số truy vấn vào URL của trình xử lý hành động khi tạo email quản lý người dùng. Ví dụ:

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

Các tham số này chỉ định tác vụ quản lý người dùng mà người dùng đang hoàn thành. Trang trình xử lý thao tác qua email của bạn phải xử lý các tham số truy vấn sau:

Thông số
chế độ	Thao tác quản lý người dùng cần hoàn tất. Có thể là một trong những giá trị sau: `resetPassword` `recoverEmail` `verifyEmail`
mã oob	Mã dùng một lần, dùng để nhận dạng và xác minh yêu cầu
Khoá api	Khoá API cho dự án Firebase của bạn, được cung cấp để thuận tiện
URL tiếp tục	Đây là một URL không bắt buộc cung cấp cách chuyển trạng thái trở lại ứng dụng thông qua một URL. Điều này liên quan đến chế độ đặt lại mật khẩu và xác minh email. Khi gửi email đặt lại mật khẩu hoặc email xác minh, đối tượng `ActionCodeSettings` cần được chỉ định cùng với một URL tiếp tục để có thể sử dụng tính năng này. Điều này giúp người dùng có thể tiếp tục từ nơi họ đã dừng lại sau một hành động qua email.
ngôn ngữ	Đây là thẻ ngôn ngữ BCP47 (không bắt buộc) thể hiện ngôn ngữ của người dùng (ví dụ: `fr`). Bạn có thể sử dụng giá trị này để cung cấp các trang trình xử lý thao tác qua email đã bản địa hoá cho người dùng. Bạn có thể thiết lập bản địa hoá thông qua Bảng điều khiển của Firebase hoặc tự động hoá bằng cách gọi API ứng dụng tương ứng trước khi kích hoạt hành động gửi qua email. Ví dụ: sử dụng JavaScript: `firebase.auth().languageCode = 'fr';`. Để người dùng có trải nghiệm nhất quán, hãy đảm bảo bản bản địa hoá trình xử lý thao tác qua email khớp với mẫu email.

Ví dụ sau cho thấy cách bạn có thể xử lý các tham số truy vấn trong một trình xử lý dựa trên trình duyệt. (Bạn cũng có thể triển khai trình xử lý dưới dạng ứng dụng Node.js bằng cách sử dụng logic tương tự.)

API mô-đun 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

API không gian tên trên 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

Xử lý các yêu cầu đặt lại mật khẩu bằng cách xác minh mã hành động trước bằng verifyPasswordResetCode; sau đó lấy mật khẩu mới từ người dùng và truyền mật khẩu đó đến confirmPasswordReset. Ví dụ:

API mô-đun 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

API không gian tên trên 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

Xử lý việc thu hồi thay đổi địa chỉ email bằng cách xác minh mã hành động trước bằng checkActionCode; sau đó khôi phục địa chỉ email của người dùng bằng applyActionCode. Ví dụ:

API mô-đun 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

API không gian tên trên 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

Xử lý quy trình xác minh địa chỉ email bằng cách gọi applyActionCode. Ví dụ:

API mô-đun 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

API không gian tên trên 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

Lưu trữ trang ở một nơi nào đó, ví dụ: sử dụng tính năng Lưu trữ Firebase.

Tiếp theo, bạn phải định cấu hình dự án Firebase để liên kết với trình xử lý hành động qua email tuỳ chỉnh trong email quản lý người dùng của trình xử lý đó.

Liên kết đến trình xử lý tuỳ chỉnh trong các mẫu email của bạn

Để định cấu hình dự án Firebase nhằm sử dụng trình xử lý hành động qua email tuỳ chỉnh, hãy làm như sau:

Mở dự án của bạn trong bảng điều khiển của Firebase.
Chuyển tới trang Mẫu email trong phần Xác thực.
Trong bất kỳ mục Loại email nào, hãy nhấp vào biểu tượng bút chì để chỉnh sửa mẫu email.
Nhấp vào tuỳ chỉnh URL thao tác rồi chỉ định URL cho trình xử lý thao tác qua email tuỳ chỉnh.

Sau khi bạn lưu URL, tất cả mẫu email của dự án Firebase sẽ sử dụng URL đó.

Nếu đang sử dụng miền tuỳ chỉnh, ngay cả khi không tuỳ chỉnh trình xử lý thao tác qua email, bạn vẫn nên hoàn tất bước này để các email quản lý người dùng liên kết đến miền của bạn thay vì miền firebaseapp.com mặc định.