如何借助Firebase Auth自动发送密码重置邮件？

一、添加「忘记密码」UI组件 #

在现有登录页面中增加重置密码入口，点击后显示邮箱输入表单：

<!-- 登录页的忘记密码触发链接 -->
<p><a href="#forgot-password" id="forgot-password-link">无法登录？重置密码</a></p>

<!-- 忘记密码表单（默认隐藏） -->
<div id="forgot-password-form" style="display:none;">
  <h3>重置密码</h3>
  <input type="email" id="reset-email" placeholder="输入注册邮箱">
  <button id="send-reset-btn">发送重置链接</button>
  <p id="reset-feedback"></p>
</div>

二、前端触发密码重置邮件（用Web SDK简化流程） #

无需使用Admin SDK搭建SMTP，直接调用Firebase Web SDK的sendPasswordResetEmail方法，Firebase会自动发送重置邮件：

先确保已初始化Firebase（和登录页配置一致）：

import { initializeApp } from "firebase/app";
import { getAuth, sendPasswordResetEmail } from "firebase/auth";

// 你的Firebase配置，从控制台复制
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  // 其他配置项
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

绑定表单交互逻辑：

// 显示/隐藏忘记密码表单
document.getElementById('forgot-password-link').addEventListener('click', (e) => {
  e.preventDefault();
  document.getElementById('forgot-password-form').style.display = 'block';
});

// 发送重置链接按钮事件
document.getElementById('send-reset-btn').addEventListener('click', async () => {
  const email = document.getElementById('reset-email').value;
  const feedback = document.getElementById('reset-feedback');
  
  try {
    await sendPasswordResetEmail(auth, email);
    feedback.textContent = '重置链接已发送至你的邮箱，请查收';
    feedback.style.color = 'green';
  } catch (error) {
    // 处理错误（如邮箱未注册、格式错误等）
    feedback.textContent = error.message;
    feedback.style.color = 'red';
  }
});

三、实现密码重置页面（处理邮件链接） #

创建reset-password.html页面，处理用户点击重置链接后的逻辑，补全文档中缺失的函数：

<!DOCTYPE html>
<html>
<head>
  <title>重置密码</title>
</head>
<body>
  <div id="reset-form">
    <h3>设置新密码</h3>
    <input type="password" id="new-password" placeholder="输入新密码">
    <button id="confirm-reset-btn">确认重置</button>
    <p id="status-text"></p>
  </div>

  <script type="module">
    import { initializeApp } from "firebase/app";
    import { getAuth, confirmPasswordReset } from "firebase/auth";

    // Firebase初始化
    const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN"
    };
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    // 实现URL参数获取函数
    function getParameterByName(name, url = window.location.href) {
      name = name.replace(/[\[\]]/g, '\\$&');
      const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
      const results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    // 处理密码重置逻辑
    function handleResetPassword(auth, actionCode, continueUrl) {
      const passwordInput = document.getElementById('new-password');
      const confirmBtn = document.getElementById('confirm-reset-btn');
      const statusText = document.getElementById('status-text');

      confirmBtn.addEventListener('click', async () => {
        const newPassword = passwordInput.value;
        try {
          await confirmPasswordReset(auth, actionCode, newPassword);
          statusText.textContent = '密码重置成功！即将返回登录页...';
          statusText.style.color = 'green';
          // 跳转回登录页（或指定的continueUrl）
          setTimeout(() => {
            window.location.href = continueUrl || '/login.html';
          }, 2000);
        } catch (error) {
          statusText.textContent = error.message;
          statusText.style.color = 'red';
        }
      });
    }

    // 页面加载时解析URL参数
    document.addEventListener('DOMContentLoaded', () => {
      const mode = getParameterByName('mode');
      const actionCode = getParameterByName('oobCode');
      const continueUrl = getParameterByName('continueUrl');

      if (mode === 'resetPassword' && actionCode) {
        handleResetPassword(auth, actionCode, continueUrl);
      } else {
        document.getElementById('reset-form').innerHTML = '<p>无效的重置链接，请重新申请</p>';
      }
    });
  </script>
</body>
</html>

四、可选：自定义邮件模板 #

若需修改重置邮件的内容/样式，可直接在Firebase控制台「Authentication」→「模板」中编辑「密码重置」模板，无需自行搭建邮件服务。

内容的提问来源于stack exchange，提问作者Epimetheus14