登录前的人机验证VAPTCHA

晓未苏

已于 2024-02-21 15:34:49 修改

阅读量2.8k

点赞数 1

分类专栏： java 文章标签： java javascript

于 2020-12-13 10:28:05 首次发布

本文链接：https://blog.csdn.net/fffvdgjvbsfkb123456/article/details/110946500

版权

本文介绍了登录前使用VAPTCHA进行人机验证的步骤，包括前端和后端的验证流程。前端需要引入v.vaptcha.com/v3.js，初始化VAPTCHA，用户验证后将token发送到后端。后端则负责验证token的有效性，并通过IP地址和人机验证接口确保安全性。建议在产品环境中参照官方手册配置离线模式并考虑升级到高级版。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体查看官方文档：https://www.vaptcha.com/document/install.html
验证流程
1、创建验证单元，获取VID和Key ，需要去官方系统创建VID和Key
2、将https://v.vaptcha.com/v3.js引入到你的页面。
3、将 VAPTCHA 初始化到你需要的位置
4、用户验证通过得到token，与表单数据一同提交到服务端。
5、服务端得到token后，向 VAPTCHA 服务器验证token的有效性，验证通过说明此次请求有效.

前端验证

1、引入前端 sdk:

<script src="https://v.vaptcha.com/v3.js"></script>

2、引入验证框样式

<style>
  .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({
   
	  vid: "*****", // 验证单元id
	  type: "invisible", // 显示类型 隐藏式
	  scene: 0, // 场景值
	  offline_server: "localhost" //离线模式服务端地址，若尚未配置离线模式，请填写任意地址即可。
	}).then(function (vaptchaObj) {
   
	  vaptchaVerifyObj = vaptchaObj; //将VAPTCHA验证实例保存到局部变量中
	  vaptchaObj.listen("pass", function () {
   
		  let token = vaptchaObj.getToken();
		  let username= $('#username').val().trim();
		  let password = $('#pwd').val().trim();
	      login(userame,password,token);
	  });
});

fu

最低0.47元/天解锁文章