如何在本机反应中禁用 Firebase 电话号码身份验证 reCapcha? [英] How to disable firebase phone number authentication reCapcha in react native?

问题描述

如何在 react native 中禁用 google firebase 身份验证 ReCaptcha?参考了很多资源都没找到解决办法.

How to disable google firebase authentication ReCaptcha in the react native? I referred to so many resources I haven't found any solution.

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

推荐答案

Recapcha 是可选的，您可以在没有它的情况下使用手机身份验证.

Recapcha is optional you are able to use phone auth without it.

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 函数中即可.

to auto confirm just put the following code inside useEffect function.

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

如果您不知道 auth 来自哪里:

If you dont know where auth comes from:

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

这篇关于如何在本机反应中禁用 Firebase 电话号码身份验证 reCapcha?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！