电话号码验证和 Recaptcha 禁用问题 - 2024

Question

我已经在 Firebase 项目的常规设置中添加了 SHA1 和 SHA256，但我仍然面临一个问题：在电话号码验证期间，我被重定向到 Expo React Native 应用程序中的 Recaptcha 页面。

尽管遵循 Firebase 文档并确保正确添加 SHA 证书，问题仍然存在。下面是我初始化 Firebase 并处理电话号码验证的代码片段。

  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-firebase/app": "^18.8.0",
    "@react-native-firebase/auth": "^18.8.0",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.9",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@reduxjs/toolkit": "^2.0.1",
    "axios": "^1.6.5",
    "expo": "~49.0.8",
    "expo-dev-client": "~2.4.13",
    "expo-font": "~11.4.0",
    "expo-image-picker": "~14.3.2",
    "expo-secure-store": "~12.3.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "lottie-react-native": "5.1.6",
    "memoize": "^10.0.0",
    "react": "18.2.0",
    "react-hook-form": "^7.49.0",
    "react-native": "0.72.10",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-paper": "^5.10.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-youtube-iframe": "^2.3.0",
    "react-redux": "^9.0.4",
    "swr": "^2.2.4",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "react-native-dotenv": "^3.4.9"
  },

 const signInWithPhoneNumber = async (phoneNumber) => {
    try {
      const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
      setConfirm(confirmation);
    } catch (error) {
      console.log("Invalid code.", error);
      dispatch(
        showSnackbar({
          message:
            "Failed to verify phone number. Please try again later or contact support.",
          type: "error",
        })
      );
    }
  };

  const resendCode = async () => {
    try {
      const confirmation = await auth().signInWithPhoneNumber(
        registerUser?.phone,
        true
      );
      setConfirm(confirmation);
    } catch (error) {
      console.log("Invalid code.", error);
      dispatch(
        showSnackbar({
          message: "Failed to resend OTP.",
          type: "error",
        })
      );
    }
  };

  const handleVerifyCode = async () => {
    try {
      dispatch(startLoading());
      const otpCode = otp.join("");
      const result = await confirm.confirm(otpCode);
      if (result.user && Object.keys(registerUser).length !== 0) {
        const userData = {
          ...registerUser,
          fireBaseSessionId: result?.user?.uid,
          verifyWith: "phone",
        };
        const response = await instance.post("/api/user", userData);

        if (response?.status === 201) {
          const { details, token } = response?.data;
          dispatch(setCurrentUser(details));
          await SecureStore.setItemAsync("token", JSON.stringify(token));
          dispatch(
            setTokens({
              accessToken: token.accessToken,
              refreshToken: token.refreshToken,
            })
          );
          navigation.navigate("Home");
        }
      }
    } catch (error) {
      dispatch(
        showSnackbar({
          message: error?.response?.message || error?.message || error,
          type: "error",
        })
      );
      console.log("Invalid code.", error?.message) || error;
    } finally {
      dispatch(stopLoading());
    }
  };

  const onSubmit = async (data) => {
    dispatch(startLoading());
    const newUser = {
      ...data,
      country: selectedCountry,
    };
    try {
      setRegisterUser(newUser);
      await signInWithPhoneNumber(data.phone);
    } catch (error) {
      console.error("Sign-up error:", error.message);
    } finally {
      dispatch(stopLoading());
    }
  };

Answer 1

如果您正在使用 Expo，我鼓励您遵循 React Native Firebase Expo 托管工作流程文档，并让 Expo 构建系统为您处理所有原生的垃圾。