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

Question

我在Angular应用程序（带有Angular-Fire）中使用Firebase和Firestore Auth，效果很好。 对于功能“密码忘记”和“电子邮件验证”，我确实在 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. 它们是 ： URL喜欢 https://xxxx.firebaseapp.com ，而不是我的自定义域
2. 一旦设置了新密码，或者只是单击了电子邮件验证链接，我无法重定向他们到主页上​​的
3. 页面与我的Angular应用程序的设计不同。

我的问题是，我可以为某些自定义页面提供URL吗？还是自定义设计？还是一些重定向动作？将某些内容更好地集成到我的网站上？

Answer 1

您可以在firebase控制台下自定义密码重置电子邮件 - ＆gt; auth-＆gt;电子邮件模板 - ＆gt;重置密码，然后更改电子邮件中的链接，以指向您自己的页面。请注意，占位符将被URL中的密码重置代码替换。

然后，在自定义页面中，您可以从URL读取密码重置代码，并执行

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

https://firebase.google.com/docs/reference/js/firebase.auth.auth.auth.auth#confirmpasswordreset https://firebase.google.com/docs/reference/js/firebase.auth.auth.auth#verifypasswordresetcode

Answer 2

这是用于重置后重定向的重定向，您必须通过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

You can also build your own custom landing page here: