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

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

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

カスタマイズ 2022.06.15

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

弊社では、マーケ/営業活動で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設置のために必要な情報を準備します。

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

サーバサイドのreCAPTCHA v2対応

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

modules/Webforms/capture.phpをコピーしてmodules/Webforms/captureWithRecaptcha.phpを作成する
クラス名をWebform_CaptureからWebform_CaptureWithRecaptchaに変更する（クラス定義とインスタンス化の2か所）

以下のコードスニペットを、$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;
}

modules/Webforms/captureWithRecaptcha.phpをF-RevoCRMインストールディレクトリにコピーする

フォームの修正

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

</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>

<form>タグのaction属性のURLをcapture.phpからcaptureWithRecaptcha.phpに変更する
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>
```
submitボタンに属性id="btnSubmit" disabledを追加する
- F-RevoCRMが生成するWebフォームHTMLから手を加えている場合は、ボタンがデフォルトでdisabledとなり、reCAPTCHAチェックがOKとなるとdisabledが解除されるようにrecaptchaCallback関数の中身もあわせて適宜実装する