Question

我正在从Email + Password过渡并将Firebase Auth signInWithPhoneNumber集成到我的React Web应用程序中，并且我对如何使用感到困惑：
1.提交电话号码
2.提交验证码。

在我看来，firebase函数.signInWithPhoneNumber想要一次全部使用电话＃+验证码，我们知道这不是现实生活的工作原理。

那么，您如何实现提示用户输入验证码？

handleSignUp = event => {
    event.preventDefault();
    window.appVerifier = new firebase.auth.RecaptchaVerifier(
      "recaptcha-container",
      {
        size: "invisible"
      }
    );
    const appVerifier = window.appVerifier;
    firebase
      .auth()
      .signInWithPhoneNumber(this.state.phoneNumber, appVerifier)
      .then(function(confirmationResult) {
        console.log("Success");
        // SMS sent. Prompt user to type the code from the message, then confirm
        return confirmationResult.confirm(verificationId);
      })
      .catch(function(error) {
        console.log("Error:" + error.code);
      });
  };

注册表格：

                  <TextField
                  name="First name"
                  value={this.state.firstName}
                />
                <TextField
                 name="lastName"
                 value={this.state.lastName}
                   />
                <TextField
                  name="Username"
                  value={this.state.handle}
                   />
                <TextField
                 name="tel"
                  value={this.state.phoneNumber}
                  />
                <TextField
                   name="confirm"
                  value={this.state.confirm}
                />

                <Button
                  type="submit"
                >
                  Sign Up
                </Button>

任何帮助将不胜感激！

Answer 1

解决方案： Followed Firebase's quickstart example +表格= 2个文本字段和按钮：1个代表电话号码，1个代表验证码。

 handleSignUp = event => {
 event.preventDefault();
 window.appVerifier = new firebase.auth.RecaptchaVerifier(
  "recaptcha-container",
  {
    size: "invisible"
   }
);
const appVerifier = window.appVerifier;
firebase
  .auth()
  .signInWithPhoneNumber(this.state.phoneNumber, appVerifier)
  .then(function(confirmationResult) {
    console.log("Success");
    // SMS sent. Prompt user to type the code from the message, then sign the
    // user in with confirmationResult.confirm(code).
    window.confirmationResult = confirmationResult;
  })
  .catch(function(error) {
    console.log("Error:" + error.code);
  });
};
 onVerifyCodeSubmit = event => {
event.preventDefault();
const verificationId = this.state.verifyNumber;
window.confirmationResult
  .confirm(verificationId)
  .then(function(result) {
    // User signed in successfully.
    var user = result.user;
    user.getIdToken().then(idToken => {
         console.log(idToken);
      });
  })
  .catch(function(error) {
    // User couldn't sign in (bad verification code?)
    console.error("Error while checking the verification code", error);
    window.alert(
      "Error while checking the verification code:\n\n" +
        error.code +
        "\n\n" +
        error.message
    );
  });

};

Reactjs Firebase Auth Phone注册流程？

1 个答案: