こんにちは。小川智也です。
本日はDay24ということで、Ringeeのログイン実装3回目を行っていきます。今回はCloudflare Turnstileの実装が主な内容となります。
本当は今日メルアド認証とGoogle認証もをやりたかったのですが、悪意のあるユーザーにAPIバンバン叩かれたら怖いよねということで急遽Cloudflare Turnstileを先に実装することになりました。
最後までぜひご覧ください。
この記事は夏休み毎日投稿2025として執筆されたものです。
夏休み毎日投稿2025のすべての記事は下記から閲覧いただけます。
小川智也と申します。Webプログラマーな中学2年生です。
このブログでは主にITやガジェット系の情報を発信しています！
▼ おすすめリンク ▼
【 X(旧Twitter)・いえPay・個人事業主・ITパスポート・お問い合わせ 】
Cloudflare Turnstileとは
まず始めに、Cloudflare Turnstileとは何なのかを解説します。
Cloudflare Turnstileは、GoogleのreCAPCHAのCloudflare版のようなもので、サイトをボットなどからの不正利用から守るものです。
reCAPCHAとTurnstileの一番の違いは、画像認証や文字入力などのインタラクティブ認証の有無です。
Turnstileは、基本すべての認証をユーザーの操作無しで行うため、認証にあまり時間がかからない上ユーザーのストレスもかなり軽減されます。
個人的にはインプレゾンビ、異様にバツボタンが小さい広告の次にreCAPCHAの画像選択がキライなので、Turnstileのほぼ何もしなくてもいい認証は滅茶苦茶好きです
実装方法
ということで次に大まかな実装方法を見ていきましょう。
実装方法は簡単で、サイトにSDKとコードを張ってその中にTurnstileのサイトキーを書くだけです。
ぶっちゃけこれだけでも十分動くのですが、今回は下記のようなフォームに組み込む方式で使っていきます。
フォームに組み込む
フォームに組み込むときはこんな感じで、そのままさっきのTurnstileウィジェットをformタグ内に書くだけでOKです。
コンポーネント化してボタンと連動させてみる
一様このままでも使えるのですが、ログインページや新規登録ページなど複数のページで使う予定なので、#7で導入したVue.jsでコンポーネント化して楽にできるようにしようと思います。
ついでに、認証が終わらないとログインボタンが押せなくなるようにもしておきます。（後述するサーバーサイド側での認証をうまくできるようにするため）
コンポーネント化後は、こんな感じで短いコードで導入できるようになりました。
ログイン画面(Cloudflare Turnstile実装後)
実際にログインフォームに実装した後はこんな感じで、ちゃんとよく見るアレになってますね。
ぶっちゃけこのままだと認証しないとボタンが押せないだけで強行突破する方法なんていくらでもあります。
そこで、この情報を元にサーバー側で検証するスクリプトも実装していきます。
サーバー側のプログラム
ということでChatGPTと公式ドキュメントを頼りにサーバー側のプログラムも出来ました。
フォームに送られてきたトークンをCloudflareのサーバーに投げて有効かどうかを確認しています。
ちゃんと関数にしてあるのでうまくいっていればログインページでも新規登録ページでも使い回せるはずです。
登録用のAPI側では仮で関数を呼び出して検証するようにしてあります。
無事に動きました。これでログイン系APIの不正利用は防げそう。
まとめ
いかがだったでしょうか。今回はDay24ということで、Cloudflare Turnstileの実装を行ってみました。
次回はGoogleログインのテストを行っていこうと思います。このペースで夏休み中に終わるかな...
最後まで見ていただき、ありがとうございました。
この記事がいいと思った方はぜひ他の記事も見ていってください！
X(旧Twitter)のフォローもよろしくお願いします！
