Note added on September 10

The current free version of VAPTCHA opens a new verification window instead of verifying on the current page as before. Please decide for yourself.

I really didn’t know what to write recently, and then I saw the article "Typecho Comment Arithmetic Verification Without Plugins" introducing an arithmetic CAPTCHA, so I’ll also introduce an interactive drawing CAPTCHA.

First, register an account on the VAPTCHA official website, then create a verification unit. You can refer to the image below for details; the label can be filled in randomly, the domain should be your own, and choose a reasonable value for the preference.

After creating the verification unit, you will get a VID key. Then, in your theme’s after-footer.php (footer.php) file, introduce the following SDK and initialize it:

<script src="https://v.vaptcha.com/v3.js"></script>
<script>
vaptcha({
    // configuration parameters
    vid: '******', // fill in the VID you just got
    type: 'click',
    container: '#vaptchaContainer',
    }).then(function (vaptchaObj) {
        vaptchaObj.listen("pass", function () {
            // verification passed, remove the disabled attribute from the send button
              document.getElementById(""/* fill in the comment send button Id here */).removeAttribute("disabled");
        });
        vaptchaObj.render()
    })
</script>

Next, in your theme’s comments.php, add the disabled attribute to the comment send button to disable it, and add the following code where you want the CAPTCHA to appear:

<div id="vaptchaContainer" title="You must verify before commenting >_< ">
  <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">CAPTCHA starting...</span>
    </div>
  </div>
</div>

Finally, add these styles in your CSS and you’re good to go:

The VAPTCHA documentation also provides several verification event listeners; you can see detailed usage here.

Note

Finally, VAPTCHA supports IE8+ (IE8 and above), Chrome, Firefox, Safari, Opera, mainstream mobile browsers, and embedded Webview on iOS and Android. As for browsers below IE7... I don’t think anyone uses them now.

Only after finishing did I realize that a page cannot have two CAPTCHAs; because there is a demo CAPTCHA above, the comment CAPTCHA fails to load, so please slide the demo CAPTCHA above to complete the human verification when commenting.

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