ローコードプラットフォームSPIRALのフォームにreCAPTCHAを導入する

SPIRALは、主にエンタープライズ向けのローコードプラットフォームになります。ローコードプラットフォームなので、プログラミング知識がなくともWebアプリケーションを開発できるのが魅力です。

SPIRALでは、お問い合わせなど、テーブルへのデータ登録向けにフォームを生成できます。フォームを一般公開するとスパムメッセージが送られてくることがありますが、それを防止するためにSPIRALのフォームにreCAPTCHAを導入する手順を紹介します。

こちらにも解説があるので参考にしてください。

フォームにreCAPTCHAを設定する | 記事一覧 | SPIRAL ナレッジサイト

準備

テーブルの作成

今回のテーブルは reCAPTCHAデモ（reCAPTCHADemo） とします。SPIRALの管理画面から、テーブルを作成します。フィールドは以下のように設定します。

フィールド名	サンプル値	型	差し替えキーワード
メールアドレス	[e-mail]	メールアドレス（大・小文字を無視）	email

フォームの作成

Web > フォームを使って、 reCAPTCHAデモ を使ったフォームを作成します。

フォームを作成すると、専用のURLが発行されます。 https://reg**.smp.ne.jp/ のようなURLになるので、このドメインをメモしておきます。

reCAPTCHAの登録

reCAPTCHAはv2の「私はロボットではありません」チェックボックスを選択します。ドメインの設定で、先程のフォームのドメインを追加します（例： reg**.smp.ne.jp）。

登録した結果、 サイトキー と シークレットキー が発行されるので、これもメモしておきます。

カスタムモジュールの作成

環境変数などをフォーム上に直書きするのは良くないので、カスタムモジュールで管理します。開発メニューの カスタムモジュール を選択します。

新規作成ボタンを押し、下記情報で新規作成します。

• ソースフォルダ: 空文字
• 名前: module

そして、PHPスクリプトとして下記のコードを入力します。 YOUR_SITE_KEY と YOUR_SECRET_KEY には、先程メモしたキーを入力してください。

<?php
// reCAPTCHA v2 サイトキー
define('V2_SITEKEY', 'YOUR_SITE_KEY');
// reCAPTCHA v2 シークレットキー
define('V2_SECRETKEY', 'YOUR_SECRET_KEY');
?>

入力が終わったら保存します。

フォームの編集

先ほど作成したフォームの 入力ページ を選択します。 デザイン を ソースデザイン に変更し、 入力ページ用HTML の頭に以下のコードを追加します。

<?php // <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=OFF NAME=check --> ?>
<?php
require 'module.php';
// reCAPTCHA サイトキー
$siteKey = V2_SITEKEY;
?>

module.php は先程カスタムモジュールで作成したファイルです。そのファイルを読み込んで、 $siteKey にサイトキーをセットしています。

続いて、 reCAPTCHA を表示する場所を確保します。

<!-- 追加ここから -->
<div class="g-recaptcha" style="padding-top: 1em" data-sitekey="<?php echo $siteKey; ?>" data-callback="verifyCallback" data-expired-callback="expiredCallback"></div>
<p id="warning">送信するにはチェックを入れてください。</p>
<!-- 追加ここまで -->

<input type="hidden" name="detect" value="判定">

さらに、入力ボタンをカスタマイズします。デフォルトは無効にし、さらに #send を追加しておきます。

<input class="submit" type="submit" id="send" name="submit" value="送信" disabled >

そして、フォームタグの閉じた直後に reCAPTCHA のスクリプトを追加します。

</form> <!-- これは既存 -->
<!-- 以下を追加 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

このままだと、ボタンをマウスオーバーすると色が変わってしまうので、CSSを追加します。 disabled 属性がある場合は、マウスイベントを無効にします。

#SMP_STYLE input.submit:disabled {
 filter: alpha(opacity=30);
 -ms-filter: alpha(opacity=30);
 opacity: 0.1;
 pointer-events: none;
}

最後に、reCAPTCHAの検証を行うためのJavaScriptを追加します。

<script>
  function verifyCallback(response) { //コールバック関数の定義
    //#warning の p 要素のテキストを空にf
    document.getElementById("warning").textContent = '';
    //#send の button 要素の disabled 属性を解除
    document.getElementById("send").disabled = false;
  };
  function expiredCallback() { //コールバック関数の定義
    //#warning の p 要素のテキストに文字列を設定
    document.getElementById("warning").textContent = '送信するにはチェックを・・・';
    //#send の button 要素に disabled 属性を設定
    document.getElementById("send").disabled = true;
  };
</script>

これで入力フォームは完成です。実際に表示すると、初期表示はボタンがグレーアウトしています。

reCAPTCHAのチェックが入ると、ボタンが有効化されます。

確認画面の変更

次に確認画面を変更します。フォームのページ設定で 確認ページ を選択します。 デザイン を ソースデザイン に変更し、 確認ページ用HTML の頭に以下のコードを追加します。

この処理は、reCAPTCHAの検証を行うためのものです。カスタムモジュールで作成したサイトキーとシークレットキーを使って、reCAPTCHAの検証を行います。

<?php // <!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=OFF NAME=confirm --> ?>
<?php
require 'module.php';
// 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 ];
  }
}
?>

結果として、 $result_status が空文字であれば成功、そうでなければ失敗となります。 SMP_TEMPLATE_FORM の中で、表示の出し分けを行えばいいでしょう。

<!-- SMP_TEMPLATE_FORM start -->
 <?php
   if ($result_status == '') {
 ?>
   <form method="post" action="/regist/Reg2">
     <input type="hidden" name="confirm" value="true">
     <div class="smp_tmpl">
       <dl class="cf">
         <dt class="title">
           メールアドレス
         </dt><dd class="data ">
         $email$ <br>      </dd>
       </dl>
     </div>
    <input type="hidden" name="detect" value="判定">
    <!-- HIDDEN_PARAM START -->
    $form:hidden$
    <!-- HIDDEN_PARAM END -->
    <input class="submit" type="submit" name="SMPFORM_BACK" value="戻る">  <input class="submit" type="submit" name="submit" value="送信">  
   </form>
<?php } else {
?>
  <div>
    <h1>エラーが発生しました</h1>
    <div
      style="padding: 1em; font-weight: bold"
    ><?php echo $result_status; ?></div>
  </div>
<?php
}
?>
<!-- SMP_TEMPLATE_FORM end -->

これで確認画面の完成です。以下は検証エラーの表示例です。

まとめ

今回はSPIRALのフォームにreCAPTCHAを導入する手順を紹介しました。reCAPTCHAを導入することで、スパムメッセージの送信を防止できます。ぜひお試しください。

現在、SPIRALではエンジニアβという無料アカウントを配布しています。SPIRALに興味がある型はこちらから試してみてください。

API SPIRAL ver.1 サポートサイト