東京都 新宿のWeb制作会社
ソーイ株式会社
ホームページ制作 /
ランディングページ制作

BLOG

ブログ

更新日: 公開日:

スパム防止プログラム Turnstile の利用方法

Tanaka Akiyuki
CEO

Turnstileは、サイト訪問者が「人間かボットか」を自動で判別する非干渉型のスパム防止プログラムです。スパム防止プログラムではGoogleが提供するreCAPTCHAが有名ですが、reCAPTCHAがGoogle Cloudに統合されてから無料利用範囲が100万回から1万回に縮小されたこともあり、運営するサイトの規模によってはTurnstileに乗り換えを検討している方もいるのではないかと思います。

この記事では、Turnstileの利用方法について解説します。なお、reCAPTCHAについてはこちら(https://sooi.co.jp/blog/6394/)に記事がありますので興味のある方はご覧ください。

Cloudflareとは

TurnStileはCloudflareが提供するサービスの1つですので、Cloudflareに登録して利用することになります。Cloudflare は、ユーザーがWebサイトにアクセスする際に、その手前で 安全チェックや高速化を行うサービス です。Turnstile は Cloudflare に含まれる機能で、アクセスしてきた相手がボットではなく 人間かどうかを自動で判定 します。

Turnstileの使い方

Turnstileを利用するには以下の流れで登録を進めていきます。

  1. Cloudflare Turnstileへの登録
  2. Turnstile Widgetの作成(ドメインの登録やモードの選択)→ キーの生成

1.Cloudflare Turnstileへの登録

下記URLからCloudflareに登録あるいはすでにアカウントがある方はログインします。
https://www.cloudflare.com/ja-jp/application-services/products/turnstile

2.Turnstile widgetの作成(キーの生成)

Turnstileを利用するためにwidgetを作成します。widgetとはシステムで一般的に使われる用語で、単体機能を指す言葉です。ここでは、Cloudflare上に様々ある機能からTurnstileを利用するためにその機能を切り出すといったイメージを持っていただけると良いかと思います。

widget作成画面を開く

まずCloudflareの管理画面でTurnstileが選択されていることを確認します。次に「Add widget」をクリックして、widjet作成画面を開きます。

widget名の登録

下記のwidjet画面が表示されたらwidget名を登録します。任意のわかりやすいものにしておきましょう。次に「Add Hostnames」をクリックしてTurnstileを有効にするドメインを登録します。

ドメインの登録

「Add Hostnames」をクリックすると下記の様が画面が表示されます。Turnstileを有効にしたいドメインを入力して「Add」をクリックしてドメインの登録完了です。

次のような画面が表示されているはずです。

WidjetModeの選択

次にWidjetModeを選択します。次の画面にあるように3つのモードがあります。

それぞれのモードの意味は下記の通りです。

Managed基本的に自動判定だが、必要に応じてユーザーに操作を要求して人間かどうかを判定する。認証中のローディングマークやTurnstileのロゴが表示される。
Non-interactive自動判定し、ユーザーには操作を要求しない。認証中のローディングマークやTurnstileのロゴが表示される。
Invisible自動判定し、ローディングマークもロゴも表示しない。

ローディングやロゴは下記のように表示されます。

公式推奨はManagedとなっていますがユーザーに何も見せたくない場合は「invisible」を選択します。

Pre-clearance オプションの選択

最後にオプションを選択します。質問に対してYes/Noで答えますが、この質問の意味は、Turnstileを一度通過した人を、その後はCloudflare側で“人間とみなして優遇しますか?”ということです。このPre-clearanceを有効にすると、Turnstileを一度通過したユーザーにcf_clearance cookie が発行されます。

このCookieは「このユーザーは人間である」とCloudflare認証済の証明となり、以降はチェックを省略できるようになります。ログイン機能やフォーム、その他様々なシチュエーションでTurnstileやその他Cloudflareの機能を使う場合には考慮してもよい機能だと思いますが、コーポレートサイトのようにフォームにのみTurnstileを利用する場合はYes/Noどちらでも良いでしょう。

最後に「Create」ボタンをクリックしてwidjetの作成は完了です。

キーの生成

「Create」をクリックすると下記のように生成されたキーが画面に表示されます。あとは利用するシステム側でこのキーを使って設定して完了になります。