Reactjs Firebase Auth 电话注册流程？

Question

我正在从电子邮件+密码过渡并将 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

解决方案： 遵循 Firebase 的快速入门示例+ 表单 = 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
    );
  });

};