【Bubble】reCAPTCHAの必要性と具体的な設定方法CaptchaとはCaptchaとは、Webページに設置されたフォームなどで、人間による操作・入力であることを確かめるために行われるテストです。皆さんも「私はロボットではありません」と記載されたチェックボックスにチェックを求められた経験や、歪んだ英数字を読み取らされた経験があるのではないでしょうか。提供している無料から使用できるCapthaをreCapthaと呼びます。https://www.google.com/recaptcha/about/なぜCaptchaが必要なのかお問い合わせフォームや会員登録画面などをWebサイトに設置すると、botによる悪質な攻撃を受ける可能性があります。攻撃の中には、悪質なサイトのURLであったり、コンピューターウィルスが組み込まれた文字列だったりが送られてくるものもあります。このような攻撃の被害に遭い、データベース内のデータに不正アクセスされたり、Webサイトの改善されるのを防ぐことがCapthaを導入する目的です。今回はGoogle提供のreCAPTCHAをBubble内で利用する方法を解説したいと思います。BubbleでreCAPTCHAのプラグインをインストールBubble開発画面からPluginへ移動します。検索ボックスへ移動して「reCAPTCHA」と検索し、Installします。GoogleにてreCAPTCHAの開発者登録を行うGoogleのreCAPTCHAページへ移動して認証キーを発行します。https://www.google.com/recaptcha/admin/create登録すると「サイトキー」「シークレットキー」を入手することができます。dev.」の空欄にシークレートキーを入力します。実際のユースケース続いては、サインアップ画面を作って実際にreCAPTCHAの動作確認を行なってみましょう。今回は開発画面内にサインアップ画面を作ります。フォームへreCAPTCHAを設置します。ワークフロー側でボタンがクリックされた時の「Conditional」を設定そして、reCAPTCHAがチェックされていない時はサインアップボタンをクリックできないように設定します。reCAPTCHAをチェックをしていない場合はボタンが表示させず、チェックした場合のみ表示させるワークフローを指定することができます。以上で実装完了となります。