“电话身份验证凭据是使用空验证 ID 创建的”，带有尝试不可见验证答案

【问题标题】："The phone auth credential was created with an empty verification ID" with attemptInvisibleVerification“电话身份验证凭据是使用空验证 ID 创建的”，带有尝试不可见验证
【发布时间】：2022-06-24 13:08:58
【问题描述】：

我在 Firebase 上使用 reCaptcha 验证进行了有效的身份验证，可悲的是，一旦我尝试实施 tryInvisibleVerification，我就会收到一个错误，并且我无法登录。我已经尝试了所有方法，但我找不到任何正在修复，非常感谢您的帮助！

我得到的错误是：

Firebase: The phone auth credential was created with an empty verification ID. (auth/missing-verification-id).
at http://192.168.0.37:19000/index.bundle?platform=ios&dev=true&hot=false&minify=false:128521:321 in _createSuperInternal
at http://192.168.0.37:19000/index.bundle?platform=ios&dev=true&hot=false&minify=false:129135:26 in FirebaseError
at http://192.168.0.37:19000/index.bundle?platform=ios&dev=true&hot=false&minify=false:129169:37 in create
at node_modules/@firebase/auth/dist/esm2017/internal.js:308:0 in _getAndRemoveEvent
at node_modules/@firebase/auth/dist/esm2017/internal.js:287:4 in CordovaAuthEventManager#initialized
at http://192.168.0.37:19000/index.bundle?platform=ios&dev=true&hot=false&minify=false:136372:17 in _performFetchWithErrorHandling$

这是我的代码：

const auth = getAuth()
const [phone, setPhone] = useState(route.params.phone)
const [code, setCode] = useState('')
const [verificationId, setVerificationId] = useState()
const recaptchaVerifier = useRef(null)
const attemptInvisibleVerification = true;

const confirmCode = async () => {

        try {
            const credential = PhoneAuthProvider.credential(
              verificationId,
              code
            );
            await signInWithCredential(auth, credential);
            Alert.alert('Phone authentication successful ????')
        } catch (err) {
            Alert.alert(`Error: ${err.message}`)
        }
}

const sendCode = async () => {
        try {
            const phoneProvider = new PhoneAuthProvider(auth)
            const verificationId = await phoneProvider.verifyPhoneNumber(phone, recaptchaVerifier.current)
                .then(() => {
                    console.log('working')
                    setVerificationId(verificationId)
                })   
        } catch (error) {
            Alert.alert(error.message)
        }
    }

useEffect(() => {
        setTimeout(() => {
            setPhone(route.params.phone)
            sendCode()
        }, 1000);
    }, [])

[...]

<FirebaseRecaptchaVerifierModal
                ref={recaptchaVerifier}
                firebaseConfig={firebase.app().options}
                androidHardwareAccelerationDisabled
                attemptInvisibleVerification={attemptInvisibleVerification}
            />

{attemptInvisibleVerification && <FirebaseRecaptchaBanner />}

【问题讨论】：

标签： firebase react-native firebase-authentication expo

【解决方案1】：

您的 verifyPhoneNumber 参数不完整。您没有为您生成 verifyId 的 codeSent 参数。这里是 verifyPhoneNumber 方法的完整参数。

await _authInstance.verifyPhoneNumber( phoneNumber: phoneNumber, verificationCompleted: (PhoneAuthCredential credential) async { ///it execute this block if successful }, verificationFailed: (FirebaseAuthException exception) async { ///it execute this block it verification failed. So its good practice to execute alert dialog here }, codeSent: (String verificationId, int? resendToken) async { /// verificationId is generated here. So you need to catch it and save to a variable like this: _verificationID = verificationId; }, codeAutoRetrievalTimeout: (String verificationId) async { _verificationID = verificationId; }, // timeout: const Duration(seconds: 120), );

【讨论】：