reCAPTCH v3 を問い合わせフォームに実装する手順【PHP+JS】

問い合わせフォームをPHPとかで自作した場合・・・

何の対策もしてないと、あっという間にスパムの温床になります。

そんな時に便利なのが reCAPTCH という機能

昔は「消火栓の画像を選べ!」とか出てきて嫌われてたアレですが、
今は reCAPTCH v3 が使えるので、ストレスのないスパム対策もできるようになりました。

そこで reCAPTCH v3 を問い合わせフォームに実装する手順を紹介

意外と簡単な手順だったので、実装するのもそれほど難しくないです。

手順1.まずサイト専用のreCAPTCHAキーを取得

それでは reCAPTCHA v3 を使える準備をしていきます。

そのために必要なのが reCAPTCHA サイトキーの取得

必ず必要なので、絶対に取得しておきましょう。

 

ではまず、次のページにアクセス

そして次画像のようにオプションを設定します。

まずサイト情報を入力する

  • ラベル
    ここは適当な名前でOK。自分のサイト名とかサービス名とか...
  • reCAPTCHAタイプ
    ここではストレスフリーで利用できる reCAPTCHA v3 の方を選ぶ
  • ドメイン
    reCAPTCHAを利用したいサイトのドメイン

あと利用規約とかに同意したら「送信」ボタンをクリック

 

次の画面に進むとサイトキーとシークレットキーの2種類が生成されます。

reCAPTCH v3 のサイトキーとシークレットキー

とりあえずこの2つが手に入ればOK

ちなみに次の手順で説明するように、次の場面で必要になります。

  • サイトキー
    問い合わせフォーム側で reCAPTCH API に送るレスポンスを生成するのに使う
  • シークレットキー
    サーバーサイド側で reCAPTCH API を呼び出しするのに使う

サイトキーならまだしも、シークレットキーは外部にばれるとマズいです。

手順2.フロントサイド(JS)側の実装

お次は問い合わせフォーム側での準備

今手に入れたサイトキーを使い、 reCAPTCHA を実装していきます。

その手順とかコード例は次の通り

 

まずサイトの head タグ内で次みたいな scriptタグ を追加

ただし、[YOUR_SITE_KEY] は各自の reCAPTCHA サイトキーに置き換えてください。

 

そうしたら、適当に問い合わせフォームとかを作ります。

▼ PHP + JavaScript で作る簡易的なフォームの作り方

もしフォームの作り方が分からない場合、上記事をご覧ください。

 

それで肝心なのがここから、

作成した問い合わせフォームの中で、reCAPTCH 用の隠しフィールドを作ります

▼ 例えばこんな感じで

そしてこの隠しフィールド用に、次のスクリプトも追加

ただし [YOUR_SITE_KEY] は各自のモノに置き換えること(2回目)

何をしてるかについては、あんまり深く考える必要ないと思います。

手順3.サーバー側(PHP)での reCAPTCH の実装

最後はサーバーサイド側での reCAPTCHA の実装

ここでは次のステップを踏んで、送信がボットか人間かを判別することにします。

  1. reCAPTCHAレスポンスを受け取る
  2. レスポンスから怪しさスコアを取得
  3. 怪しさスコアを元にボットか判別

まあ "怪しさスコア" って自分が勝手に作った言葉なんですが・・・

この 怪しさスコア は 0 <= x <= 1 までの範囲で
0に近づくほどボットの可能性大1に近づくほど人間の可能性大になる みたいです。

ここでは念のため 0.7 以下はボットとして扱うことにします。

 

▼ 具体的なPHPコード例は次の通り

必ず [YOUR_SECRET_KEY] は各自のモノに置き換えてください(3回目)

このコードで何をしてるか簡単に説明すると、

  1. まず $_POST['recaptch_response']  からレスポンスを取得
  2. recaptch API にレスポンスを渡して結果を取得
  3. スコア( $recaptch->score  )の値からボットか判別

実際にスコアを表示してみたら、大体 0.9 が返ってくるのがほとんどでした。

なのでスパムを防ぐこと重視ならスコア 0.7 以上、
少し緩い基準でもいいならスコア 0.5 以上を人間とみなすのがいいかもしれない

自分はスパムメールを徹底的に防ぎたいので、0.7以上を閾値にしてます。

reCAPTCH v3 の実装手順まとめ

ここまでの手順を箇条書きすると、こんな感じ

  1. reCAPTCHキーの取得
  2. フロント側(JS)での実装
  3. サーバー側(PHP)での実装

スパムを予防するなら、reCAPTCH の実装も大事です。ではでは($・・)/~~~

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください