Recaptchaをあなたの反応アプリに加える方法

導入
最近、GoogleのReciptcha検証システムをウェブサイトに実装することに挑戦しました.は、それは難しいことではないよ!
このチュートリアルでは、

あなたのウェブサイトのためにSiteKey/SecretKeyを得る方法.

ユーザー登録フォームと一緒にRecaptcha V 2(CheckBox Version)をプロジェクトに追加する方法.

私はすでにあなたがhere.と一緒に従うことができるサンプルプロジェクトを作成しました
最終的なコードをチェックアウトしたい場合は、FormEndファイル内でそれを見つけることができます.

キーの作成
Recaptchaで作業を始める前に、SiteKeyとSecretKeyペアを取得する必要があります.このキーは、recaptchaのどのバージョンを使用することができ、どのようなバリアントが適用されたか、どのドメインが有効かを決定します.
あなたのキーペアを作成するには、hereをクリックしてください.
あなたのGoogleアカウントにログインするように求められます.その後、管理コンソールに連れて行かれます.あなたがサインした後にリダイレクトされるならば、ちょうど上記のリンクをクリックしてください.
したら、フォームを記入を開始することができます登録ページに自分自身を見つける.それはかなり簡単です、また、あなたが沿って続くことを望むならば、各々のステップを通って行きます.

キーペア

ラベル
これは、キーペアが何であるかを認識するための名前です.好きなものは何でもいいですよ.
私は、鉱山recaptcha-example.を呼びます

種類
これはrecaptchaのタイプを指します.v 3は隠された形式の検証です.このチュートリアルではチェックボックスの検証を行いますので、ここでV 2を選択します.
recaptcha v 2には3つのバリアントがあります.“私はロボットではない”設定を選択します.

ドメイン
ここでは、あなたのrecaptchaでどのドメインが動作するかを設定します.任意の有効なドメイン名を使用できます.ローカルの例を実行している場合は、localhostをリストに追加し、+を押して追加します.

オーナー
あなたはデフォルトで所有者になる、また、更新することができますまたはrecaptchaを変更する他の個人を追加することができます.

仕上げ
今ちょうど“サービスの規約”ボックスをチェックし、あなたが不適切な構成についての通知を受け取るかどうかを判断するか、またはrecaptchaで異常な活動.
今すぐSubmitをクリックすると、今あなたのサイトのキーと秘密キーを見ることができるはずです.進んで、これらをあなたの.envファイルに加えてください.この例ではREACT_APP_SITE_KEYとREACT_APP_SECRET_KEYという名前を使います.
また、能力をあなたのRecaptchaトークンの使用のための解析を表示する必要があります.それはどのように頻繁に使用され、どのように多くの拒否が発生を示すことができます.

アプリにRecaptchaを追加
ここでは、我々のRecaptchaチェックボックスをレンダリングするためにreact-google-recaptchaを使用します.それは有用な小道具の束を提供し、より複雑な設定の多くを処理します.react-google-recaptchaをインストールする必要があります.このパッケージは、V 2 Recaptcha非常に簡単に動作するようになります!
あなたのターミナルタイプyarn add react-google-recaptcha内でパッケージを追加します.インストール後、FormStart.jsxファイルに頭を入れてインポートします.

import ReCaptchaV2 from 'react-google-recaptcha'

次に、送信ボタンの直前にコンポーネントをフォームに追加します.また、適切に動作するようにSiteKeyを追加する必要があります.

<ReCaptchaV2 sitekey={process.env.REACT_APP_SITE_KEY} />

おめでとう!あなたはアプリにRecaptchaを追加しました!
アプリケーションを実行すると、Reciptchaチェックボックスが表示されます.チェックボックスのいずれかを確認したり、課題を渡すことを求める必要があります.
我々は今検証を持っていますが、他に何がフォームを動作させる必要がありますか?

Recaptchaコンポーネントからトークンを取得し、フォームに追加する必要があります.

recaptchaが期限切れになったらトークンを取り外すべきです.

トークンの取得
コンポーネントonChangeハンドラーを使用してRecaptchaトークンを受け取る新しい機能を作成する必要があります.この関数は、他のフォームの入力を更新する方法と非常によく似ています.

const handleToken = (token) => {
  setForm((currentForm) => {
   return {...currentForm, token }
  })
}

十分に簡単に、現在、我々はformからトークンを取り除く機能を必要とします.

const handleExpire = () => {
  setForm((currentForm) => {
   return {...currentForm, token: null }
  })
}

すごい!両方の関数を使用して、Recaptchaコンポーネントに追加できます.

<ReCaptchaV2
  sitekey={process.env.REACT_APP_SITE_KEY}
  onChange={handleToken}
  onExpire={handleExpire}
/>

Reciptchaコンポーネントが設定され、トークンは、他のフォームのparamsと一緒に提出する必要があります.すべてのそれは私たちのために確実性のためのトークンを確認することです.

トークンの確認
Recaptchaトークンを検証するには、サーバーが必要です.verify itへの方法については、recaptchaドキュメントをチェックアウトできます.それはかなりまっすぐ進む.あなたは、秘密鍵を含んでいるGoogle APIとチェックボックスから生成されたrecaptchaトークンを要求する必要があります.