9月10日付追記

親愛なるユーザーへ、2021年8月15日にVAPTCHAのアップデートを実施いたします。アップデート完了後、標準版はデフォルトで専用認証ページへ遷移し、ごく一部のモバイルブラウザでwindows.openによる新規ウィンドウが開けない場合は、現在のページから直接認証ページを開き、認証完了後に元のシーンへ戻ります。この際、変数で保持していたフォームデータが失われる可能性がありますので、cookieでの保存に切り替えることを推奨します（JS変数を使用していない場合はこのメッセージを無視してください）。エンタープライズ版は従来の認証方式を維持し、修正の必要はありません。

現在の無料版VAPTCHAは、認証開始時に新しい認証ウィンドウを開き、以前のように現在ページ内で認証する方式ではなくなりました。ご自身でご判断ください。

最近はネタ切れ気味で、《Typecho 无插件实现评论算术验证》という記事で紹介されていた算数認証を見て、インタラクティブなお絵かき認証を紹介してみます。

まず VAPTCHA 公式サイトでアカウントを登録し、認証ユニットを作成します。詳細は下図を参考にしてください。タグは適当でOKで、ドメインは自身のドメインを入力し、プリファレンスは適切な値を選んでください。

認証ユニット作成後、VIDキーが発行されます。テーマの after-footer.php（footer.php）に以下SDKを読み込み、初期化します。

HTML

<script src="https://v.vaptcha.com/v3.js"></script>
<script>
vaptcha({
    //配置参数
    vid: '******', // ここに先ほど取得したVIDを入力
    type: 'click',
    container: '#vaptchaContainer',
    }).then(function (vaptchaObj) {
        vaptchaObj.listen("pass", function () {
            // 認証成功、送信ボタンのdisabled属性を削除
              document.getElementById(""/*ここにコメント送信ボタンのId*/).removeAttribute("disabled");
        });
        vaptchaObj.render()
    })
</script>

次にテーマの comments.php でコメント送信ボタンに disabled 属性を付けて無効化し、認証を表示したい場所に以下コードを追加します。

HTML

<div id="vaptchaContainer" title="コメントするには先に認証が必要です >_< ">
  <div class="vaptcha-init-main">
    <div class="vaptcha-init-loading">
      <img src="https://r.vaptcha.net/public/img/vaptcha-loading.gif"/>
      <span class="vaptcha-text">認証を起動中...</span>
    </div>
  </div>
</div>

最後にCSSに以下を追加すれば完成です。

CodeBlock Loading...

VAPTCHAのドキュメントでは、認証イベントを監視する方法がいくつか紹介されています。詳細はこちらをご覧ください。

Note
VAPTCHAはIE8+（IE8以降）、Chrome、Firefox、Safari、Opera、主要モバイルブラウザ、iOS・Androidの組み込みWebviewに対応しています。IE7以下……もう使ってる人はいないでしょう。

書き終えてから気づいたのですが、1ページに2つの認証は配置できません。上にサンプル認証があるため、コメント欄の認証が読み込めません。コメントする際は、上のサンプル認証をスライドして人間認証を完了させてください

当サイトの認証は自作のものに変更しました。