ative中如何在不重新验证的情况下使用Firebase电话身份

ative中如何在不重新验证的情况下使用Firebase电话身份

本文介绍了在React Native中如何在不重新验证的情况下使用Firebase电话身份验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在不响应本机的情况下使用Firebase电话验证而无需重新验证.下面是我的代码.该代码工作正常.但是我不想使用Recaptcha.我尝试删除它,但它给出了错误.我是新来的本地人.请给出以下问题的适当解决方案.我的代码在下面检查并给出解决方案.谢谢

I want to use firebase phone verification without recaptcha in react native. Below is my code. The code is working properly. But I Don't want to use recaptcha. I try deleting it but it gives error. I am new to react native. Please give proper solution of the following problem. My code is given Below Check It and give solution. Thank You

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,
  },
});

推荐答案

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

You can't remove captcha verification using default authentication.Use anonymous authentication to avoid captcha letters to appear.https://firebase.google.com/docs/auth/web/anonymous-auth

但是您也可以像这样使它不可见:

But You can also make it invisible like this:

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

这篇关于在React Native中如何在不重新验证的情况下使用Firebase电话身份验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 03:40