如何实现图形验证码?入门基础知识_验证码菜鸟知识

细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?什么是图形验证码图形验证码是验证码的一种。验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Comput

如何实现图形验证码?入门基础知识

那么图形验证码是为了解决什么问题而出现的呢?

如何实现图形验证码?入门基础知识_验证码菜鸟知识

什么是图形验证码

图形验证码是验证码的一种。验证码(CAPTCHA)是“Completely Automated Public Turing test to tell Computers and Humans Apart”(全自动区分计算机和人类的图灵测试)的缩写,是一种区分用户是计算机还是人的公共全自动程序。可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上用验证码是现在很多网站通行的方式。

既然图形验证码是为了区分机器和人之间的操作,那么我们就可以在图形上绘制一个只有人可以解答的问题。比较常见的是在图片上生成文字验证码,然后用户输入图片上的文字吻合则验证通过。

虽然这种验证方法已经渐渐的被其他更先进的方法所淘汰了(图片上的文字依然可以被程序识别读取),并且前端生成验证码的方式相较于后端安全性不高,但我们的目的只是为了装x,提升程序的安全性只是附带的效果。

登录表单

首先我们需要在在登录表单上额外添加用于输入验证码的FormItem,并且给图形验证码提供一个canvas容器。有时候生成的验证码看不明白,因此需要给验证码添加点击事件用以切换验证码:

<Form ref="loginForm" :model="form" :rules="rules">
    <FormItem prop="userName">
        <Input v-model="form.userName" placeholder="请输入用户名">
            <span slot="prepend">
                <Icon :size="16" type="person"></Icon>
            </span>
        </Input>
    </FormItem>
    <FormItem prop="password">
        <Input type="password" v-model="form.password" placeholder="请输入密码">
            <span slot="prepend">
                <Icon :size="14" type="locked"></Icon>
            </span>
        </Input>
    </FormItem>
    <FormItem prop="valiCode" v-show="this.count">
        <Input v-model="form.valiCode" placeholder="请输入验证码">
            <span slot="prepend">
                <Icon :size="14" type="ios-analytics"></Icon>
            </span>
        </Input>
        <div class="canvas" @click="getImgYanzheng">
            <canvas id="canvas"></canvas>
        </div>
    </FormItem>
    <FormItem>
        <Button @click="handleSubmit" type="primary" long>登录</Button>
    </FormItem>
</Form>

需要用到的属性

表单需要额外添加valiCode用以记录用户输入的验证码。此处我们定义当用户登录失败一次则需要额外输入图形验证码,因此添加count属性,当登陆失败时count++,当然这样的处理方式并不是很严谨,并且用户刷新页面count则会清零。可以在此处可以增加更多限制,如异地登录等,由于本案例完全没有涉及到后端程序,因此只是简单的以count为判断依据。

data() {
    return {
      form: {
        userName: "",// 用户名
        password: "",// 密码
        valiCode: ""// 验证码
      },
      count: 0, // 登录次数
      show_num: [],// 图形上的文字
    }
}

生产图形验证码

页面上为canvas容器绑定的方法getImgYanzheng就是在绘制图形验证码

。在绘制图形验证码时需要为你的验证码定义一个内容集合,此处使用的是:A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,医,生。字母中剔除了容易误识别的几个字母并且可以随意加入文字(因此图形验证码也可在做成随机生成四个文字让用户点击,或者生成成语让用户填空等等各种形式)。并且忽略用户大小写,因此需要用到toLowerCase方法。

接下来就是canvas绘图的一些技巧了。

canvas绘图

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

在JavaScript 中使用 id 来寻找 canvas 元素,然后创建context对象,getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们可以把canvas 想象成景色而context则是景色呈现的画布。

由于绘制验证码的过程中是从左往右绘制的,因此需要规划好画布的使用范围,另外在验证码绘制时还要加上一些随机的元素使验证码不容易被程序识别。

