我正在创建React Native应用程序,我只想在其中使用Firebase用用户的电话号码注册用户。但是我的问题是Firebase不会将验证码发送到输入的电话号码。我想用他的电话号码注册用户,并用该电话号码登录。请检查并吸引我到发行人。我已经尝试过https://fir-ui-demo-84a6c.firebaseapp.com/,并且正在获取验证码。
signIn(mobile) {
this.setState({ message: 'Sending code ...' });
console.log(mobile);
firebase.auth().signInWithPhoneNumber('+918080328322')
.then(
confirmResult => confirmResult =>
this.setState({ confirmResult, message: 'Code has been sent!' })
)
.catch(error => this.setState({ message: `Sign In With Phone Number Error: ${error.message}` }));
};
confirmCode = () => {
const { codeInput, confirmResult } = this.state;
console.log(confirmResult);
if (confirmResult && codeInput.length) {
confirmResult.confirm(codeInput)
.then((user) => {
this.setState({ message: 'Code Confirmed!' });
})
.catch(error => this.setState({ message: `Code Confirm Error: ${error.message}` }));
}
};
render() {
const { user, confirmResult } = this.state;
return (
<View style={{ flex: 1 }}>
{this.renderLoading()}
<CardSection>
<View style={styles.logoStyle}>
<Text style={styles.logoTextStyle}>
Action
</Text>
</View>
</CardSection>
<CardSection>
{this.renderMessage()}
{!user && confirmResult && this.renderVerificationCodeInput()}
{user && (
<View
style={{
padding: 15,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#77dd77',
flex: 1,
}}
>
<Image source={{ uri: successImageUri }} style={{ width: 100, height: 100, marginBottom: 25 }} />
<Text style={{ fontSize: 25 }}>Signed In!</Text>
<Text>{JSON.stringify(user)}</Text>
<Button title="Sign Out" color="red" onPress={this.signOut} />
</View>
)}
<Input
label="Mobile"
placeHolder="Enter Number"
keyboardType="phone-pad"
value={this.props.mobile}
onChangeText={value => this.props.userProfile({ prop: 'mobile', value })}
/>
<Button title="Sign In" color="green" onPress={this.signIn} />
</CardSection>
<CardSection>
<Input
isPassword
label="Password"
placeHolder="Password"
value={this.props.password}
onChangeText={value => this.props.userProfile({ prop: 'password', value })}
/>
</CardSection>
<CardSection>
<Input
isPassword
label="Re-enter Password"
placeHolder="Password"
value={this.props.confirmPassword}
onChangeText={value => this.props.userProfile({ prop: 'confirmPassword', value })}
/>
</CardSection>
</View>
);
}
renderPhoneNumberInput() {
const { mobile } = this.state;
return (
<CardSection >
<Input
label="Mobile"
placeHolder="Enter Number"
keyboardType="phone-pad"
value={this.props.mobile}
onChangeText={value => this.props.userProfile({ prop: 'mobile', value })}
/>
<Button title="Sign In" color="green" onPress={this.signIn(this.props.mobile)} />
</CardSection>
);
}
renderMessage() {
const { message } = this.state;
if (!message.length) return null;
return (
<Text style={{ padding: 5, backgroundColor: '#000', color: '#fff' }}>{message}</Text>
);
}
renderVerificationCodeInput() {
const { codeInput } = this.state;
return (
<View style={{ marginTop: 25, padding: 25 }}>
<Text>Enter verification code below:</Text>
<Input
autoFocus
style={{ height: 40, marginTop: 15, marginBottom: 15 }}
onChangeText={value => this.setState({ codeInput: value })}
placeholder={'Code ... '}
value={codeInput}
/>
<Button title="Confirm Code" color="#841584" onPress={this.confirmCode} />
</View>
);
}