如何在本机react中禁用 Firebase 电话号码身份验证 reCapcha?

IT技术 reactjs firebase react-native google-cloud-firestore firebase-authentication
2021-05-07 04:52:20

如何在本机react中禁用谷歌 Firebase 身份验证 ReCaptcha?我参考了很多资源我还没有找到任何解决方案。

import React, { useState, useRef } from "react";
import { Text, TextInput, TouchableOpacity, View } from "react-native";
import { FirebaseRecaptchaVerifierModal } from "expo-firebase-recaptcha";
import firebase from "../Firebase/Firebase";

export default Phone = () => {
  const [verificationId, setVerificationId] = React.useState();
  const [verificationCode, setVerificationCode] = React.useState();
  const [phoneNumber, setPhoneNumber] = useState("");
  const firebaseConfig = firebase.apps.length
    ? firebase.app().options
    : undefined;
  const recaptchaVerifier = useRef(null);
  const [code, setCode] = useState("");
  const sendVerification = () => {
  const phoneProvider = new firebase.auth.PhoneAuthProvider();
  phoneProvider
    .verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
    .then(setVerificationId)
    .catch((error) => {
      alert(error);
      return;
    });
  console.log(setVerificationId);
  };
  const confirmCode = () => {
    const credential = firebase.auth.PhoneAuthProvider.credential(
      verificationId,
      code
    );
    firebase
      .auth()
      .signInWithCredential(credential)
      .then((result) => {
        console.log(result.user);
      });
  };
  return (
    <View>
      <View>
        <TextInput
          placeholder="Phone Number"
          onChangeText={setPhoneNumber}
          keyboardType="phone-pad"
          autoCompleteType="tel"
        />
        <TouchableOpacity onPress={sendVerification}>
          <Text>Send Verification</Text>
        </TouchableOpacity>
        <TextInput
          placeholder="Confirmation Code"
          onChangeText={setCode}
          keyboardType="number-pad"
        />
        <TouchableOpacity onPress={confirmCode}>
          <Text>Send Verification</Text>
        </TouchableOpacity>
        <FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={firebaseConfig}
        />
      </View>
    </View>
  );
};
2个回答

Recapcha 是可选的,您可以在没有它的情况下使用电话身份验证。

const confirmResult = await auth().signInWithPhoneNumber('+' + phone);
setState(confirmResult);

手动确认代码

if (confirmResult && receivedcode) {
  const user = await confirmResult.confirm(receivedcode);
  if (user) { //do some staff like login }
}

自动确认只需将以下代码放入useEffect函数中。

unsubscribe = auth().onAuthStateChanged(user => {
   if (user) { //do some staff like login }
});

如果你不知道auth从哪里来:

import auth from '@react-native-firebase/auth';

如果你正在使用 expo 那么你可以把这个props放在 FirebaseRecaptchaVerifierModal 像这样它会管理休息

<FirebaseRecaptchaVerifierModal
{...}
attemptInvisibleVerification={true}
/>