ReduxフォームでInvisible reCAPTCHAを実装する

Question

Invisible reCAPTCHAをReactとReduxフォームで実装しようとしています。一般的に、Invisible reCAPTCHAのワークフローは次のとおりです。

1. 「見えない」CAPTCHAをレンダリングし、そのウィジェットIDを返します。
2. ウィジェットのIDを使用してgrecaptcha.executeを呼び出します。必要に応じて、ユーザーはチャレンジを解決するよう求められます。結果は、CAPTCHAがレンダリングされたときに指定されたコールバック関数に渡されます。
3. CAPTCHAの結果とともにフォームを送信してください。

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

   しかし、私は方法がわからない：私はCAPTCHAをレンダリングしgrecaptcha.execute後、フォームの状態を更新ReduxのフォームのFieldで使用されることを意図リアクトコンポーネントが呼ばれる作成した

ユーザがフォームを提出する際にウィジェットIDと共にgrecaptcha.executeに電話をかける場所。ウィジェットIDにアクセスできないので、onSubmitで呼び出すことはできません。私はCAPTCHAをレンダリングした直後にReCaptchaで呼び出すことができますが、ユーザーがCAPTCHAを解決する必要がある場合は、フォームがレンダリングされるとすぐにCAPTCHAを解決するよう指示されます。

このminimal working exampleはこれまでに達成したことを示しています。

Answer 1

onSubmit propを使用してgrecaptcha.execute（）を呼び出し、データコールバックを 'real' 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> 
) 
} 

N.b.私はこのコードをテストしていませんが、多かれ少なかれ正しいはずです。ページ/フォームにgrecaptchaを読み込む際に問題が発生した場合は、thisコードが非常に役に立ちます。

Answer 2

私は目に見えないreCAPTCHAを目立たせる必要がありました。 Hereは私が実装した例です。

最初に行うべきことは、下記のタグを本文に追加することです（またはreact-helmetを使用できます）。

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

私の作業コードの簡易版：

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;