Note added on September 10

The free version of VAPTCHA now pops up a separate verification window instead of verifying you on the current page like it used to. Whether that's a good thing is up to you.

Lately I've had no idea what to write, until I came across an arithmetic CAPTCHA described in "Implementing an Arithmetic CAPTCHA for Typecho Comments Without a Plugin". So I figured I'd write about my own interactive drawing CAPTCHA.

First, go to the VAPTCHA official site, register an account, and create a verification unit. You can follow the image below for reference. The name can be whatever you like, the domain should be your own, and just set the other options to whatever makes sense.

Once you've created the verification unit, you'll get a VID key. Then drop the following SDK into your theme's after-footer.php (footer.php) file and initialize it:

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

Next, in your theme's comments.php, add the disabled attribute to the comment submit button to disable it, then add the following code wherever you want the CAPTCHA to appear:

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

Finally, add this to your CSS and you're good to go:

#vaptchaContainer{
  width: 200px;
  height: 36px;
}
.vaptcha-init-main {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}
.vaptcha-init-loading {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.vaptcha-init-loading > a {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: none;
}
.vaptcha-init-loading > a img {
  vertical-align: middle;
}
.vaptcha-init-loading .vaptcha-text {
  font-family: sans-serif;
  font-size: 12px;
  color: #cccccc;
  vertical-align: middle;
}

VAPTCHA's documentation also covers several callbacks for the verification process (like pass and fail). You can find the details here.

Only after writing all this did I realize a page can't have two CAPTCHAs. Since there's a demo CAPTCHA above, the comment CAPTCHA won't load. So when you comment, just slide the demo CAPTCHA above to prove you're human.

The CAPTCHA on this site has been replaced with one I wrote myself.