vue实现前端人机验证

Posted 老张在线敲代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现前端人机验证相关的知识,希望对你有一定的参考价值。

最简单的一个例子

安装插件
npm install vue-puzzle-vcode --save
<template>
  <div id="app">
    <Vcode :show="isShow" @success="onSuccess" @close="onClose" />
    <button @click="submit">开始验证</button>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default 
  name: 'App',
  components: Vcode,
  data()
    return 
      isShow: false
    
  ,
  methods: 
    submit() 
      this.isShow = true;
    ,

    onSuccess(msg) 
      console.log(msg)
      this.isShow = false; // 通过验证后,需要手动关闭模态框
    ,

    onClose() 
      this.isShow = false;
    ,
  ,

</script>

参数

事件

自定义图片

<template>
  <Vcode :imgs="[Img1, Img2]" />
</template>
 
<script>
import Img1 from "~/assets/img1.png";
import Img2 from "~/assets/img2.png";
 
export default 
  data() 
    return 
      Img1,
      Img2,
    ;
  ,
;
</script>

也可以是网络图片完整 URL 路径,但注意图片跨域问题,因为 canvas api 无法调用跨 域的图片

说明
当不传递 imgs 字段或图片加载出错时,会自动生成随机图片
模态框的显示和隐藏完全由父级控制,所以用户通过验证后,需要手动隐藏模态框

以上是关于vue实现前端人机验证的主要内容,如果未能解决你的问题,请参考以下文章

Web前端登录拼图人机验证功能

vue luosimao人机验证 data-callback回调 无法触发

前端验证码的实现,vue+webpack

前后端分离Springboot+Vue实现Kaptcha生成验证码Graphics 2D随机验证码(两种样式) | 通过Vue显示到前端页面

php文件如何接受vue前端axios传过来的参数实现登录验证?

asp.net core配合vue实现后端验证码逻辑