1

我们的反应页面上有 NL 注册模块（多个位置）。我们正在尝试整合多个不可见的谷歌验证码。我们遇到的问题很少，并就此寻求帮助。我们正在使用 react-google-recaptcha npm 包。这是我们遇到的两个问题

第一期

即使我们将验证码标记为不可见，我们仍然看到挑战。

第 2 期

我们如何为同一页面实现多个recaptcha。我们的 NL 组件将被父级多次调用

这是我们的 NL 组件

  renderComponent = () => {
    let newsletter;
    newsletter = (
      <div className={`${this.props.classNames || "newsletter-comp"} row`}>
        {this.renderNewsletterCopy()}
        {this.props.isDisplayModalChecked && this.renderDisplayModalContent()}
        <div className="formGroup">
          <div className="newLetterContainer">
            <div className="inputBox">
              <TextBox
                onEnter={this.handleSubmit}
                className={`${this.props.classNames} newOne`}
                placeholder={this.props.textBoxPlaceholder}
                name="newsletterEmail"
                ref={"newsletterEmail"}
                rules={[{ type: "email" }]}
                errorMessage={
                  this.state.displayError
                    ? this.state.errorMsg || errorMsg
                    : null
                }
                successMessage={
                  this.state.successMsg ? this.state.successMsg : ""
                }
              />
            </div>
            <div className="buttonBox">
              <div className="button-wrapper">
                <Button
                  text={
                    this.state.loading
                      ? this.props.buttonLoadingText
                      : this.props.buttonText || "Subscribe"
                  }
                  handleClick={this.handleSubmit}
                  classes={`${this.props.classNames} newOne`}
                />
                {
                  process.env.GOOGLE_RECAPTCHA_ENABLE &&
                  <ReCAPTCHA
                    style={{display: 'inline-block', visibility: 'hidden'}}
                    ref={this.recaptchaRef}
                    size="invisible"
                    sitekey={process.env.GOOGLE_RECAPTCHA_SITEKEY}
                    badge="inline"
                  />

                }
              </div>
            </div>
          </div>
        </div>

处理提交

  handleSubmit = async () => {
    if (this.isValid() && this.refs.newsletterEmail.getValue()) {
      this.setState({ loading: true, displayError: false, errorMsg: "", successMsg: "" });
      let params = {};
      if (process.env.GOOGLE_RECAPTCHA_ENABLE){
        const captchaToken = await this.recaptchaRef.current.executeAsync();
        let tokenData = { gToken:captchaToken };
        //Backend verification
        let captchaVerification = await APIService.post("gverify",{data : tokenData, siteId: this.props.siteId}, null,this.handleCaptchaError,"Post",false)
        console.log('captchaVerification ', captchaVerification)  
        //TODO If captchaVerification is successful, continue with backend sign up process here
        this.recaptchaRef.current.reset()
      }
      
    }
  };

4

0 回答 0