Ccenterにcaptcha_xを導入してみるテスト。

XOOPS Cubeには、様々なお問合せモジュールがありますが、
いざ使うとなるとどれを使って良いか迷ってしまいます。
これまではSPAM/SSL機能のついているFormMailモジュールを
愛用していたのですが、開発中止のモジュールなので、
そろそろ新しいモジュールにしようかと。
 
勉強会等に参加させて頂き、有識者の方々からのアドバイスを
参考にした結果、MySite Web Service様のCcenterモジュールが良いかな？
なんて思っているのですが、モジュール自体にはSSLや画像認証の機能がない。
SSLは以前に挙げたエントリの方法で対処するにしても、画像認証は
もう自分で組み込むしかないかな…という事で、Happy Linux様の
captcha_x for XOOPS をCcenterに組み込んでみました。
 
構築している環境によっていくつかパターンがあるので、
こちらで検証できた範囲で纏めてみます。
 

 
【注意事項】
PHPやJQueryをあまり良く解っていない自分が、ウンウン唸りながら
書いたものなので、コードに改良や修正の余地あれば、ご指摘ください。
また、本改造を行う場合は自己責任で行ってください。
 
 
【材料】
・captcha_x for XOOPS 0.14
・Ccenter 0.96
・jquery.js　（XCL2.1系の場合）
 
 
【下ごしらえ】
captcha_x及びCcenterを予めインストールして
動くようにしておいてください。
 
 
【作り方】
 
・XCL2.2系（Pack2011にて検証）
 
１．captcha表示
 
修正ファイル：modules/ccenter/templates/ccenter_form.html
39～40行目辺りの
 

</table>
<p style="text-align: center;"><input type="submit" value="<{$smarty.const._MD_SUBMIT_CONF}>" <$form.submit_opts}> /></p>

 
…の間に下記コードを挿入（ハイライト部分）

</table>
<p style="text-align: center;">
  <{php}>
    include_once XOOPS_ROOT_PATH.'/modules/captcha/include/api.php';
    $captcha_api =& captcha_api::getInstance();
    $img_input = $captcha_api->make_img_input();
    echo $img_input;
  <{/php}>
</p>
<p style="text-align: center;"><input type="submit" value="<{$smarty.const._MD_SUBMIT_CONF}>" <$form.submit_opts}> /></p>

 
 
２．captchaチェック
 
以下のファイルを新規作成
作成ファイル：modules/ccenter/captcha_chk.php
 

<?php
  include "../../mainfile.php";
  include_once XOOPS_ROOT_PATH.'/modules/captcha/include/api.php';

  $captcha_api =& captcha_api::getInstance();
  $capapival = htmlspecialchars($_POST['captcha']);
  if ($capapival == ""){
    echo "認証コードが未入力です。";
  } else {
   if ( !$captcha_api->validate_post() ){
      echo "認証コードが誤っています。";
    }
  }
?>

 
以下のファイルを修正
修正ファイル：modules/ccenter/templates/ccenter_form_widgets.html
87～108行目辺りのコード
 

function xoopsFormValidate_ccenter() {
    var myform = window.document.ccenter;
    var msg = "";
    var obj = null;

<{foreach key=name item=val from=$item.checks}>
    msg = msg+checkItem(myform["<{$name}>"], "<{$val.message|escape}>", "<{$val.pattern}>");
    if(msg && obj==null)obj=myform['<{$name}>'];
<{/foreach}>

<{foreach key=name item=label from=$item.confirm}>
    if ( myform.<{$name}>.value != myform.<{$name}>_conf.value ) {
        msg = msg+"<{$label}>: <{$smarty.const._MD_CONFIRM_ERR}>\n";
        if(obj==null)obj=myform.<{$name}>_conf;
    }
<{/foreach}>

    if (msg == "") return true;
    window.alert(msg);
    if (typeof(obj.length)!="number") obj.focus();
    return false;
}

 
…を、下記のように書き換え（ハイライト部分）
 

function xoopsFormValidate_ccenter() {
    var myform = window.document.ccenter;
    var msg = "";
    var obj = null;

<{foreach key=name item=val from=$item.checks}>
    msg = msg+checkItem(myform["<{$name}>"], "<{$val.message|escape}>", "<{$val.pattern}>");
    if(msg && obj==null)obj=myform['<{$name}>'];
<{/foreach}>

<{foreach key=name item=label from=$item.confirm}>
    if ( myform.<{$name}>.value != myform.<{$name}>_conf.value ) {
        msg = msg+"<{$label}>: <{$smarty.const._MD_CONFIRM_ERR}>\n";
        if(obj==null)obj=myform.<{$name}>_conf;
    }
<{/foreach}>

    if (msg == ""){
      var chkstat = "true";
    } else {
      var chkstat = "false";
    }
    var capobj;
    var chkcap = function captchaCheck(val){
                   $.ajax({
                     async:false,
                     type: 'POST',
                     url: 'captcha_chk.php',
                     data: {"captcha":val},
                     contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                     success: function(data) {
                       if (data != ""){
                         chkstat = "false";
                         capobj = "captcha";
                         msg = msg + data + "\n";
                       }
                       if (msg != ""){
                         window.alert(msg);
                       }
                     }
                   });
                 }

    chkcap(myform.captcha.value);

    if (capobj == "captcha"){
      if(msg && obj==null)obj=myform.captcha;
    }

    if (chkstat == "true") return true;
    if (typeof(obj.length)!="number") obj.focus();
    return false;
}

 
 
