開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2022年3月11日 (金)

フォームにreCAPTCHAを設定する

reCAPTCHAとはスパムやbotなどによる悪質なアクセスからWebサイトを保護するための仕組みです。
Googleが提供するreCAPTCHAをSPIRALver1で作成したフォームに組み込むことができます。

DEMOはこちら
reCAPTCHAの制御方法は複数ありますが、
ここではreCAPTCHAチェックを入れた際にボタンが有効化になる方法をご紹介します。

reCAPTCHA設定(Google側)

まずGoogleのreCAPTCHAページにてサイトドメインを登録し、サイトキー・シークレットキーを取得します。

1.Google reCAPTCHAページ
Google reCAPTCHAページ
にアクセスし、右上の「Admin console」をクリックします。

2.サイトの登録
・reCAPTCHAタイプの項目は「reCAPTCHA v2」を選択します。
・ドメインはSPIRAL ver.1で作成したフォームURLの「reg○○.smp.ne.jp」部分を設定します。
※○○部分はSPIRAL ver.1システムごとに変わりますのでご注意ください。

(サイトの登録画面)


3.サイトキー、シークレットキーの取得
上記の登録が終わると、サイトキーとシークレットキーが表示されますので控えておきます。

(サイトキー、シークレットキーの取得画面)

サイトキー、シークレットキーをカスタムモジュールに保存

シークレットキーはフォームとreCAPTCHA 間の通信で使用する重要なキーとなるため、
カスタムモジュールなど外部からアクセスできない場所に保管してrequire などを使って読み込むことをおすすめします。
サイトキーもまとめておくと変更があった場合の管理の際に便利です。
カスタムモジュールの設定方法は下記サポートサイトよりご確認ください。
カスタムモジュール
カスタムモジュールに設定するサンプルPHPスクリプトは下記です。
<?php

// reCAPTCHA v2 サイトキー
define('V2_SITEKEY', '取得したサイトキー');
// reCAPTCHA v2 シークレットキー
define('V2_SECRETKEY', '取得したシークレットキー');

?>

フォーム入力HTMLソースにカスタムモジュールを呼び出すPHPコード、reCAPTCHAチェックタグ、reCAPTCHA API読み込みタグを設置

フォーム入力HTMLソースにカスタムモジュールを呼び出すPHPコードを設置します。
設置場所はHTMLソースの最初の行に設置します。
なお、1行目はSPIRALでPHPを使用する際に必要なタグとなるため必ず記載します。
<?php // <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=OFF NAME=check --> ?>
<?php
require 'カスタムモジュールの実行時ファイルパス';
// reCAPTCHA サイトキー
$siteKey = V2_SITEKEY;
?>
reCAPTCHAチェックタグを任意の場所に設置します。
デモフォームでは判定タグ「<input type="hidden" name="detect" value="判定">」直前に設置しています。
<div class="g-recaptcha" data-sitekey="取得したサイトキー" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
<p id="warning">送信するにはチェックを入れてください。</p>
form閉じタグ直下にreCAPTCHA の API読み込みタグを設置します。
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

フォーム入力HTMLソースにボタンが有効化になるJavaScriptを設置

チェックが入ったらボタンが有効化になるJavaScriptをhead閉じタグ直前に設置します。
<script> 
  var verifyCallback = function(response) { //コールバック関数の定義
    //#warning の p 要素のテキストを空にf
    document.getElementById("warning").textContent = '';
    //#send の button 要素の disabled 属性を解除
    document.getElementById("send").disabled = false;
  };
  var expiredCallback = function() { //コールバック関数の定義
    //#warning の p 要素のテキストに文字列を設定
    document.getElementById("warning").textContent = '送信するにはチェックを・・・';
    //#send の button 要素に disabled 属性を設定
    document.getElementById("send").disabled = true;
  };
</script>
ボタンタグに「id="send"」と無効化になる「disabled」を設置します。
<input class="submit" type="submit" name="submit" value="送信" id="send" disabled>

フォーム確認HTMLソースにPHPコードを設置

reCAPTCHAを実装したフォームから送られてきたデータを処理する前に認証コードが正しいか不正かを判定する場合は、フォーム確認HTMLソース上に判定するためのPHPコードを設置します。
SPIRALではセキュリティの関係上file_get_contents()の利用を禁止しているので、cURL関数を使います。

下記サンプルコードです。
<?php // <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=OFF NAME=confirm --> ?>
<?php
require 'カスタムモジュールの実行時ファイルパス';
// reCAPTCHA サイトキー
$siteKey = V2_SITEKEY;
// reCAPTCHA シークレットキー
$secretKey = V2_SECRETKEY;
 
$result_status = '';  // 結果を表示する文字列を初期化
if ( isset( $_POST[ 'g-recaptcha-response' ] ) ) {
  //cURL セッションを初期化
  $ch = curl_init();
  // curl_setopt() により転送時のオプションを設定
  //API の URL の指定
  curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
  //HTTP POST メソッドを使う
  curl_setopt($ch, CURLOPT_POST, true );
  //API パラメータの指定
  curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array(
    'secret' => $secretKey, 
    'response' => $_POST[ 'g-recaptcha-response' ]
  )));
  //curl_execの返り値を文字列にする
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  //転送を実行してレスポンスを $json に格納
  $json = curl_exec($ch);
  //セッションを終了
  curl_close($ch);
  
  //レスポンスの $json(JSON形式)をデコード
  $result = json_decode( $json );
 
  if ( $result->success ) {
    $result_status = '成功';
    // 成功した場合の処理(メールの送信など)を実行(または結果を変数に入れて、その変数を使って処理を分岐するなど)
  } else {
    $result_status = '失敗: ';
    // error-codes は配列(以下は最初のエラーを取得)
    $result_status .= $result->{'error-codes'}[ 0 ];
  }
}
?>
以上でreCAPTCHA設定は完了です。
ver2での設定方法は下記ページをご覧ください。
reCAPTCHA設定

不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。
また今回は以下ページを参照させていただきました。
Google reCAPTCHA の使い方(v2/v3)
解決しない場合はこちら コンテンツに関しての
要望はこちら