如何自定义Firebase邮箱验证、密码重置页的域名、跳转与样式

Firebase Auth 完全支持自定义邮件链接域名、自定义操作页面样式、自定义完成后跳转逻辑，不需要使用Firebase提供的默认托管页面，所有交互都可以整合到你的Angular应用内。

1. 配置自定义域名与自定义动作链接 #

• 首先进入Firebase控制台的Authentication板块，在「设置-授权域名」中添加你自己的站点域名，否则Firebase会拦截非信任域名的操作请求。
• 你可以在两个层面配置邮件跳转的目标地址：
  • 控制台全局配置：进入「邮件模板」标签页，分别编辑验证邮箱、重置密码的邮件模板，将模板内默认的https://xxxx.firebaseapp.com基地址替换为你的自定义域名下的专属路由，比如https://your-domain.com/auth/action。
  • 代码层面动态配置：调用发送邮件的方法时传入actionCodeSettings参数，灵活指定跳转地址，还可以拼接自定义参数用于后续逻辑判断，修改后的代码示例如下：

sendVerificationMail() {
  const actionCodeSettings = {
    // 指向你Angular应用内的自定义动作处理页，拼接后续要跳转的地址参数
    url: 'https://your-domain.com/auth/action?redirectTo=/home',
    handleCodeInApp: true
  };
  return this.afAuth.currentUser
    .then((u: any) => u.sendEmailVerification(actionCodeSettings))
    .then(() => {
      this.router.navigate(['/', 'auth', 'verify-email']);
    });
}

async forgotPassword(passwordResetEmail: string) {
  try {
    const actionCodeSettings = {
      url: 'https://your-domain.com/auth/action?redirectTo=/home',
      handleCodeInApp: true
    };
    await this.afAuth.sendPasswordResetEmail(passwordResetEmail, actionCodeSettings);
    window.alert('密码重置邮件已发送，请查收收件箱。');
  } catch (error) {
    window.alert(error);
  }
}

2. 自定义操作页面样式 #

因为邮件链接已经直接指向你Angular应用内的路由，这个页面的UI、交互逻辑完全由你自主开发，可以和站点整体设计风格完全统一，不受Firebase默认页面的限制。
你只需要在这个自定义页面中解析URL携带的参数：

• mode：标识当前操作类型，可选值为resetPassword（重置密码）、verifyEmail（验证邮箱）
• oobCode：Firebase生成的操作校验码，是完成对应操作的核心凭证
• 你自己拼接的自定义参数，比如上面例子里的redirectTo
  解析完成后调用AngularFireAuth提供的对应API完成操作即可，核心逻辑示例：

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-auth-action',
  template: `
    <!-- 这里完全自定义页面样式，和站点其他UI保持一致即可 -->
    <div class="auth-wrapper">
      <div *ngIf="mode === 'resetPassword'">
        <h3>设置新密码</h3>
        <input type="password" [(ngModel)]="newPassword" placeholder="请输入新密码">
        <button (click)="confirmReset()">提交</button>
      </div>
      <div *ngIf="mode === 'verifyEmail'">
        <h3>邮箱验证</h3>
        <p *ngIf="verifySuccess">验证成功，即将跳转</p>
        <p *ngIf="verifyFail">验证失败，请重新发送验证邮件</p>
      </div>
    </div>
  `
})
export class AuthActionComponent implements OnInit {
  mode: string;
  oobCode: string;
  redirectTo = '/home';
  newPassword: string;
  verifySuccess = false;
  verifyFail = false;

  constructor(
    private route: ActivatedRoute,
    private afAuth: AngularFireAuth,
    private router: Router
  ) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.mode = params['mode'];
      this.oobCode = params['oobCode'];
      if (params['redirectTo']) this.redirectTo = params['redirectTo'];

      // 邮箱验证场景可以进入页面自动处理
      if (this.mode === 'verifyEmail') this.handleVerify();
    })
  }

  async handleVerify() {
    try {
      await this.afAuth.applyActionCode(this.oobCode);
      this.verifySuccess = true;
      setTimeout(() => this.router.navigateByUrl(this.redirectTo), 1500);
    } catch (e) {
      this.verifyFail = true;
    }
  }

  async confirmReset() {
    try {
      await this.afAuth.verifyPasswordResetCode(this.oobCode);
      await this.afAuth.confirmPasswordReset(this.oobCode, this.newPassword);
      this.router.navigateByUrl(this.redirectTo);
    } catch (e) {
      window.alert('重置链接已失效，请重新申请重置密码');
    }
  }
}

记得在Angular路由配置中添加这个页面对应的路由，且不要给这个路由加登录拦截，否则未登录用户点击邮件链接会被挡在登录页。

3. 配置操作完成后的重定向逻辑 #

重定向逻辑完全自主可控：你可以在生成邮件链接时，就把操作完成后需要跳转的目标地址作为参数拼接到链接里，在自定义动作页处理完邮箱验证、密码重置的逻辑后，直接调用Angular Router跳转到目标地址即可，跳转时机、跳转目标地址都可以根据业务需求自由配置，没有限制。

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