使用 react-redux-firebase 时如何重置验证码

Question

我正在使用 React-Redux-Firebase。我实现了使用电话号码登录。现在我正在尝试实现错误处理。当数字无效时，我会显示带有错误消息的窗口警报。剩下要做的就是reset recaptcha。没有它，我会收到错误：

reCAPTCHA 已在此元素中呈现

我正在尝试根据 Firebase 文档进行操作

grecaptcha.reset(window.recaptchaWidgetId);

// 或者，如果您还没有存储小部件 ID：

window.recaptchaVerifier.render().then(function(widgetId) { grecaptcha.reset(widgetId); }

但它在我的代码中不起作用。我没有实现grecaptcha。我尝试用react-grecaptcha添加它，但它不起作用。

有人可以给我一个提示如何在每次错误后重置验证码，好吗？

  state = {
    phone: "",
    confirmationResult: {},
  };

  handleClick = () => {
    const recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
      "sign-in-button",
      {
        size: "invisible",
      }
    );
    firebase
      .signInWithPhoneNumber(`+${this.state.phone}`, recaptchaVerifier)
      .then((confirmationResult) => {
        this.setState({ confirmationResult });
      })
      .catch((error) => {
        // Error; SMS not sent
        // Handle Errors Here
        window.alert(`${error.code}, ${error.message}`);
        recaptchaVerifier.reset(); // How can I do that?
      });
  };

Answer 1

我不是专家，但根据文档以及在评论部分与您交谈，我认为您需要通过 callback。像这样：

const recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
   firebase
  .signInWithPhoneNumber(`+${this.state.phone}`, recaptchaVerifier)
  .then((confirmationResult) => {
    this.setState({ confirmationResult });
  })
  .catch((error) => {
    // Error; SMS not sent
    // Handle Errors Here
    window.alert(`${error.code}, ${error.message}`);
    recaptchaVerifier.reset();
  });
  }
});

参考：https://firebase.google.com/docs/auth/web/phone-auth#use-invisible-recaptcha

希望这会有所帮助！