null オープンソースCRM "F-RevoCRM" のWebフォームをreCAPTCHA v2対応する

こんにちは。おおたにです。

 

弊社では、マーケ/営業活動でF-RevoCRMというオープンソースのCRMを利用しています。F-RevoCRMは、同じくオープンソースのVtiger CRMをベースに日本向けのカスタマイズを施した製品です。

弊社のWeb問合せフォームでは、F-RevoCRMのWebフォーム機能を利用してリード登録やサンクスメール送信の自動化を行っています。ボット対策としてキャプチャを追加していますが、弊社の利用しているF-RevoCRM(Vtiger CRM 7.3ベース)はreCAPTCHA v1しか対応していません。そこで、今回はF-RevoCRMをreCAPTCHA v2に対応させるための方法を紹介しようと思います。なお、同様の方法をVtiger CRMにも適用できると思います。

 

事前準備

まずはreCAPTCHA設置のために必要な情報を準備します。

  1. reCAPTCHAの管理ページにアクセスする
  2. 目的のWebサイトのドメインに対して、reCAPTCHA v2のサイトキーとシークレットキーを払い出す

 

サーバサイドのreCAPTCHA v2対応

続いて、reCAPTCHA v2に対応するためにサーバサイドの修正を行います。デフォルトではcapture.phpがフォームsubmit処理を行うので、それをベースとして新たなフォームsubmit用コードを実装します。

  1. modules/Webforms/capture.phpをコピーしてmodules/Webforms/captureWithRecaptcha.phpを作成する
  2. クラス名をWebform_CaptureからWebform_CaptureWithRecaptchaに変更する(クラス定義とインスタンス化の2か所)
  3. 以下のコードスニペットを、$request = vtlib_purify($_REQUEST);の行の直後に追加する
    • xxxxxxxxxxをreCAPTCHA v2のシークレットキーに置き換える
    if (isset($request['g-recaptcha-response']) && !empty($request['g-recaptcha-response'])) {
    	$resp = @file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=xxxxxxxxxx&response={$request['g-recaptcha-response']}");
    	$resp_result = json_decode($resp, true);
        if (intval($resp_result["success"]) !== 1) {
            return;
    	}
    } else {
    	return;
    }
  4. modules/Webforms/captureWithRecaptcha.phpをF-RevoCRMインストールディレクトリにコピーする

 

フォームの修正

次に、F-RevoCRMのフォームが埋め込まれているWebページHTMLを修正します。

  1. </head>タグの直前に以下のHTMLスニペットを追加する
    <script src="https://www.google.com/recaptcha/api.js" type="text/javascript"></script>
    <script type="text/javascript">
        function recaptchaCallback() {
            var btnSubmit = document.getElementById("btnSubmit");
            btnSubmit.disabled = false;
        }
    </script>
  2. <form>タグのaction属性のURLをcapture.phpからcaptureWithRecaptcha.phpに変更する
  3. Webフォームフィールドの一番最後に、以下のキャプチャ用フィールドを追加する
    • xxxxxxxxxxをreCAPTCHA v2のサイトキーに置き換える
    • F-RevoCRMが生成するWebフォームHTMLから手を加えている場合は、そのデザインに合わせて適宜以下の<div>タグを挿入する
    <tr>
        <td></td>
        <td><div class="g-recaptcha" data-sitekey="xxxxxxxxxx" data-callback="recaptchaCallback"> </div></td>
    </tr>
  4. submitボタンに属性id="btnSubmit" disabledを追加する
    • F-RevoCRMが生成するWebフォームHTMLから手を加えている場合は、ボタンがデフォルトでdisabledとなり、reCAPTCHAチェックがOKとなるとdisabledが解除されるようにrecaptchaCallback関数の中身もあわせて適宜実装する

 

試してみよう

フォームのページにアクセスし、以下のようにreCAPTCH v2が表示されること、フォームを送信してF-RevoCRM側で規定された処理が実行されること(リード登録やメール送信など)を確認してください。

 

今回の紹介は以上です。なお、今回はreCAPTCHA v2を利用しましたが、reCAPTCHA v3も同じ実装方針で対応できると思います。

また、弊社ではオープンソースのドキュメント管理ソフトウェアAlfrescoとF-RevoCRMとの連携ソリューションも提供していますので、興味のある方は是非お問い合わせください。

RANKING
2020.10.12
2020.11.19
2020.12.23
2020.10.05
2020.11.25