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

Question

我在 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);
    }
  }

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

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

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

Answer 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

Answer 2

您可以在 Firebase 控制台 -> 身份验证 -> 电子邮件模板 -> 密码重置下自定义密码重置电子邮件，并将电子邮件中的链接更改为指向您自己的页面。 请注意， placeholder will be replaced by the password reset code in the URL.

Then, in your custom page, you can read the password reset code from the URL and do

firebase.auth().confirmPasswordReset(code, newPassword)
    .then(function() {
      // Success
    })
    .catch(function() {
      // Invalid code
    })

https://firebase.google.com/docs/reference/js/firebase.auth.Auth#confirmPasswordReset https://firebase.google.com/docs/reference/js/firebase.auth.Auth#verifyPasswordResetCode