reCAPTCHAとはスパムやbotなどによる悪質なアクセスからWebサイトを保護するための仕組みです。
Googleが提供するreCAPTCHAをSPIRALver1で作成したフォームに組み込むことができます。
DEMOはこちら
reCAPTCHAの制御方法は複数ありますが、
ここではreCAPTCHAチェックを入れた際にボタンが有効化になる方法をご紹介します。
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.サイトキー、シークレットキーの取得
上記の登録が終わると、サイトキーとシークレットキーが表示されますので控えておきます。
(サイトキー、シークレットキーの取得画面)

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 などを使って読み込むことをおすすめします。
サイトキーもまとめておくと変更があった場合の管理の際に便利です。
カスタムモジュールの設定方法は下記サポートサイトよりご確認ください。
カスタムモジュール
カスタムモジュールなど外部からアクセスできない場所に保管してrequire などを使って読み込むことをおすすめします。
サイトキーもまとめておくと変更があった場合の管理の際に便利です。
カスタムモジュールの設定方法は下記サポートサイトよりご確認ください。
カスタムモジュール
カスタムモジュールに設定するサンプルPHPスクリプトは下記です。
<?php
// reCAPTCHA v2 サイトキー
define('V2_SITEKEY', '取得したサイトキー');
// reCAPTCHA v2 シークレットキー
define('V2_SECRETKEY', '取得したシークレットキー');
?>
フォーム入力HTMLソースにカスタムモジュールを呼び出すPHPコード、reCAPTCHAチェックタグ、reCAPTCHA API読み込みタグを設置
フォーム入力HTMLソースにカスタムモジュールを呼び出すPHPコードを設置します。
設置場所はHTMLソースの最初の行に設置します。
なお、1行目はSPIRALでPHPを使用する際に必要なタグとなるため必ず記載します。
reCAPTCHAチェックタグを任意の場所に設置します。
デモフォームでは判定タグ「<input type="hidden" name="detect" value="判定">」直前に設置しています。
form閉じタグ直下にreCAPTCHA の API読み込みタグを設置します。
設置場所はHTMLソースの最初の行に設置します。
なお、1行目はSPIRALでPHPを使用する際に必要なタグとなるため必ず記載します。
<?php // <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=OFF NAME=check --> ?> <?php require 'カスタムモジュールの実行時ファイルパス'; // reCAPTCHA サイトキー $siteKey = V2_SITEKEY; ?>
デモフォームでは判定タグ「<input type="hidden" name="detect" value="判定">」直前に設置しています。
<div class="g-recaptcha" data-sitekey="取得したサイトキー" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div> <p id="warning">送信するにはチェックを入れてください。</p>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
フォーム入力HTMLソースにボタンが有効化になるJavaScriptを設置
チェックが入ったらボタンが有効化になるJavaScriptをhead閉じタグ直前に設置します。
ボタンタグに「id="send"」と無効化になる「disabled」を設置します。
<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>
<input class="submit" type="submit" name="submit" value="送信" id="send" disabled>
フォーム確認HTMLソースにPHPコードを設置
reCAPTCHAを実装したフォームから送られてきたデータを処理する前に認証コードが正しいか不正かを判定する場合は、フォーム確認HTMLソース上に判定するためのPHPコードを設置します。
SPIRALではセキュリティの関係上file_get_contents()の利用を禁止しているので、cURL関数を使います。
下記サンプルコードです。
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)
ver2での設定方法は下記ページをご覧ください。
reCAPTCHA設定
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。
また今回は以下ページを参照させていただきました。
・Google reCAPTCHA の使い方(v2/v3)