reCAPTCHAのAPI呼び出しが無料枠を超えると課金されるということが分かりました。
導入していたContact Form 7でもこのことがメッセージとして挙げられていて、Cloudflare Trunstileを推奨しますと案内されていた。
ということで、私の管理するWebサイトもeCAPTCHAから、Cloudflare Trunstileに乗り換えることにしました。
ここでは、
Cloudflare Trunstileの導入手順について記録します。
Cloudflare側の作業
Cloudflareにアカウントを作成する
Google eCAPTCHAの利用時と同じように、Cloudflare Trunstileを利用するには、Cloudflareにアカウントを作成します。
下記URLにアクセスします。
そして、「利用開始」をクリックします。
アカウント作成画面が表示されますので、お好みの方法を選択してください。
今回は、メールアドレス、パスワードを入力する方法で作成します。
Eメール、任意のパスワード、「私がロボットではないことを確認します。」欄をチェックして「Signup」ボタンを押します。
なお、パスワードについては、入力時に以下のように規則が示されますので、適合するように指定してください。
８文字以上
数字１文字異常
記号１文字以上
空白っがないこと
登録したメールアドレスに確認メールが届きます。メールを開き「メールアドレスの確認」を押下し認証します。
認証完了画面が表示されます。（なんか、関係ない画面のような気もしますが）
左上のロゴマークをクリックしてCloudflareのダッシュボードに遷移します。
ダッシュボードです。
以上でCloudflareにアカウントを作成できました。
ダッシュボードの言語表記を日本語にする
ダッシュボードの表記が英語なので、日本語に変更します。
右上の人型マークをクリックすると「言語」選択ができますので、此処を日本語に指定してください。
日本語表記のダッシュボードになりました。
Turnstileウィジェットの作成
Turnstileウィジェットを作成します。
概要欄のTurnstileウィジェットの囲みの中にある「ウィジェットを追加」をクリックします。
「ウィジェット名」欄に任意の名称を記入します。
サイト名が識別できるようにしました。
記入後、下にある「ホスト名の追加」という青いボタンを押します。
ボタンを押すと、右側に「ホスト名の追加」がニューっと出てきます。
「カスタムホスト名を追加する」欄にホスト名を入力します。
当サイトの場合、
maihamabreeze.com
を指定して、それぞれ「追加」を押下します。
追加されたホスト名欄に「maihamabreeze.com」があることを確認、チェック入れて、「追加」ボタンを押下します。
ウィジェットモード欄に細かい設定が出てきますが、此処は「管理対象」を、「このサイトの事前クリアランスを選択しますか」欄は「いいえ」を選択します。指定出来たら「作成」クリックします。
一番チェックが厳しい設定です。
「Transtileウィジェットの作成に成功しました」と表示され、
サイトキーとシークレットキーが表示されました。
以上でTurnstileウィジェットの作成が完了しました。
この画面は、しばらく放置しておいてください。
WordPress側の作業
WordPress側にCloudflare Trunstile導入するには、
（１）プラグインを導入する
（２）Contact Form 7の「インテグレーションセットアップ」に導入する
という２つの方法があります。
プラグインを導入する場合の手順
WordPress管理画面にログインします。
「プラグイン」→「新規追加」をクリックします。
検索ボックスに「Simple Cloudflare Turnstile」と入力します。
検索結果から、「Simple CAPTCHA Alternative with Cloudflare Turnstile」、「作者：Eliot Sowersby / RelyWP」を見つけて、「今すぐインストール」をクリックします。
インストール完了後「有効化」をクリックします。
有効化されると設定画面が表示されます。
APIキーの設定欄のサイトキーとシークレットキー欄に先ほど「Turnstileウィジェットの作成」の項で作成して放置した画面に掲載されているサイトキーとシークレットキーをコピペします。
この画面を下にスクロールすると「フォームでTrunstileを有効化する」欄にContact Form 7のプルダウンがありますので開きます。
「すべてのCF7のフォームで有効化」横のチェックボックスにチェックを入れ、「変更を保存」ボタンを押下します。
「設定を保存しました」と表示されます。その下に「もうすぐ完了です・・・」の囲み部分に「応答テスト」ボタンがありますのでこれを押下して稼働確認をします。
成功すると、
「成功！ TrunstileはこれらのAPIきーで正しく動作します。」と表示されます。
確認のため、フォーム画面を開いて確認します。問題なければ下の画像のようにCLOUDFLAREのシールが表示されているはずです。
以上がプラグインを使った導入手順です。
Contact Form 7の「インテグレーションセットアップ」に導入する場合
Contact Form 7のインテグレーション機能を使ってCloudflare Turnstileを実装します。
WordPressダッシュボードに入り、左メニューに「お問い合わせ」下の「インテグレーション」をクリックして、「外部APIとのインテグレーション」を表示させます。
スクロールして、Turnstileの項を表示させ、「インテグレーションのセットアップ」をクリックします。
サイトキー、シークレットキーを記入するテキストボックスが表示されますので、ここに、Cloudflare Turnstileのウィジェットに表示されているサイトキー、シークレットキーをコピペしてください。
できたら、「変更を保存」をクリックします。
「設定を保存しました」と表示され、Turnstile欄の下の方に「Turnstileはこのサイト上で有効化されています。」と表示されていればOKです。
以上で、Contact Form 7にCloudflare Turnstileが実装されました。
Contact Form 7では、Turnstileはサイトキー・シークレットキーを入力するだけで有効化されます。
Cloudflare Turnstileのシールがフォームに表示されているか確認してみます。
これでいい場合は、作業完了です。
表示位置を変更したい場合は、以下のように作業してください。
Contact Form 7のフォームでTurnstileシールを表示させたい場所に[turnstile]ショートコードを挿入します。
以下では、送信ボタン[submit 送信]の前に[turnstile]を指定してみました。
その結果、「送信」ボタンの上にシールが表示されているのか確認できました。
以上で導入完了です。
この記事がお役に立てば幸いです。