【验证码】实现前端安全验证字符验证码api

LuckyCola2023

已于 2023-06-27 10:55:36 修改

阅读量654

点赞数

分类专栏： api 文章标签：前端 javascript vue.js

于 2023-02-26 01:09:49 首次发布

本文链接：https://blog.csdn.net/qq_48896417/article/details/129222634

版权

api 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

文章介绍了前端字符验证码API的使用，这是一个免费的、可自定义配置的验证码服务，用于人机行为验证，如登录场景。用户可以通过GET请求获取验证码，POST请求验证验证码，同时提供了在线DEMO和代码示例来展示如何集成到项目中。

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

前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
http://luckycola.com.cn/

前言

一款免费的前端字符验证码API,该api是直接可用的,可自定义配置的.

验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，
是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。
这个问题可以由计算机生成并评判，但是必须只有人类才能解答。由于计算机无法解答CAPTCHA的问题，所以回答出问题的用户就可以被认为是人类

一、前端字符验证码API

是一个免费直接可用的随机字符验证码API,可以用于人机行为验证的一些场景(比如登录场景),且提供了一些参数配置如下

序号	参数	值	说明
1	CaptchaSize	number	字体大小(px)
2	CaptchaNoise	number	噪声线条数
3	CaptchaW	number	svg宽度(px)
4	CaptchaH	number	svg高度(px)
5	CaptchaNum	number	验证字符数量
6	ColaKey	string	必填参数,唯一的随机Colakey,官网获取

注意!!!: 如果您还没有Colakey,请先请前往官网获取
官网地址:http://luckycola.com.cn/

二、使用步骤

1.如何获取验证码

重要提示:建议使用https协议,当https协议无法使用时再尝试使用http协议
请求下面接口即可

请求方式: GET

http(s)://luckycola.com.cn/captcha/getCaptcha?CaptchaSize=44&CaptchaNoise=9&CaptchaW=100&CaptchaH=80$CaptchaNum=5

2.如何验证验证码

请求下面接口即可
请求方式: POST

参数:

序号	参数	值	说明
1	captcha	string	用户输入的验证码
2	ColaKey	string	必填参数,唯一的随机Colakey,官网获取

http(s)://luckycola.com.cn/captcha/validateCaptcha

请求响应值code=0为验证成功,否则验证失败

注意!!!: 如果您还没有Colakey,请先请前往官网获取
官网地址:http://luckycola.com.cn/

三、在线demo

在线demo:点击查看>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>captcha</title>
</head>
<body>
    <div id="app">
        <img  :src="captchaUrl" alt="captcha"
        @click="getCaptcha" ref="captcha">

        <input
            type="text"
            style="display: block;margin: 10px 0 10px 0;"
            placeholder="请输入验证码"
            v-model="message">
            
        <div v-if="errmsg" style="color: red; font-size: 12px; margin-bottom: 10px;">{{errmsg}}</div>
        <button @click="submitFn">提交验证</button>
    </div>


<script src="https://unpkg.com/vue/dist/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
   const { createApp } = Vue
    
    let app = createApp({
      data() {
        return {
          message: '',
          errmsg: '',
          captchaUrl: 'http://luckycola.com.cn/captcha/getCaptcha?CaptchaSize=44&CaptchaNoise=4&CaptchaW=100&CaptchaH=80&CaptchaNum=4&ColaKey=NaTu16773439832446NZkH6'
        //   captchaUrl: 'http://localhost/captcha/getCaptcha?CaptchaSize=44&CaptchaNoise=4&CaptchaW=100&CaptchaH=80&CaptchaNum=4&ColaKey=NaTu16773439832446NZkH6'
        }
      },
      methods: {
        // 获取一个新的图片验证码
        getCaptcha () {
            // 每次指定的src要不一样，img才会重新请求，可以使用Date.now()小技巧
            this.$refs.captcha.src = this.captchaUrl + '&time=' + Date.now()
        },
        submitFn () {
            let me = this;
            if (!this.message) {
                return this.errmsg = '请输入验证码'
            };
            axios.d
            axios({
                url: 'http://luckycola.com.cn/captcha/validateCaptcha', 
                method: 'post',
                withCredentials: true,
                data: {
                    captcha: this.message,
                    ColaKey: 'NaTu16773439832446NZkH6'
                }
            })
                .then(function (res) {
                    // 请求成功返回
                    let resData = res.data;
                    if (resData.code === 0) {
                        alert('验证成功');
                    } else if (resData.code === -99) {
                        alert(resData.msg);
                    } else {
                        alert('验证码错误,验证失败');
                    }
                    console.log(res);
                    me.getCaptcha();
                })
                .catch(function (err) {
                    // 请求失败返回
                    console.log(err);
                    alert('请求失败');
                })
        }
      },
    }).mount('#app');
    app.$watch('message', function(val) {
        console.log('message change=>', val);
    })
</script>

</body>
</html>