An Interactive Drawing CAPTCHA

·(edited)··

112

reads

This article was last modified on . Some content may be outdated. Feel free to ask the author if you have questions.

AI Translation中文English

Summary:

This article introduces how to use VAPTCHA CAPTCHA in a Typecho blog and how to introduce and initialize the SDK in the theme's `after-footer.php` (`footer.php`) file. The article also provides some CSS styles and event listener codes. Finally, it notes that VAPTCHA is compatible with most browsers but does not support versions below IE7.

Note added on September 10th

Dear users, we will upgrade VAPTCHA on August 15, 2021. After the upgrade, the standard version will default to the dedicated verification page for verification. When a small number of mobile browsers do not support the windows.open method to open a new window, the verification page will be opened directly from the current page. After the verification is completed, it will return to the verification scenario page, which may cause the form data stored in variables on the scenario page to be lost. It is recommended to use cookies to store variables. If you are not using JS variables, you can ignore this message. The enterprise version maintains the original verification method and no modifications are required.

The free version of VAPTCHA now opens a new verification window instead of verifying on the current page as before. Please make your own decision.

Recently, I really didn't know what to write about, and then I saw this article Typecho Arithmetic Verification Without Plugins introducing an arithmetic verification method. I will also introduce an interactive drawing CAPTCHA.

First, register an account on the VAPTCHA official website, and then create a verification unit. For specific information, you can refer to the following figure. The label can be filled in randomly, and the domain name should be your own. Choose a reasonable value for the preference.

Reference Information for Verification Unit

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

Next, in the theme's comments.php, add the disabled attribute to the comment submission button to disable it. Then, add the following code where you want to add the CAPTCHA:

Finally, add the following styles to your CSS, and you are good to go.

The VAPTCHA documentation also provides several event listeners for verification, which can be seen here.

[!NOTE] VAPTCHA is compatible with IE8+ (IE8 and above), Chrome, Firefox, Safari, Opera, mainstream mobile browsers, and embedded Webviews on iOS and Android. As for browsers below IE7... probably no one is using them now.

~~ I realized after writing that a page cannot have two CAPTCHAs. Since there is an example CAPTCHA above, the comment CAPTCHA fails to load. So, please slide the example CAPTCHA above to complete the human verification when commenting. ~~

The CAPTCHA on this site has been replaced with a custom one.