web前端入门到实战：实现图形验证码

最新推荐文章于 2024-08-19 09:29:46 发布

魔方编程

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量4.4k

点赞数 5

文章标签：网页制作网站开发前端 web前端前端开发

本文链接：https://blog.csdn.net/wewfdf/article/details/101080493

版权

本文介绍了前端实现图形验证码的步骤，从理解验证码的作用到在登录表单中添加验证码输入框，再到利用canvas进行绘图，生成包含随机元素的验证码，最后讲解如何在前端判断和使用验证码，帮助初学者入门web前端开发。

摘要由CSDN通过智能技术生成

什么是图形验证码

图形验证码是验证码的一种。验证码（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>
    &l