使用 react-redux-firebase 时如何重置 recaptcha

Question

我正在使用 React-Redux-Firebase。我实现了 使用 phone 号码 登录。现在我正在尝试实施错误处理。当数字无效时，我会显示 window 警报和错误消息。唯一剩下要做的就是 重置 recaptcha。没有它，我会收到错误消息：

reCAPTCHA has already been rendered in this element

我试图根据 Firebase 文档

grecaptcha.reset(window.recaptchaWidgetId);

// Or, if you haven't stored the widget ID:

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

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

有人可以给我提示吗如何在每次错误后重置 recaptcha？

  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

希望对您有所帮助！

Answer 2

我已经为这个问题苦恼好几天了，也许我的回答会对某人有所帮助。

    export const requestRecaptchVerifier = () => {
    window.recaptchaVerifier = new RecaptchaVerifier(
        "recapcha-container",
        {
            size: "invisible",
        },
        auth
    );
};

然后我从另一个函数调用 signInWithPhone 并像这样处理错误：

        await signInWithPhone(formik.values.phone)
        .then(() => {
            // ... my code
        })
        .catch(() => {
            window.recaptchaVerifier.recaptcha.reset();
            window.recaptchaVerifier.clear();
        });

的所有差异

window.recaptchaVerifier.recaptcha.reset()

和

window.recaptchaVerifier.clear()