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)