firebase - firebase phoneauth done 发送验证码
问题描述
我正在创建 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>
);
}
解决方案
推荐阅读
- r - 数据帧头中的百分比符号
- linux - 用于 grep 选择日期范围的 unix 脚本?
- sql - 从两个表更新新创建的表 - SQL
- jmeter - JMeter - 如何批处理线程组中的线程
- objective-c - 片段着色器功能中 float4 和 half4 的主要区别是什么?
- c++ - 为什么pair在初始化中不需要类型
- php - 使用 LIKE 子句和 NO_BACKSLASH_ESCAPES 模式在 mysqli prepare() 中转义 % 符号
- docker - 微服务:docker.compose 文件中的 ESHOP_OCELOT_VOLUME_SPEC 行是什么意思
- javascript - Handsontable 中的 Handsontable 下拉高度调整
- quartz-scheduler - 泽西集成石英 @Inject 注释不起作用