reactjs - 使用 Redux Form 实现隐形 reCAPTCHA

Question

我正在尝试实现 Invisible reCAPTCHA使用 React 和 Redux 表单。一般来说，隐形 reCAPTCHA 工作流程是:

1. 渲染“不可见”验证码，返回其小部件 ID。
2. 使用小部件的 ID 调用 grecaptcha.execute。如有必要，系统将提示用户解决挑战。结果将传递给渲染验证码时指定的回调函数。
3. 提交表单以及验证码结果。

我创建了一个 React 组件，旨在与 Redux Form 的 Field 一起使用，该组件在调用 grecaptcha.execute 后呈现验证码并更新表单状态:

class ReCaptcha extends React.Component {
  render() {
    return <div ref={div => this.container=div} />
  }

  componentDidMount() {
    const { input: { onChange }, sitekey } = this.props
    grecaptcha.render(this.container, {
      sitekey,
      size: "invisible",
      callback: onChange
    })
  }
}

但是，我不知道在用户提交表单时如何或在哪里调用 grecaptcha.execute 以及小部件 ID。我无法在 onSubmit 中调用它，因为在那里无法访问小部件 ID。我可以在呈现验证码后立即在 ReCaptcha 中调用它，但如果用户需要解决验证码，系统会在表单呈现后立即提示他这样做。

这个minimal working example显示了我迄今为止所取得的成就。

Answer 1

使用 onSubmit 属性调用 grecaptcha.execute()，并将数据回调指向“真正的”onSubmit 函数。

let refToMyWidget;
const { handleSubmit } = this.props;

componentDidMount() {
  if (window.grecaptcha) {
    refToMyWidget = window.grecaptcha.render(this.container, {
      sitekey: "xxxx",
      size: "invisible",
      callback: handleSubmit(this.actuallySubmit)
    })
  }
}

preSubmit() {
  if(!window.grecaptcha) {
    return;
  }
  window.grecaptcha.execute(this.refToMyWidget)
}

actuallySubmit() {
  // submission logic here
}

render() {
  return (
    <form onSubmit={handleSubmit(this.preSubmit)}>
        <Field name="foo" component="input" />
        <button>Submit</button>
    </form>
  )
}

注意我还没有测试过这段代码，但它应该或多或少是正确的。如果您在将 grecaptcha 加载到页面/表单时遇到问题，我发现 this代码非常有帮助。