Triển khai reCAPTCHA vô hình bằng Biểu mẫu Redux

Question

Tôi đang cố triển khai Invisible reCAPTCHA bằng Biểu mẫu phản hồi và Redux. Nói chung, quy trình công việc reCAPTCHA Không xác định là:

1. Hiển thị CAPTCHA "vô hình", trả lại ID tiện ích con.
2. Gọi grecaptcha.execute bằng ID của tiện ích con. Nếu cần thiết, người dùng sẽ được nhắc giải quyết một thách thức. Kết quả được chuyển đến một hàm gọi lại được chỉ định khi CAPTCHA được hiển thị.
3. Gửi biểu mẫu cùng với kết quả CAPTCHA.

tôi đã tạo ra một bộ phận Phản ứng dự định sẽ được sử dụng với Redux Mẫu của Field mà ám CAPTCHA và cập nhật tình trạng hình thức sau grecaptcha.execute được gọi là:

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 
    }) 
    } 
} 

Tuy nhiên, tôi không biết làm thế nào hoặc nơi để gọi grecaptcha.execute cùng với ID tiện ích khi người dùng gửi biểu mẫu. Tôi không thể gọi nó trong số onSubmit vì ID tiện ích con không thể truy cập ở đó. Tôi có thể gọi nó trong ReCaptcha ngay lập tức sau khi hiển thị CAPTCHA, nhưng nếu người dùng cần giải quyết CAPTCHA, anh ta sẽ được nhắc thực hiện ngay khi biểu mẫu hiển thị.

Điều này minimal working example cho thấy những gì tôi đã đạt được cho đến nay.

Answer 1

Sử dụng giá đỡ onSubmit để gọi grecaptcha.execute() và trỏ dữ liệu gọi lại đến hàm onSubmit 'thực'.

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> 
) 
} 

N.b. Tôi đã không thử nghiệm mã này nhưng nó phải được nhiều hơn hoặc ít hơn ngay. Nếu bạn gặp rắc rối khi tải grecaptcha vào trang/biểu mẫu, tôi thấy mã this rất hữu ích.

Answer 2

Tôi phải làm cho công việc reCAPTCHA vô hình trở nên hữu ích đối với tôi vì hình ảnh hiển thị không phản hồi. Here là ví dụ tôi đã triển khai.

Điều đầu tiên cần làm là thêm thẻ bên dưới vào phần thân (hoặc bạn có thể sử dụng react-helmet).

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> 

phiên bản đơn giản hóa của mã làm việc của tôi:

import React from 'react'; 

class YourComponent extends React.Component { 
    componentDidMount() { 
    // Create a script to make sure the reCAPTCHA API is called. 
    const script = document.createElement('script'); 
    script.text = ` 
     var onloadCallback = function() { 
     console.log('grecaptcha is ready'); 
     }; 
    `; 
    document.body.appendChild(script); 

    // We will render reCAPTCHA after the page is loaded, 
    // because we want to bind our own submit methods. 
    window.addEventListener('load', this.onLoad); 
    } 

    // Runs once the form is submitted. 
    onRecaptcha = (e) => { 
    e.preventDefault(); 
    const { grecaptcha } = window; 
    grecaptcha.execute(); 
    }; 

    // Real submit function. 
    onSubmit = (token) => { 
    // I'm not sure what token could be if recaptcha fails. 
    // In my case it seems successful and returns a long string. 
    console.log(token); 

    // Your real action goes below... 
    }; 

    onLoad =() => { 
    // Now we define our reCAPTCHA 
    if (window.grecaptcha) { 
     const { grecaptcha } = window; 
     grecaptcha.render('recaptcha', { // div#recaptcha 
     sitekey : '', 
     size  : 'invisible', 
     callback : this.onSubmit 
     }); 
    } 
    }; 

    render() { 
    return (
     <div> 
     <Helmet> 
      <script 
      src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
      async 
      defer 
      /> 
     </Helmet> 
     <form onSubmit={this.onRecaptcha}> 
      <div id="recaptcha" /> 
      <button type="submit">Submit</button> 
     </form> 
     </div> 
    ); 
    } 
} 

export default YourComponent;