Firebase 在单击验证链接后将用户重定向到页面

Question

我在我的网络应用程序中使用 Firebase 和 Ionic，我想在用户点击验证电子邮件中的链接后将用户重定向到特定页面（在我的例子中是登录页面）。
目前，当用户单击验证链接时，他会被重定向到另一个浏览器页面，显示他已确认电子邮件。

我想将他直接重定向到我的网络应用程序的页面，而不经过该确认。
可以这样做吗？

Answer 1

是的，这是可能的。在左侧的 firebase.console 中查找“身份验证”。 然后找到“模板”并查找“电子邮件地址验证”。我认为它是默认打开的。在模板上您会看到一支小铅笔，单击它。之后，您可以根据需要更改模板。在底部您将找到“自定义操作 URL”链接。打开此链接，将您的 URL 粘贴到模式窗口中并保存。就是这样。

Answer 2

我无法让这里的任何解决方案发挥作用。因此，在查找文档后，我发现您在电子邮件验证后添加了一个继续 URL，Firebase 在确认后将重定向到该继续 URL。 https://firebase.google.com/docs/auth/web/passing-state-in-email-actions

验证电子邮件后，如果您在 Firebase 规则中使用

email_verified

，您可能还必须强制刷新 Firebase 令牌。

你可以做我做的事情。

1. 通过

   ActionCodeSettings

   发送电子邮件验证。

  auth.createUserWithEmailAndPassword(email, password)
  .then((res) => {
    res.user.sendEmailVerification({
      url: "https://example.com/path?confirm_email=true",
    });
    return createUser({ email, uid: res.user.uid, name });
  })

这将使 Firebase 在电子邮件验证后重定向到

https://example.com/path?confirm_email=true

。

confirm_email

是为了让我知道何时强制刷新 firebase 令牌。

（可选）

2. 一旦重定向到您想要的页面，您可以检查confirm_email 参数并相应地强制刷新令牌。

const urlParams = new URLSearchParams(window.location.search);
const isConfirmingEmail = urlParams.get('confirm_email');


auth.currentUser.getIdToken(!!isConfirmingEmail).then(() => {
  // Refreshed Token
})

Answer 3

不幸的是，您无法让 Firebase 进行身份验证然后重定向。目前接受的答案已经完成了一半。进入“Firebase -> 身份验证 -> 模板 -> 电子邮件地址验证 -> 编辑（又名铅笔按钮）”。然后，您可以单击“自定义操作 URL”并在此处插入您想要的任何 URL。

请注意，您输入的此 URL 不会在执行电子邮件验证后将您重定向到该页面。它所做的只是不生成链接

<firebase email verification link>?mode=verifyEmail&oobCode=<code>

，而是将您引导至

<link you put in>?mode=verifyEmail&oobCode=<code>

。这意味着当用户登陆此页面时，您必须自己处理电子邮件验证。这意味着解析查询参数，并将此信息发送到后端的 Firebase 以验证有问题的电子邮件。请参阅以下内容，了解如何验证电子邮件地址：https://firebase.google.com/docs/reference/rest/auth#section-confirm-email-verification

有关此内容的更多信息，请访问：https://support.google.com/firebase/answer/7000714

Answer 4

这是对我有帮助的代码。我只为您提供您需要的必要代码您必须自己填写其余的代码。

Firebase v9 示例

import React from "react";
import {
  createUserWithEmailAndPassword,
  sendEmailVerification
} from "@firebase/auth";
import {useHistory} from "react-router-dom"

export default function SignUp() {
  const history = useHistory()
  async function submit(e) {
    e.preventDefault() // Prevent default.

    // Sign your user using createUserWithEmailAndPassword

    // Provide user's email and password
    await createUserWithEmailAndPassword(email, password);

    // Send verification email.
    await sendEmailVerification(userCredentials.user);

    let interval = setInterval(async() => {
      if (userCredentials.user.emailVerified) {
        clearInterval(interval);
        history.push("/desired-link");
      }
      await userCredentials.user.reload();
    }, 2000);
  }
  return < > { /* your sign up form */ } < />;
}

Firebase v8 代码：

import React from "react";
import firebase from "firebase"
import {useHistory} from "react-router-dom"

export default function SignUp() {
    const history = useHistory()
    async function submit(e) {
        e.preventDefault() // Prevent default.
        
        // Sign your user using createUserWithEmailAndPassword
        
        // Provide user's email and password
        let userCredentials = await firebase.auth.createUserWithEmailAndPassword(email, password);

        // Send verification email.
        await userCredentials.user.sendEmailVerification()

        let interval = setInterval(async () => {
            if (userCredentials.user.emailVerified) {
                clearInterval(interval);
                history.push("/desired-link");
            }
           await  userCredentials.user.reload();
        }, 2000);
    }
    return <>{/* your sign up form */}</>;
}

用户点击验证链接后，他会发现您的网页重定向到

<domain.name>/desired-link

。

但是，给你一个额外的提示... 不要操纵操作网址。这是因为这样做，

firebase.auth.currentUser.emailVerified

将始终返回 false。这意味着，用户的电子邮件永远不会被验证。这是因为此操作 URL 负责电子邮件验证。因此，不要这样做，而是效仿我的例子。这适用于本地主机和您的自定义域。