错误：signInWithPhoneNumber 失败：第二个参数“ApplicationVerifier”必须是 firebase.auth.ApplicationVerifier 的实现

Question

我正在从事毕业项目，尝试使用 React Native 接口创建带有电话号码的登录，我在这里找到了一些短信验证代码： https : //www.instamobile.io/mobile-development/firebase-phone-authentication-react -native/ .... 但它给了我一个错误！ “错误：signInWithPhoneNumber 失败：第二个参数“ApplicationVerifier”必须是 firebase.auth.ApplicationVerifier 的实现我试图通过 ULR 方案将 Xcode 与应用程序连接但它仍然无法正常工作！

这是我的代码希望可以帮助我：

import React, { Component } from 'react';
import {
  StyleSheet,
  SafeAreaView,
  TouchableOpacity,
  View,
  Text,
  TextInput
} from 'react-native';

//import Firebase from '../components/Firebase'
import {Actions} from 'react-native-router-flux';
import * as firebase from 'firebase';

const Config = {
  apiKey: "AIzaSyAsT6g2R1lXZb8soYZB9MtbM**********",
    authDomain: "********application.firebaseapp.com",
    databaseURL: "https://********application.firebaseio.com",
    projectId: "********application",
    storageBucket: "********application.appspot.com",
    messagingSenderId: "*****102252",
    appId: "1:35406102252:web:8c19bfa513e6**********",
    measurementId: "G-V4S6YST***"
};

firebase.initializeApp(Config);


class PhoneAuthScreen extends Component {
  state = {
    phone: '',
    confirmResult: null,
    verificationCode: '',
    userId: '',

  }

  validatePhoneNumber = () => {
    var regexp = /^\+[0-9]?()[0-9](\s|\S)(\d[0-9]{8,16})$/
    return regexp.test(this.state.phone)
  }

  handleSendCode = () => {
    var appVerifier = window.recaptchaVerifier;

    // Request to send OTP
    if (this.validatePhoneNumber()) {
      firebase
        .auth()
        .signInWithPhoneNumber(this.state.phone, appVerifier)
        .then(confirmResult => {
          this.setState({ confirmResult })
        })
        .catch(error => {
          alert(error.message)

          console.log(error)
        })
    } else {
      alert('Invalid Phone Number')
    }

  this.setState({ confirmResult: null, verificationCode: '' })
}
 handleVerifyCode = () => {
 // Request for OTP verification
 const { confirmResult, verificationCode } = this.state
 if (verificationCode.length == 6) {
 confirmResult
 .confirm(verificationCode)
 .then(user => {
 this.setState({ userId: user.uid })
 alert(`Verified! ${user.uid}`)
 })
 .catch(error => {
 alert(error.message)
 console.log(error)
 })
 } else {
 alert('Please enter a 6 digit OTP code.')
 }
 }
 renderConfirmationCodeView = () => {
 return (
 <View style={styles.verificationView}>
 <TextInput
 style={styles.textInput}
 placeholder='Verification code'
 placeholderTextColor='#eee'
 value={this.state.verificationCode}
 keyboardType='numeric'
 onChangeText={verificationCode => {
 this.setState({ verificationCode })
 }}
 maxLength={6}
 />
 <TouchableOpacity
 style={[styles.themeButton, { marginTop: 20 }]}
 onPress={this.handleVerifyCode}>
 <Text style={styles.themeButtonTitle}>Verify Code</Text>
 </TouchableOpacity>
 </View>
 )
 }

 render() {
  return (
  <SafeAreaView style={[styles.container, { backgroundColor: '#333' }]}>
  <View style={styles.page}>
  <TextInput
  style={styles.textInput}
  placeholder='Phone Number with country code'
  placeholderTextColor='#eee'
  keyboardType='phone-pad'
  value={this.state.phone}
  onChangeText={phone => {
  this.setState({ phone })
  }}
  maxLength={15}
  editable={this.state.confirmResult ? false : true}
  />

  <TouchableOpacity
  style={[styles.themeButton, { marginTop: 20 }]}
  onPress={
  this.state.confirmResult
  ? this.changePhoneNumber
  : this.handleSendCode
  }>
  <Text style={styles.themeButtonTitle}>
  {this.state.confirmResult ? 'Change Phone Number' : 'Send Code'}
  </Text>
  </TouchableOpacity>

  {this.state.confirmResult ? this.renderConfirmationCodeView() : null}
  </View>
  </SafeAreaView>
  )
};
}

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#aaa'
    },
    page: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    textInput: {
      marginTop: 20,
      width: '90%',
      height: 40,
      borderColor: '#555',
      borderWidth: 2,
      borderRadius: 5,
      paddingLeft: 10,
      color: '#fff',
      fontSize: 16
    },
    themeButton: {
      width: '90%',
      height: 50,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#888',
      borderColor: '#555',
      borderWidth: 2,
      borderRadius: 5
    },
    themeButtonTitle: {
      fontSize: 24,
      fontWeight: 'bold',
      color: '#fff'
    },
    verificationView: {
      width: '100%',
      alignItems: 'center',
      marginTop: 50
    }
  })

export default PhoneAuthScreen;

Answer 1

firebase.auth().signInWithPhoneNumber(phoneNumber)
  .then(confirmResult => // save confirm result to use with the manual verification code)
  .catch(error => /error);

无需添加 appVerifier。 参考官方文档https://rnfirebase.io/docs/v5.xx/auth/phone-auth这里。