自定义 Firebase “电子邮件验证”、“密码重置”页面答案

【问题标题】：Customize Firebase "email validation", "password reset" pages自定义 Firebase “电子邮件验证”、“密码重置”页面
【发布时间】：2022-07-06 03:57:54
【问题描述】：

我在 Angular 应用程序（使用 Angular-fire）中使用 Firebase 和 Firestore 身份验证，效果很好。对于“忘记密码”和“电子邮件验证”功能，我确实在 AngularFireAuth 服务上调用了这些方法：

  sendVerificationMail() {
    return this.afAuth.currentUser
      .then((u: any) => u.sendEmailVerification())
      .then(() => {
        this.router.navigate(['/', 'auth', 'verify-email']);
      });
  }
  async forgotPassword(passwordResetEmail: string) {
    try {
      await this.afAuth.sendPasswordResetEmail(passwordResetEmail);
      window.alert('Password reset email sent, check your inbox.');
    } catch (error) {
      window.alert(error);
    }
  }

它有效，我收到电子邮件以验证我的电子邮件或重置我的密码，但是：

它们是类似 https://xxxx.firebaseapp.com 的 URL，而不是我的自定义域
一旦他们设置了新密码，或者只是点击了电子邮件验证链接，我就无法将他们重定向到主页
该页面的设计与我的 Angular 应用不同。

我的问题是，我可以提供一些自定义页面的 URL 吗？还是定制设计？或者一些重定向动作？想要更好地集成到我的网站中？

【问题讨论】：

标签： angular firebase angularfire2

【解决方案1】：

这是用于重置密码后的重定向，您必须通过 ActionCodeSettings 传递一个继续 URL 以将用户重定向回应用程序：

var actionCodeSettings = {
  // After password reset, the user will be give the ability to go back
  // to this page.
  url: 'https://www.example.com/afterPasswordReset',
  handleCodeInApp: false
};
firebase.auth().sendPasswordResetEmail(email, actionCodeSettings)
  .then(function() {
    // Password reset email sent.
  })
  .catch(function(error) {
    // Error occurred. Inspect error.code.
  });

详细了解 ActionCodeSettings 和在重定向中传递状态：https://firebase.google.com/docs/auth/web/passing-state-in-email-actions

您还可以在此处构建自己的自定义登录页面：https://firebase.google.com/docs/auth/custom-email-handler

【讨论】：