如何在博览会上使用firebase电话(react native 2022)

Question

我是新来的博览会，我正试图通过电话通过firebase身份验证登录应用程序，但是我找不到足够的文档是否有人在博览会(SDK 44)中成功实现了firebase身份验证而没有弹出我找到了这个教程，但它只适用于firebase 8，目前的是firebase 9.8.4现在它不能工作了

https://arjayosma.medium.com/set-up-firebase-phone-authentication-in-expo-sdk-37-without-ejecting-8a472460b1cf

Answer 1

使用Firebase JS SDK, Firebase电话身份验证不可能开箱即用。这是因为需要一个应用验证对象(reCAPTCHA)作为额外的安全措施来验证用户是真实的，而不是Firebase JS SDK工作流中的机器人。

FirebaseRecaptcha在博览会被用来补偿这个对象。但是，该模块将不再在SDK 48中可用。应用程序可以迁移到React原生firebase

Answer 2

这对我来说适用于最新的一个:

import React, { useRef, useState } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../../../hooks/useAuth";
import { auth, app } from "../../../firebase";
import { PhoneAuthProvider } from "firebase/auth";
import {
FirebaseRecaptchaVerifierModal,
FirebaseRecaptchaBanner,
} from "expo-firebase-recaptcha";

const Component = () => {
const navigation = useNavigation();
const [loading, setLoading] = useState(false);
const [phoneNumberValue, setPhoneNumberValue] = useState("");
const [countryCode, setCountryCode] = useState("30");

const formatPhoneNumber = (newValue) => {
const numericValue = newValue.replace(/D/g, "");
setPhoneNumberValue(numericValue);
};

const AuthWithPhone = async () => {
try {
setLoading(true);
const formattedPhone = `+${countryCode}` + phoneNumberValue;
const phoneProvider = new PhoneAuthProvider(auth);
const verifiedId = await phoneProvider.verifyPhoneNumber(
formattedPhone,
recaptchaVerifier.current
);
setUserAuth((prevUserAuth) => ({
...prevUserAuth,
phoneNumber: formattedPhone,
verificationId: verifiedId,
message: "Verification code has been sent to your phone.",
}));
setLoading(false);
navigation.navigate("OTPVerification");
} catch (err) {
console.log("Verification error");
setUserAuth((prevUserAuth) => ({
...prevUserAuth,
message: `Error: ${err.message}`,
}));
}
};
return (
<>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
attemptInvisibleVerification={attemptInvisibleVerification}
/>
<TextInput
value={phoneNumberValue}
placeholder="6912345678"
keyboardType="phone-pad"
autoCompleteType="tel"
onFocus={() => setInputBorder("black")}
onChangeText={(value) => formatPhoneNumber(value)}
}/>

</>
)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>