React：验证来自 Firebase 的电子邮件会引发 auth/operation-not-allowed Firebase：错误（auth/operation-not-allowed）

Question

我正在尝试通过使用sendEmailVerification 发送电子邮件链接来执行电子邮件验证。我在我的电子邮件中收到了如下所示的电子邮件：

http://localhost:3000/signup-success?mode=verifyEmail&oobCode=oKyOD4XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXAAF-XCNUIg&apiKey=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&lang=en

我怀疑要验证电子邮件，我们需要有一个不同于signInWithEmailLink 的函数？

它重定向到我的注册成功页面，如下所示：

import React, { ReactElement } from 'react';
import auth from '../firebase/firebase_client';
import {
  User,
  isSignInWithEmailLink,
  signInWithEmailLink,
} from 'firebase/auth';
import { frontendRoutes } from '../components/constants/frontend-routes';
import Link from 'next/link';
import { useAppDispatch } from '../redux/app/hooks';
import { updateNotification } from '../redux/slices/notifications';
import { useRouter } from 'next/router';

export default function SignupSuccess(): ReactElement {
  const [user, setUser] = React.useState<User | null>(null);
  const dispatch = useAppDispatch();
  const [emailVerified, setEmailVerified] = React.useState(false);
  const router = useRouter();

  React.useEffect(() => {
    auth.onAuthStateChanged((user) => {
      let email;
      if (user !== null) {
        setUser(user);
        email = user.email;
        console.log('Email = ', email, user.emailVerified);
        if (isSignInWithEmailLink(auth, window.location.href)) {
        }
      } else {
        email = window.prompt('Please provide your email for confirmation');
      }
      if (email) {
        signInWithEmailLink(auth, email, window.location.href)
          .then((result) => {
            const user = result.user.displayName;
            dispatch(
              updateNotification({
                message: `Congrats ${
                  user || 'User'
                }. Your Email has been verified.`,
                status: 'success',
                title: 'Verification Success',
              })
            );
            console.log('Success');
            setEmailVerified(true);
          })
          .catch((error) => {
            console.log(
              'Error occured while verifying: ' + error.code,
              error.message
            );
            console.log('Error = ', error);
            dispatch(
              updateNotification({
                message: `Verification Failed. Common errors could be invalid email and invalid or expired OTPs.`,
                status: 'error',
                title: 'Verification Failed',
              })
            );
          });
      } else {
        dispatch(
          updateNotification({
            message: 'Verification Failed as no email was provided',
            status: 'error',
            title: 'Verification Failed',
          })
        );
        setTimeout(() => router.push('/'), 3000);
      }
    });
  }, [dispatch, router]);

  if (user) {
    return (
      <div>
        <h1>Welcome {user.email}</h1>
        {emailVerified ? (
          <p>
            Congrats, your email has been verified! Please wait for admin
            approval before you could start using Break Free Services. Go Back
            to{' '}
            <Link href={frontendRoutes.LOGIN_FOR_MERCHANT_INDIVIDUAL}>
              Login Page
            </Link>{' '}
          </p>
        ) : (
          <p>Verifying...</p>
        )}
      </div>
    );
  }
  return <div>Continue to Sign Up First.</div>;
}

我在 Firebase 中启用的提供程序是：- Email Provider 和 Phone Number。但我仍然收到此错误，谁能告诉我出了什么问题？

编辑 1： 我刚刚意识到我所做的方法调用只是用电子邮件登录而不是验证一个。似乎您无法将用户重定向到您的网站，然后从那里处理响应，除非您自己有自定义域。如果有人知道将用户重定向到本地主机或您的网站并从那里进行验证，请添加它，否则我会关闭问题。

Answer 1

不，您不需要signInWithEmailLink 函数。 auth.onAuthStateChanges 是在 firebase 中使用方法的旧版本。尝试使用onAuthSateChanges(auth, user => {...}) 这个函数是一个观察者，它正在观察用户正在发生的事情。要使用电子邮件和密码注册，您需要signInWithEmailAndPassword(auth, email, password) 功能。

发送电子邮件验证：

火力基地 9+

import { getAuth, sendEmailVerification } from "firebase/auth";

const auth = getAuth();
sendEmailVerification(auth.currentUser)

火力基地 X

firebase.auth().currentUser.sendEmailVerification()

sugnInWithEmailLink() 函数是某种登录函数，例如signInWithEmailAndPasswird()