getImgYanzheng() {
      var show_num = [];
      var canvas_width = 150; //document.getElementById("canvas").style.width;
      var canvas_height = 30; //document.getElementById("canvas").style.height;
      var canvas = document.getElementById("canvas"); //获取到canvas的对象,景色
      var context = canvas.getContext("2d"); //获取到canvas画图的环境,景色呈现的画布
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode =
        "A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,医,生";
      var aCode = sCode.split(",");
      var aLength = aCode.length; //获取到数组的长度

      for (var i = 0; i <= 3; i++) {
        var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
        var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度
        var txt = aCode[j]; //得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20; //文字在canvas上的x坐标
        var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";

        context.translate(x, y);
        context.rotate(deg);

        context.fillStyle = this.randomColor();
        context.fillText(txt, 0, 0);

        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor();
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
      this.show_num = show_num;
    },

验证码及线条需要一些随机的颜色:

randomColor() {
      //得到随机的颜色值
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }

有了以上两个方法,图形验证码就已经生成完毕了,接下来就是使用的问题了。

使用图形验证码

判断登录次数count,如果登录次数大于0则需要输入验证码:

const self = this;
if (this.count) {
        if (this.form.valiCode) {
            if (this.show_num.join("") != this.form.valiCode.toLowerCase()) {
                self.$Notice.warning({
                    title: "验证码错误"
                });
                return;
            }
        } else {
            self.$Notice.warning({
                title: "请输入验证码"
            });
            return;
        }
    }

当登录失败时需要执行count++并且刷新验证码:

self.count++;
self.getImgYanzheng();
self.$Notice.warning({
title: "登陆失败",
desc: rs.data.msg
});

此时就完成了一个图形验证码的添加工作,同学们快装起来吧。

如何实现图形验证码?入门基础知识_验证码菜鸟知识

海计划公众号
(0)
上一篇 2020/03/24 05:39
下一篇 2020/03/24 05:39

您可能感兴趣的内容

  • 前端和后端的区别使用指南为什么很多人选择前端?_前端小白入门

    什么是前端什么是后端,前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不同的,下面简单说一下:前端Web应用按照客户-服务体系结构分类为分布式应用。所以我们的代码有一部分运行于客户端,还有一部分运行于服务端。运行于客户端部分的应用(大多数情况下,客户端是指我们的Web浏览器)被成为前端。最常见的用于前端开发的技术组合是HTML+CSS+JavaS

    2020/04/03
  • limejs基础知识教程_开发现代触控设备与桌面浏览器上本地化体验游戏的HTML5框架

    limejs基础知识教程 官方网址:http://www.limejs.com GitHub:https://github.com/digitalfruit/limejs 简介描述…

    2020/03/06
  • css3中样式计算属性calc()的使用和总结入门基础_css3菜鸟知识

    calc的介绍在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px,calc是支持单位的混合使用的,其计算优先级别和数学一致。calc的用法 .elm{wi

    2020/04/06
  • package.json是什么?菜鸟指南对package.json的理解和学习_学习菜鸟指南

    package.json是什么?npm安装package.json时 直接转到当前项目目录下用命令npm install 或npm install –save-dev安装即可,自动将package.json中的模块安装到node-modules文件夹下。package.json就是管理你本地安装的npm包,用于定义了这个项目所需要的各种模块,以及项目的配

    2020/04/03
  • 如何使你的开源项目成功?基础知识_开源菜鸟教程下载

    你已经为一个有趣的问题工作了几个月,现在决定启动一个开源项目。你在 README.md 中编写了一些说明,并发布了1.0版。几周后,人们对这个项目仍然没有什么兴趣。你做了大量的工作,付出了最大的努力,但是最后,仍然没有谁对它感兴趣。怎么会这样?更重要的是,怎样才能使你的开源项目成功?我创建了一个开源库 vocajs.com,经过努力,这个库成为了 GitHu

    2020/03/23
  • jquery图片懒加载菜鸟教程网_加载使用帮助

    对于一个有多个图片的网站来说,访问的时候不应该直接加载所有图片,而是应该只将浏览器窗口内的图片进行加载。当滚动的时候,在加载更多的图片,叫做图片的懒加载。我们可以通过给img自定义一个新属性,来存储图片真实的src地址,当需要加载的时候,再将这个真实的地址赋给src,进行图片加载。整体思路:1、设置个data-src(自定义一个属性)来存放真实地址2、当滚动

    2020/03/23
  • 用javascript怎么求最小值?指南攻略_运算基础入门

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript中可以使用min()方法求最小值。示例:

    菜鸟教程(run</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/22</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/4701.html" title="unexpected.js入门知识一种与should类似但不同的断言语法" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="unexpected.js入门知识一种与should类似但不同的断言语法" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/302-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/4701.html" target="_blank" rel="bookmark"> unexpected.js入门知识一种与should类似但不同的断言语法 </a></h4><div class="item-excerpt"><p>unexpected.js基础入门 官方网址:http://unexpected.js.org/ GitHub:https://github.com/unexpectedjs/un…</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/05</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/20802.html" title="js中实现函数重载小白知识_重载菜鸟指南" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="js中实现函数重载小白知识_重载菜鸟指南" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/027-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/20802.html" target="_blank" rel="bookmark"> js中实现函数重载小白知识_重载菜鸟指南 </a></h4><div class="item-excerpt"><p>引言最近在js的学习中,看到了函数重载的问题,一开始,只看到了实现代码,看着代码冥思苦想了半个小时,总算是理清了其实现的原理,也为其实现的巧妙感到赞叹,也是在自己搞懂原理之后,去网络上搜索了下,才知道,这个实现方法是jQuery作者John Resig在《JavaScript忍者秘籍》中对函数重载的实现,设计十分的巧妙,写下此文,给大家做一个分享什么是函数的</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/24</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/17052.html" title="Promise 使用、原理以及实现过程教程视频_Promise小白帮助" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="Promise 使用、原理以及实现过程教程视频_Promise小白帮助" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/03/5dea53f75c857-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/17052.html" target="_blank" rel="bookmark"> Promise 使用、原理以及实现过程教程视频_Promise小白帮助 </a></h4><div class="item-excerpt"><p>1.什么是 Promisepromise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案。2.Promise 原理简析(1)promise 本身相当于一个状态机,拥有三种状态pendingfulfilledrejected一个 promise 对象初始化时的状态是 pending,调用了 resolve 后会将 promise 的状</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/22</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/4889.html" title="bootstrap-markdown小白常识一款基于Bootstrap的所见即所得的Markdown编辑器" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="bootstrap-markdown小白常识一款基于Bootstrap的所见即所得的Markdown编辑器" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/308-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/4889.html" target="_blank" rel="bookmark"> bootstrap-markdown小白常识一款基于Bootstrap的所见即所得的Markdown编辑器 </a></h4><div class="item-excerpt"><p>bootstrap-markdown攻略教程 官方网址:http://toopay.github.io/bootstrap-markdown/ GitHub:https://git…</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/06</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/19393.html" title="js实现进度条代码小白指南_代码入门指南" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="js实现进度条代码小白指南_代码入门指南" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/03/5dcd5e3903d8a-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/19393.html" target="_blank" rel="bookmark"> js实现进度条代码小白指南_代码入门指南 </a></h4><div class="item-excerpt"><p>现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进行深入理解:首先我们要进行js进度条的布局js进度条布局如下:<br /> #progre</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/23</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/14282.html" title="NodeJS中配置请求代理服务器使用帮助_代理使用帮助" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="NodeJS中配置请求代理服务器使用帮助_代理使用帮助" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/03/5e6e340d8119c-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/14282.html" target="_blank" rel="bookmark"> NodeJS中配置请求代理服务器使用帮助_代理使用帮助 </a></h4><div class="item-excerpt"><p>NodeJS中配置请求代理服务器使用帮助 先来说说场景,之前我写过一个小爬虫,node写的,一直都是当做玩具来用的。某天不知道谁在刷我的接口,导致被拉黑了。大佬让我换个机器重新装一…</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/20</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/17413.html" title="javascript怎么判断字符是否是中文?零基础入门_字符菜鸟教程网" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="javascript怎么判断字符是否是中文?零基础入门_字符菜鸟教程网" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/303-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/17413.html" target="_blank" rel="bookmark"> javascript怎么判断字符是否是中文?零基础入门_字符菜鸟教程网 </a></h4><div class="item-excerpt"><p>有时我们需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到。那么如何判断?下面本篇文章就来给大家介绍一下判断方法,希望对大家有所帮助。方法一、用正则表达式判断:正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式,而String和RegExp</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/22</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/19522.html" title="JS数组或对象中的内容间隔显示基础知识教程_对象使用说明" target="_blank" rel="bookmark"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/wp-content/uploads/2020/01/226-480x300.jpg" width="480" height="300" alt="JS数组或对象中的内容间隔显示基础知识教程_对象使用说明"> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/19522.html" target="_blank" rel="bookmark"> JS数组或对象中的内容间隔显示基础知识教程_对象使用说明 </a></h4><div class="item-excerpt"><p>使用for循环的代码 var arr = [1, 2, 3, 4, 5];for (var i = 0; i < arr.length; i++) {(function(a) {setTimeout(function() {console.log(arr[a]);}, 5000);})(i);}会在5秒中之后几个数字几乎一起显示,并不是我们希望的间隔5</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/23</span><div class="item-meta-right"></div></div></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/9221.html" title="stylis.js入门基础知识_轻量级css预处理器" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="stylis.js入门基础知识_轻量级css预处理器" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/050-480x300.jpg" /> </a> <a class="item-category" href="https://wanghi.cn/baike/web" target="_blank">Web前端</a></div><div class="item-content"><h4 class="item-title"> <a href="https://wanghi.cn/202003/9221.html" target="_blank" rel="bookmark"> stylis.js入门基础知识_轻量级css预处理器 </a></h4><div class="item-excerpt"><p>stylis.js入门基础知识 官方网址:https://stylis.js.org GitHub:https://github.com/thysultan/stylis.js 简…</p></div><div class="item-meta"> <span class="item-meta-li date">2020/03/07</span><div class="item-meta-right"></div></div></div></li></ul></div></article></main><aside class="sidebar"><div class="widget widget_image_myimg"> <a href="https://wanghi.cn/go.php?http://www.5118.com?promote=83864A" target="_blank" rel="nofollow"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/5118/5118.png" alt="5118工具"> </a></div><div class="widget widget_image_myimg"> <a href="https://wanghi.cn/go.php?https://www.bt.cn/?invite_code=M19sbndpc3E=" target="_blank" rel="nofollow"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/bt/b.png" alt="宝塔优惠券"> </a></div><div class="widget widget_image_myimg"> <a href="https://www.aliyun.com/activity/new/index?userCode=u1pc8ney" target="_blank" rel="nofollow"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/right/aliyun.png" alt="阿里云广告"> </a></div><div class="widget widget_image_myimg"> <a href="https://wanghi.cn/go.php?https://url.cn/U4djljVv"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/right/txyun.png" alt="腾讯云广告"> </a></div><div class="widget widget_tag_cloud"><h3 class="widget-title"><span>关注焦点</span></h3><div class="tagcloud"><a href="https://wanghi.cn/http/course/dedecms" class="tag-cloud-link tag-link-64 tag-link-position-1" style="font-size: 9.0606060606061pt;" aria-label="DedeCMS (1个项目)">DedeCMS</a> <a href="https://wanghi.cn/baike/seobook" class="tag-cloud-link tag-link-1648 tag-link-position-2" style="font-size: 17.29797979798pt;" aria-label="SEO书籍 (423个项目)">SEO书籍</a> <a href="https://wanghi.cn/seo/seohelp" class="tag-cloud-link tag-link-198 tag-link-position-3" style="font-size: 13.373737373737pt;" aria-label="SEO优化百科 (32个项目)">SEO优化百科</a> <a href="https://wanghi.cn/tool" class="tag-cloud-link tag-link-332 tag-link-position-4" style="font-size: 9.0606060606061pt;" aria-label="SEO工具 (1个项目)">SEO工具</a> <a href="https://wanghi.cn/seo/baimao" class="tag-cloud-link tag-link-254 tag-link-position-5" style="font-size: 12.949494949495pt;" aria-label="SEO白帽技术 (24个项目)">SEO白帽技术</a> <a href="https://wanghi.cn/baike" class="tag-cloud-link tag-link-637 tag-link-position-6" style="font-size: 10.474747474747pt;" aria-label="SEO百科 (4个项目)">SEO百科</a> <a href="https://wanghi.cn/seo/heimao" class="tag-cloud-link tag-link-255 tag-link-position-7" style="font-size: 10.121212121212pt;" aria-label="SEO黑帽技术 (3个项目)">SEO黑帽技术</a> <a href="https://wanghi.cn/baike/web" class="tag-cloud-link tag-link-1659 tag-link-position-8" style="font-size: 22pt;" aria-label="Web前端 (9,147个项目)">Web前端</a> <a href="https://wanghi.cn/http/course/wordpress" class="tag-cloud-link tag-link-52 tag-link-position-9" style="font-size: 13.762626262626pt;" aria-label="WordPress (42个项目)">WordPress</a> <a href="https://wanghi.cn/http/tao/yunyouhui" class="tag-cloud-link tag-link-12 tag-link-position-10" style="font-size: 9.6969696969697pt;" aria-label="云优惠 (2个项目)">云优惠</a> <a href="https://wanghi.cn/baike/yuns/cloudx" class="tag-cloud-link tag-link-1402 tag-link-position-11" style="font-size: 14.257575757576pt;" aria-label="云帮手 (58个项目)">云帮手</a> <a href="https://wanghi.cn/baike/yuns" class="tag-cloud-link tag-link-1386 tag-link-position-12" style="font-size: 8pt;" aria-label="云操作 (0个项目)">云操作</a> <a href="https://wanghi.cn/baike/yun" class="tag-cloud-link tag-link-691 tag-link-position-13" style="font-size: 10.121212121212pt;" aria-label="云服务 (3个项目)">云服务</a> <a href="https://wanghi.cn/http/tao" class="tag-cloud-link tag-link-11 tag-link-position-14" style="font-size: 8pt;" aria-label="优惠券 (0个项目)">优惠券</a> <a href="https://wanghi.cn/http" class="tag-cloud-link tag-link-13 tag-link-position-15" style="font-size: 8pt;" aria-label="传统网媒 (0个项目)">传统网媒</a> <a href="https://wanghi.cn/seohtml/caiji" class="tag-cloud-link tag-link-1362 tag-link-position-16" style="font-size: 10.474747474747pt;" aria-label="内容采集 (4个项目)">内容采集</a> <a href="https://wanghi.cn/http/tao/vip" class="tag-cloud-link tag-link-4 tag-link-position-17" style="font-size: 9.0606060606061pt;" aria-label="发放优惠券 (1个项目)">发放优惠券</a> <a href="https://wanghi.cn/media" class="tag-cloud-link tag-link-245 tag-link-position-18" style="font-size: 8pt;" aria-label="媒体矩阵 (0个项目)">媒体矩阵</a> <a href="https://wanghi.cn/baike/yuns/baota" class="tag-cloud-link tag-link-22000 tag-link-position-19" style="font-size: 9.0606060606061pt;" aria-label="宝塔面板 (1个项目)">宝塔面板</a> <a href="https://wanghi.cn/http/jianzhan" class="tag-cloud-link tag-link-306 tag-link-position-20" style="font-size: 9.0606060606061pt;" aria-label="建站案例 (1个项目)">建站案例</a> <a href="https://wanghi.cn/media/weixinseo" class="tag-cloud-link tag-link-230 tag-link-position-21" style="font-size: 11.535353535354pt;" aria-label="微信生态圈优化 (9个项目)">微信生态圈优化</a> <a href="https://wanghi.cn/media/weibo" class="tag-cloud-link tag-link-264 tag-link-position-22" style="font-size: 10.757575757576pt;" aria-label="微博生态圈优化 (5个项目)">微博生态圈优化</a> <a href="https://wanghi.cn/seo/baiduseo" class="tag-cloud-link tag-link-187 tag-link-position-23" style="font-size: 10.121212121212pt;" aria-label="搜索引擎优化 (3个项目)">搜索引擎优化</a> <a href="https://wanghi.cn/seo/googlescore" class="tag-cloud-link tag-link-294 tag-link-position-24" style="font-size: 9.6969696969697pt;" aria-label="搜索引擎算法 (2个项目)">搜索引擎算法</a> <a href="https://wanghi.cn/media/xmtseo" class="tag-cloud-link tag-link-260 tag-link-position-25" style="font-size: 10.121212121212pt;" aria-label="新媒体矩阵优化 (3个项目)">新媒体矩阵优化</a> <a href="https://wanghi.cn/hijihua" class="tag-cloud-link tag-link-535 tag-link-position-26" style="font-size: 11.818181818182pt;" aria-label="海计划 (11个项目)">海计划</a> <a href="https://wanghi.cn/sem" class="tag-cloud-link tag-link-302 tag-link-position-27" style="font-size: 9.0606060606061pt;" aria-label="王海SEM (1个项目)">王海SEM</a> <a href="https://wanghi.cn/seo" class="tag-cloud-link tag-link-19 tag-link-position-28" style="font-size: 8pt;" aria-label="王海SEO (0个项目)">王海SEO</a> <a href="https://wanghi.cn/tashuo" class="tag-cloud-link tag-link-391 tag-link-position-29" style="font-size: 13.833333333333pt;" aria-label="王海说 (44个项目)">王海说</a> <a href="https://wanghi.cn/internet" class="tag-cloud-link tag-link-1 tag-link-position-30" style="font-size: 12.525252525253pt;" aria-label="站务 (18个项目)">站务</a> <a href="https://wanghi.cn/toutiao" class="tag-cloud-link tag-link-380 tag-link-position-31" style="font-size: 11.676767676768pt;" aria-label="站友头条 (10个项目)">站友头条</a> <a href="https://wanghi.cn/http/course" class="tag-cloud-link tag-link-51 tag-link-position-32" style="font-size: 9.0606060606061pt;" aria-label="站友攻略 (1个项目)">站友攻略</a> <a href="https://wanghi.cn/http/zyzy" class="tag-cloud-link tag-link-40 tag-link-position-33" style="font-size: 9.0606060606061pt;" aria-label="站友资源 (1个项目)">站友资源</a> <a href="https://wanghi.cn/http/course/peizhi" class="tag-cloud-link tag-link-127 tag-link-position-34" style="font-size: 11.535353535354pt;" aria-label="站点配置 (9个项目)">站点配置</a> <a href="https://wanghi.cn/baike/yun/zoneidc" class="tag-cloud-link tag-link-1612 tag-link-position-35" style="font-size: 9.0606060606061pt;" aria-label="纵横云 (1个项目)">纵横云</a> <a href="https://wanghi.cn/http/domain" class="tag-cloud-link tag-link-7 tag-link-position-36" style="font-size: 12.59595959596pt;" aria-label="网站站长 (19个项目)">网站站长</a> <a href="https://wanghi.cn/admin" class="tag-cloud-link tag-link-17 tag-link-position-37" style="font-size: 10.757575757576pt;" aria-label="草根站长 (5个项目)">草根站长</a> <a href="https://wanghi.cn/media/yingxiao" class="tag-cloud-link tag-link-33411 tag-link-position-38" style="font-size: 20.19696969697pt;" aria-label="营销推广 (2,807个项目)">营销推广</a> <a href="https://wanghi.cn/baike/yun/aliyun" class="tag-cloud-link tag-link-693 tag-link-position-39" style="font-size: 12.878787878788pt;" aria-label="阿里云 (23个项目)">阿里云</a> <a href="https://wanghi.cn/http/tao/quan" class="tag-cloud-link tag-link-21 tag-link-position-40" style="font-size: 10.121212121212pt;" aria-label="领券 (3个项目)">领券</a></div></div><div class="widget widget_image_myimg"> <a href="#"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/img/haijihua/mcn.jpg" alt="MCN二维码"> </a></div><div class="widget widget_post_thumb"><h3 class="widget-title"><span>热门推荐</span></h3><ul><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202004/28108.html" title="女生30 岁转行做前端开发,晚吗?入门百科_前端入门基础教程"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="女生30 岁转行做前端开发,晚吗?入门百科_前端入门基础教程" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/262-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202004/28108.html" title="女生30 岁转行做前端开发,晚吗?入门百科_前端入门基础教程">女生30 岁转行做前端开发,晚吗?入门百科_前端入门基础教程</a></p><p class="item-date">2020/04/03</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/25990.html" title="package.json中你还不清楚的browser,module,main 字段优先级指南教程_package基础入门"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="package.json中你还不清楚的browser,module,main 字段优先级指南教程_package基础入门" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/03/5cffb5222d1a8-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/25990.html" title="package.json中你还不清楚的browser,module,main 字段优先级指南教程_package基础入门">package.json中你还不清楚的browser,module,main 字段优先级指南教程_package基础入门</a></p><p class="item-date">2020/03/30</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/4500.html" title="SUI菜鸟指南简单易用、功能强大的UI库"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="SUI菜鸟指南简单易用、功能强大的UI库" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/270-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/4500.html" title="SUI菜鸟指南简单易用、功能强大的UI库">SUI菜鸟指南简单易用、功能强大的UI库</a></p><p class="item-date">2020/03/05</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/8327.html" title="语音搜索排名因素分析_移动SEO搜索优化"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="Google Home智能音箱" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/03/google-home-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/8327.html" title="语音搜索排名因素分析_移动SEO搜索优化">语音搜索排名因素分析_移动SEO搜索优化</a></p><p class="item-date">2020/03/07</p></div></li><li class="item"><div class="item-img"> <a class="item-img-inner" href="https://wanghi.cn/202003/8529.html" title="免费电子书《SEO中的关键词和竞争研究》_关键词分析"> <img width="480" height="300" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" class="attachment-default size-default wp-post-image j-lazy" alt="免费电子书《SEO中的关键词和竞争研究》_关键词分析" decoding="async" data-original="https://wanghi.cn/wp-content/uploads/2020/01/001-480x300.jpg" /> </a></div><div class="item-content"><p class="item-title"><a href="https://wanghi.cn/202003/8529.html" title="免费电子书《SEO中的关键词和竞争研究》_关键词分析">免费电子书《SEO中的关键词和竞争研究》_关键词分析</a></p><p class="item-date">2020/03/07</p></div></li></ul></div><div class="widget widget_image_myimg"> <a href="https://www.haiyunying.com/61.html" target="_blank"> <img class="j-lazy" src="https://wanghi.cn/wp-content/uploads/2023/04/h.jpg" data-original="https://wanghi.cn/wp-content/uploads/2022/06/2022060921253456.jpg" alt=""> </a></div></aside></div></div><footer class="footer width-footer-bar"><div class="container"><div class="footer-col-wrap footer-with-logo-icon"><div class="footer-col footer-col-logo"> <img src="https://wanghi.cn/img/fhi.png" alt="王海"></div><div class="footer-col footer-col-copy"><ul class="footer-nav hidden-xs"><li id="menu-item-1483" class="menu-item menu-item-1483"><a href="https://wanghi.cn/">©2022 成都私域运营专家-王海</a></li></ul><div class="copyright"><p><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" rel="noopener">蜀ICP备19004414号</a></p></div></div><div class="footer-col footer-col-sns"><div class="footer-sns"> <a href="https://wanghi.cn/go.php?https://tongji.baidu.com/main/overview/10000118002/overview/index?siteId=14797428" aria-label="icon"> <i class="wpcom-icon fa fa-mouse-pointer sns-icon"></i> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-user-plus sns-icon"></i> <span style="background-image:url('https://wanghi.cn/img/wx/wx.png');"></span> </a> <a class="sns-wx" href="javascript:;" aria-label="icon"> <i class="wpcom-icon fa fa-wechat sns-icon"></i> <span style="background-image:url('https://wanghi.cn/img/wxxcx.jpg');"></span> </a></div></div></div></div></footer><div class="action action-style-0 action-color-0 action-pos-0" style="bottom:20%;"><div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i></div></div><div class="footer-bar"><div class="fb-item"> <a href="https://wanghi.cn" target="_blank"> <i class="wpcom-icon fa fa-home fb-item-icon"></i> <span>首页</span> </a></div><div class="fb-item"> <a href="https://wanghi.cn/img/wxxcx.jpg" class="j-footer-bar-qrcode"> <i class="wpcom-icon fa fa-dot-circle-o fb-item-icon"></i> <span>搜索SEO</span> </a></div><div class="fb-item"> <a href="https://wanghi.cn/img/wx/wx.png" class="j-footer-bar-qrcode"> <i class="wpcom-icon fa fa-sellsy fb-item-icon"></i> <span>加好友</span> </a></div></div> <script type='text/javascript' id='main-js-extra'>var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/wanghi.cn\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/wanghi.cn\/wp-content\/themes\/justnews","slide_speed":"50000","is_admin":"0","js_lang":{"copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd","confirm":"\u786e\u5b9a","qrcode":"\u4e8c\u7ef4\u7801","page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","expand_more":"\u9605\u8bfb\u5269\u4f59 %s"},"lightbox":"1","post_id":"20404","user_card_height":"356","poster":{"notice":"\u8bf7\u957f\u6309\u4fdd\u5b58\u56fe\u7247\uff0c\u5c06\u5185\u5bb9\u5206\u4eab\u7ed9\u66f4\u591a\u597d\u53cb","generating":"\u6b63\u5728\u751f\u6210\u6d77\u62a5\u56fe\u7247...","failed":"\u6d77\u62a5\u56fe\u7247\u751f\u6210\u5931\u8d25"},"video_height":"482","fixed_sidebar":"1","dark_style":"0","font_url":"\/\/wanghi.cn\/wp-content\/uploads\/wpcom\/fonts.9b34824582affe8e.css","follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"};</script> <script type='text/javascript' id='wpcom-member-js-extra'>var _wpmx_js = {"ajaxurl":"https:\/\/wanghi.cn\/wp-admin\/admin-ajax.php","plugin_url":"https:\/\/wanghi.cn\/wp-content\/plugins\/wpcom-member\/","post_id":"20404","js_lang":{"login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c"},"login_url":"https:\/\/wanghi.cn\/i","register_url":"https:\/\/wanghi.cn\/register","TCaptcha":{"appid":"2035109633"},"captcha_label":"\u70b9\u51fb\u8fdb\u884c\u4eba\u673a\u9a8c\u8bc1","captcha_verified":"\u9a8c\u8bc1\u6210\u529f","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u8bdd\u53f7\u7801","terms":"\u8bf7\u9605\u8bfb\u5e76\u540c\u610f\u6761\u6b3e","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u4eba\u673a\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"}};</script> <script type='text/javascript' id='QAPress-js-js-extra'>var QAPress_js = {"ajaxurl":"https:\/\/wanghi.cn\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/wanghi.cn\/wp-content\/plugins\/qapress\/images\/loading.gif"};</script> <script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0f6d2bb7194b8728131ffadfe5c3e7c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();</script> <script type="application/ld+json">{ "@context": "https://schema.org", "@type": "Article", "@id": "https://wanghi.cn/202003/20404.html", "url": "https://wanghi.cn/202003/20404.html", "headline": "如何实现图形验证码?入门基础知识_验证码菜鸟知识", "image": "https://wanghi.cn/wp-content/uploads/2020/03/5d764d362896a.jpg", "description": "细心的同学可以发现,现在很多网站当登录多次之后就会出现一个图形验证码,或是当提交表单、或点击获取手机验证码等等场景都会有图形验证码的出现。那么图形验证码是为了解决什么问题而出现的呢?什么是图形验证码图形验证码是验证码的一种。验证码(CAPT...", "datePublished": "2020-03-24T05:39:07", "dateModified": "2020-03-24T05:37:02", "author": {"@type":"Person","name":"Web前端","url":"https://wanghi.cn/member/web","image":"//wanghi.cn/wp-content/uploads/member/avatars/abfcfa5649e7003b.1583781931.jpg"} }</script> <script defer src="https://wanghi.cn/wp-content/cache/autoptimize/js/autoptimize_9e85a7cedb1bdce2a07a2bd41d57568a.js"></script></body></html>