・XCL2.1系で文字コードをEUC-JPで構築している場合（XCL2.1.7で検証）
 
１．captcha表示
　XCL2.2系と同じなので割愛。
 
２．captchaチェック
 
以下のファイルを新規作成
作成ファイル：modules/ccenter/captcha_chk.php
 

<?php
  include "../../mainfile.php";
  include_once XOOPS_ROOT_PATH.'/modules/captcha/include/api.php';

  $captcha_api =& captcha_api::getInstance();
  $capapival = htmlspecialchars($_POST['captcha']);
  if ($capapival == ""){
    echo mb_convert_encoding("認証コードが未入力です。", "UTF-8", "EUC-JP");
  } else {
   if ( !$captcha_api->validate_post() ){
      echo mb_convert_encoding("認証コードが誤っています。", "UTF-8", "EUC-JP");
    }
  }
?>

 
以下のファイルを修正
修正ファイル：modules/ccenter/templates/ccenter_form_widgets.html
87～108行目辺りのコード
 

function xoopsFormValidate_ccenter() {
    var myform = window.document.ccenter;
    var msg = "";
    var obj = null;

<{foreach key=name item=val from=$item.checks}>
    msg = msg+checkItem(myform["<{$name}>"], "<{$val.message|escape}>", "<{$val.pattern}>");
    if(msg && obj==null)obj=myform['<{$name}>'];
<{/foreach}>

<{foreach key=name item=label from=$item.confirm}>
    if ( myform.<{$name}>.value != myform.<{$name}>_conf.value ) {
        msg = msg+"<{$label}>: <{$smarty.const._MD_CONFIRM_ERR}>\n";
        if(obj==null)obj=myform.<{$name}>_conf;
    }
<{/foreach}>

    if (msg == "") return true;
    window.alert(msg);
    if (typeof(obj.length)!="number") obj.focus();
    return false;
}

 
…を、下記のように書き換え（ハイライト部分）
※$.ajaxをjQuery.ajaxと記述している以外はXCL2.2系の場合と同じ。
 

function xoopsFormValidate_ccenter() {
    var myform = window.document.ccenter;
    var msg = "";
    var obj = null;

<{foreach key=name item=val from=$item.checks}>
    msg = msg+checkItem(myform["<{$name}>"], "<{$val.message|escape}>", "<{$val.pattern}>");
    if(msg && obj==null)obj=myform['<{$name}>'];
<{/foreach}>

<{foreach key=name item=label from=$item.confirm}>
    if ( myform.<{$name}>.value != myform.<{$name}>_conf.value ) {
        msg = msg+"<{$label}>: <{$smarty.const._MD_CONFIRM_ERR}>\n";
        if(obj==null)obj=myform.<{$name}>_conf;
    }
<{/foreach}>

    if (msg == ""){
      var chkstat = "true";
    } else {
      var chkstat = "false";
    }
    var capobj;
    var chkcap = function captchaCheck(val){
                   jQuery.ajax({
                     async:false,
                     type: 'POST',
                     url: 'captcha_chk.php',
                     data: {"captcha":val},
                     contentType:"application/x-www-form-urlencoded;charset=UTF-8",
                     success: function(data) {
                       if (data != ""){
                         chkstat = "false";
                         capobj = "captcha";
                         msg = msg + data + "\n";
                       }
                       if (msg != ""){
                         window.alert(msg);
                       }
                     }
                   });
                 }

    chkcap(myform.captcha.value);

    if (capobj == "captcha"){
      if(msg && obj==null)obj=myform.captcha;
    }

    if (chkstat == "true") return true;
    if (typeof(obj.length)!="number") obj.focus();
    return false;
}

 
 
３．テーマファイル
　使用するテーマのheadタグ内でJQueryを読み込んでください。
 
（例）テーマディレクトリ下に「js」というディレクトリを作って
　　「jquery.js」を置いた場合。
 
　JQuery設置場所：/themes/[使用するテンプレートのディレクトリ]/js/jquery.js
　修正ファイル：/themes/[使用するテンプレートのディレクトリ]/theme.html
 

<script type="text/javascript" src="<{$xoops_imageurl}>js/jquery.js"></script>

 
 
・XCL2.1系で文字コードをUTF-8で構築している場合（HD1.0.4で検証）
このパターンは、XCL2.2系とXCL2.1系・EUC-JPを混ぜた感じになります。
 
１．captcha表示
　XCL2.2系と同じなので割愛。
 
 
２．captchaチェック
 
新規作成する「modules/ccenter/captcha_chk.php」は
XCL2.2系の場合と同じものを作ってください。
 
「modules/ccenter/templates/ccenter_form_widgets.html」
は、XCL2.1系・EUC-JPの場合と同じ修正を行ってください。
 
 
３．テーマファイル
　XCL2.1系・EUC-JP同様、使用するテーマのheadタグ内で
　JQueryを読み込んでください。
 
 
【謝辞】
各モジュールの作者様に、お礼申し上げます。
 
 
【追記】
下記FORUMで、本エントリのcaptchaを組み込んで脆弱性パッチがあたった
Ccenter0.97が入手できます。
》XUGJ – XCL2.2 スターターパックを作ってみました。