我正在从事毕业项目,试图用电话号码和React Native接口创建登录,我在这里找到了一些用于SMS验证的代码: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;
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.x.x/auth/phone-auth在这里。