文章30
标签15
分类6

一种可以交互的画画验证码

最近实在是不知道写什么东西,然后看到 《 Typecho 无插件实现评论算术验证 》 这篇文章介绍的一种算术验证码,我也来介绍一个可以交互的画画验证码。 f10.png


验证码启动中...
验证码效果

首先去 VAPTCHA 官网注册一个账号,然后创建一个验证单元,具体的信息可以参考下面这个图,其中,标签可以乱填,域名填自己的域名就好,偏好这里自己选择一个合理的值。


创建完验证单元后,会得到一个 VID 密钥,再在主题的 after-footer.php (footer.php) 文件中引入以下 SDK 并初始化

<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 属性使其变成禁用状态,再在想要加入验证码的地方加上以下代码:

<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 里加入这些,就可以用啦

#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 使用文档 还提供了几个监听验证事件,可以在 这里 看到详细的用法

最后 VAPTCHA 兼容 IE8+(IE8 及以上)、Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android 上的内嵌 Webview,至于 IE7- 的浏览器....现在应该没有人用的吧 f3.png

写完才知道一篇页面不能有两个验证码,由于上面有一个示例验证码,导致评论的验证码加载不出来,所以请评论的时候滑动上面的示例验证码来完成人机验证 f18.png



版权属于:Vinking
本文链接:https://vinking.top/78.html
此文章采用 CC BY-NC-SA 4.0 进行许可。



已经有 0 个评论啦

评论已关闭