如何在 React Native 中使用 Firebase 电话身份验证而无需重新验证码

Question

我想在 React Native 中使用没有 recaptcha 的 firebase 电话验证。 下面是我的代码。 代码工作正常。 但我不想使用recaptcha。 我尝试删除它，但它给出了错误。 我是本机反应的新手。 请给出以下问题的正确解决方案。 我的代码在下面检查并给出解决方案。 谢谢你

import * as React from 'react';
import { Text, View, StyleSheet, TextInput,Image,TouchableOpacity,ActivityIndicator,Alert } from 'react-native';
import * as FirebaseRecaptcha from "expo-firebase-recaptcha";
import * as firebase from "firebase";

// PROVIDE VALID FIREBASE CONFIG HERE
// https://firebase.google.com/docs/web/setup
const FIREBASE_CONFIG: any = {
  
};

try {
  if (FIREBASE_CONFIG.apiKey) {
    firebase.initializeApp(FIREBASE_CONFIG);
  }
} catch (err) {
  // ignore app already initialized error on snack
}

export default function App() {
  const recaptchaVerifier = React.useRef(null);
  const verificationCodeTextInput = React.useRef(null);
  const [phoneNumber, setPhoneNumber] = React.useState("");
  const [verificationId, setVerificationId] = React.useState("");
  const [verifyError, setVerifyError] = React.useState<Error>();
  const [verifyInProgress, setVerifyInProgress] = React.useState(false);
  const [verificationCode, setVerificationCode] = React.useState("");
  const [confirmError, setConfirmError] = React.useState<Error>();
  const [confirmInProgress, setConfirmInProgress] = React.useState(false);
  const isConfigValid = !!FIREBASE_CONFIG.apiKey;
  return (
    <View style={styles.container}>
         <FirebaseRecaptcha.FirebaseRecaptchaVerifierModal
          ref={recaptchaVerifier}
          firebaseConfig={FIREBASE_CONFIG}
        />
      <View style={styles.first}>
        <Text style={{color:'white',fontSize:25,fontWeight:'bold'}}>Welcome</Text>
      </View>
      <View style={styles.second}>
        <Text style={{paddingVertical:5}}>Phone No</Text>
        <View style={styles.fileds}>
            <Image style={styles.logo} source={require('./assets/user.png')} />
            <TextInput style={styles.input}
             autoFocus={isConfigValid}
             autoCompleteType="tel"
             keyboardType="phone-pad"
             textContentType="telephoneNumber"
             editable={!verificationId}
             onChangeText={(phoneNumber: string) => setPhoneNumber(phoneNumber)}
            />
        </View>
        <TouchableOpacity style={styles.button} 
        disabled={!phoneNumber}
        onPress={async () => {
          const phoneProvider = new firebase.auth.PhoneAuthProvider();
          try {
            setVerifyError(undefined);
            setVerifyInProgress(true);
            setVerificationId("");
            const verificationId = await phoneProvider.verifyPhoneNumber(
              phoneNumber,
              recaptchaVerifier.current
            );
            setVerifyInProgress(false);
            setVerificationId(verificationId);
            verificationCodeTextInput.current?.focus();
          } catch (err) {
            setVerifyError(err);
            setVerifyInProgress(false);
          }
        }}
        >
          <Text style={{alignSelf:'center',color:'white'}}>{`${verificationId ? "Resend" : "Send"} OTP`}</Text>
        </TouchableOpacity>
        {verifyError && (
          <Text style={styles.error}>{`Error: ${verifyError.message}`}</Text>
        )}
        {verifyInProgress && <ActivityIndicator style={styles.loader} />}
        {verificationId ? (
          <Text style={styles.success}>
            A verification code has been sent to your phone
          </Text>
        ) : undefined}
        <Text style={{paddingTop:25,paddingBottom:5}}>OTP</Text>
        <View style={styles.fileds}>
          <Image style={styles.logo} source={require('./assets/password.png')} />
          <TextInput
          ref={verificationCodeTextInput}
          style={styles.input}
          editable={!!verificationId}
          placeholder="123456"
          onChangeText={(verificationCode: string) =>
            setVerificationCode(verificationCode)
          }
        />
        </View>
        <TouchableOpacity style={styles.button} 
          disabled={!verificationCode}
          onPress={async () => {
            try {
              setConfirmError(undefined);
              setConfirmInProgress(true);
              const credential = firebase.auth.PhoneAuthProvider.credential(
                verificationId,
                verificationCode
              );
              const authResult = await firebase
                .auth()
                .signInWithCredential(credential);
              setConfirmInProgress(false);
              setVerificationId("");
              setVerificationCode("");
              verificationCodeTextInput.current?.clear();
              Alert.alert("Phone authentication successful!");
            } catch (err) {
              setConfirmError(err);
              setConfirmInProgress(false);
            }
          }}>
          <Text style={{alignSelf:'center',color:'white'}}>Confirm OTP</Text>
        </TouchableOpacity>
        {confirmError && (
          <Text style={styles.error}>{`Error: ${confirmError.message}`}</Text>
        )}
        {confirmInProgress && <ActivityIndicator style={styles.loader} />}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  first: {
    height:'30%',
    width:'100%',
    backgroundColor:'rgb(26, 47, 94)',
    justifyContent:'center',
    padding:20
  },
  second:{
    paddingVertical:30,
    paddingHorizontal:20,
    borderTopLeftRadius:15,
    borderTopRightRadius:15,
    marginTop:-10,
    backgroundColor:'white'
  },
  fileds:{
    flexDirection:'row',
    borderBottomColor:'grey',
    borderBottomWidth:1,
    padding:5,
  },
  logo:{
    height:20,
    width:20
  },
  button:{
    backgroundColor:'rgb(72, 126, 241)',
    padding:10,
    borderRadius:10,
    marginVertical:15
  },
  buttontwo:{
    borderColor:'rgb(72, 126, 241)',
    borderWidth:1,
    padding:10,
    borderRadius:10,
    marginVertical:15
  },
  input:{
    width:'80%'
  },
  error: {
    marginTop: 10,
    fontWeight: "bold",
    color: "red",
  },
  success: {
    marginTop: 10,
    fontWeight: "bold",
    color: "blue",
  },
  loader: {
    marginTop: 10,
  },
});

Answer 1

您无法使用默认身份验证删除验证码验证。 使用匿名身份验证以避免出现验证码字母。 https://firebase.google.com/docs/auth/web/anonymous-auth

但是你也可以像这样让它不可见：

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container", {
        size: "invisible"
    }
);

Answer 2

我解决了。 我有更好的方法来做到这一点。

并将 SHA-256 指纹添加到您的 Firebase 项目中。

转到-> https://console.cloud.google.com -> 选择项目 -> API 和服务。

然后搜索 Android 设备验证并启用它。

就是这样 ！！