首页 > 解决方案 > 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>
      );
    }

标签: firebasereact-nativefirebase-realtime-database

解决方案


推荐阅读