ノーコード

【Bubble】reCAPTCHAプラグインにて「私はロボットではありません」を設置する方法

recaptcha-pic

reCAPTCHAとは、Googleが無料で提供しているBotと人間を判別するためのサービスで、「私はロボットではありません」という表示を一度は目にした経験があるでしょう。

ノーコードツール「Bubble」でも、今回紹介するreCAPTCHAをプラグインを用いることでアプリに導入することができます。

そこで本記事ではBubbleでreCAPTCHAを導入する方法から使い方、メリットやデメリットについて解説していきたいと思います。

たろう
たろう
私はロボットではありません

【Bubble】reCAPTCHAプラグインの使い方

security

本章ではreCAPTCHAプラグインを用いてBubbleに「私はロボットではありません」を表示させる方法を解説いたします。

Google reCAPTCHAの登録

以下のURLをクリックしてreCAPTCHAの管理コンソールにアクセスします。

https://www.google.com/recaptcha/admin/create

Googleアカウントを持っていない方は事前に登録しておく必要があるので注意してください。

URLをクリックすると、以下の画面に遷移するので、必要な項目を入力します。

recaptchaコンソール
  • ラベル:登録するアプリのURL(https://example.bubbleapps.io等)
  • reCAPTCHAタイプ:v2。「私はロボットではありません」チェックボックス
  • ドメイン:bubbleapps.io
  • オーナー:アプリ所有者のGoogleアカウントのメアド

上記の項目が入力できたら「reCAPTCHA利用条件に同意する」と「アラートをオーナーに送信する」にチェックを入れた状態で、送信ボタンをクリックしてください。

すると以下の画面に遷移するかと思うので、サイトキーとシークレットキーをコピーしてメモ帳か何かに貼り付けておきます。

reCAPTCHA画面

これでGoogle reCAPTCHAの管理コンソール側での作業は完了となります。

reCAPTCHAプラグインのインストールとキー情報の入力

次に、Bubbleのプラグイン画面にて「reCAPTCHA」と検索し、reCAPTCHAプラグインをインストールしましょう。

reCAPTCHAプラグイン

インストールが完了すると「Site key」と「Secret key」を入力する箇所が出てくるので、先ほどコピーした値を貼り付けます。

これで設定は完了です。

reCAPTCHAプラグインの使い方

以上の設定が完了するとDesignタブのInput formsに「reCAPTCHA forms」という要素が表示されているはずなので、配置したい箇所にドラッグ&ドロップしてみましょう。

reCAPTCHA使い方

また、ワークフロー作成時にreCAPTCHAフォームがチェックされた時のみ実行されるワークフロートリガーを追加できるようになったはずです。(以下の画像を参照)

only when

以上でreCAPTCHAプラグインを用いてBubbleに「私はロボットではありません」を表示させる方法の解説は終了です。

reCAPTCHAの種類とメリット・デメリット

zero-trust

本章では実際にアプリにreCAPTCHAを導入するにあたり知っておくべき最低限の知識について触れておきたいと思います。

reCAPTCHAのメリット

reCAPRCHAのメリットは、botによる攻撃を防げる(スパム対策になる)ことです。

botによるフォーム登録は運用者にとってノイズとなりますし、ウィルスに感染させたり、個人情報を抜き出そうとしてきたりと百害あって一利なしの代物と言えます。

reCAPTCHAの導入により上記の問題が100%解決されるわけではありませんが、何もしないよりは絶対良いです。セキュリティ対策として次に説明するデメリットと天秤にかけて導入を検討すべきでしょう。

reCAPTCHAのデメリット

reCAPRCHAのデメリットは、ユーザビリティを損ねてしまうことです。

「私はロボットではありません」にチェックを入れたり、画像選択を迫られたりすることでユーザーは煩わしさを覚えるでしょう。

reCAPRCHAを設置することで、ユーザーの離脱率が上がることが考えられます。

reCAPTCHA v3では、ユーザーにアクションを求めることなくbotか人間か自動で判断する。

そのため、reCAPRCHAを設置する際は必要最小限に留めておきましょう。

reCAPTCHAの種類

ざっくり以下の種類が存在します。

「reCAPRCHA v3」は先に説明した通り、ユーザーによる画像認証やチェックボックスへのチェックなどのアクションなしにbotか人間かの判断を自動で行ってくれます。

そのため、v3ではユーザビリティを損ねてしまうreCAPRCHAのデメリットなく、セキュリティ強度を高めることが可能です。

v2ではここまで説明してきた「私はロボットではありません」にユーザーがチェックを入れることでbotと人間の判別を行います。

上記はreCAPRCHA v2の中でもCheckboxの話であり、実際にはInvisibleやAndroidといった種類が存在するので、気になる方は公式ドキュメントを確認してみてください。

reCAPTCHAの導入によりbotによる攻撃を防げる。一方でチェックボックスへのチェックや画像選択など、ユーザビリティを損ねてしまうので使い所に注意。

 

【Bubble】reCAPTCHAプラグインの使い方|まとめ

recaptcha-pic

ここまでreCAPTCHAプラグインを用いてBubbleに「私はロボットではありません」を表示させる方法から、reCAPTCHAの種類や導入のメリットやデメリットについて解説してきましたが、いかがだったでしょうか?

Bubbleで開発するアプリケーションのセキュリティを高めるためにも是非reCAPTCHAの導入を検討してみてください(^^)

たろう
たろう
ここまで記事を読んでいただきありがとうございました♪

本記事がreCAPTCHAプラグインを用いてBubbleで開発するアプリに「私はロボットではありません」を表示させる方法を知る上で少しでもあなたのお役に立てたのなら幸いです。

bubble-sample
【Bubble】ノーコードツールの開発事例7選これからノーコードツール"Bubble"について学習される方やツールの導入を検討している企業担当者の中には以下のような疑問や考えを持つ方...
こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。