[BUBBLE]「私はロボットではありません」を実装する方法

みなさんこんにちは! Ryoです!

普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。

今回は下の動画のように「私はロボットではありません」でおなじみreCAPTCHAを実装する方法について紹介します。

この機能を実装することによって、不正ログインを防ぎセキュリティ性能を高めることができます。

では、いきましょう。


プラグインのインストール

まず、Pluginsタブのところから[reCAPTCHA]と検索します。

すると、以下の画像のようなプラグインが出てくるのでインストールします。

このプラグインを使うには、Google reCAPTCHAというこのプラグインを提供しているサイトに登録をすることが必要になります。


Google reCAPTCHAの登録方法

次に、Google reCAPTCHAに登録をしていきます。
そのために、以下のURLにアクセスします。

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

すると以下のような画像が出てくるので、必要事項を記入していきます。

まずラベルには、登録するWebサイトのURLを記載しましょう。
これはGoogle reCAPTCHAに登録されている、他のWebサイトと区別するために使います。

次にreCAPTCHAタイプがありますが、[reCAPTCHA v2]を選択しましょう。
Bubbleでは[reCAPTCHA v3]だとエラーを起こしてしまいます。

そして、[「私はロボットではありません」チェックボックス]をチェックします。

ドメインには、[Webアプリの名前.bubbleapps.io]と記入します。
私の場合は、アプリの名前を[recapture111]にしたので、[recapture111.bubble.io]となっています。

オーナーには、このアプリの所有者のGoogleアカウントのメールアドレスを記入します。

「reCAPTCHA利用条件には同意する」にはチェックします。

アラートの設定に関してはチェックすることを推奨します。

そして送信ボタンを押せば設定完了です。

すると以下のような画面に移ります。

そこで、サイトキーとシークレットキーをコピーします。

そして、それらをBubbleのプラグインの画面にてペーストします。

Designタブに戻り、Input formsの[reCAPTCHA forms]を選択して、設置します。

これで完了です。

プレビューを押してみましょう。

すると上手くいっていれば以下の動画のようになっているはずです。


reCAPTCHAの応用法

最後に、reCAPTCHA機能を応用する方法についてReusable Elementsの[Sign up/Login Popup]を使って解説します。

まず[Sign up/Login Popup]のページを開き、Group loginを編集していきます。

そして、[Remember me]と[LOG INボタン]の間にreCAPTCHA設置します。

Workflowタブに移動し、[Button LOG IN is clicked]のOnly whenの部分に[reCAPTCHAform A is checked]を入力します。

これによって、ログインの際にreCAPTCHAを適用することができます。


あとがき

いかがだったでしょうか?

まさか「ロボットではありません」をBubbleで実装できることに驚いたのではないでしょうか?

Bubbleは、プラグインを使いこなせばできそうにないこともできるようになるところが面白いと日々感じます。

今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な情報などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。

それではまた次回の記事でお会いしましょう!!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次