前端随机验证码安全验证sdk

最新推荐文章于 2024-08-18 10:00:00 发布

立志成为网安大牛

最新推荐文章于 2024-08-18 10:00:00 发布

阅读量2k

点赞数 42

文章标签：安全服务器 web安全网络运维

本文链接：https://blog.csdn.net/wangluoanquan111/article/details/136620249

版权

本文介绍了前端随机验证码安全验证SDK的使用方法，包括引入库、参数说明、方法事件和通过API获取验证状态。同时探讨了网络安全行业的发展趋势和学习路径，指出网络安全专业具有高就业薪资和广阔的职业发展空间。

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

前端随机验证码安全验证sdk

前言
介绍
一、效果展示
二、使用步骤
```
* 1.引入库
```
- 2.参数说明
- 3.方法与事件说明
- 4.如何通过API获取当前用户的验证状态

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

前言

验证码：是一种校验区分用户是计算机还是人的公共全自动程序。
作用：防止刷票、论坛灌水、刷页、防止黑客恶意破解密码、盗取用户数据和防止恶意注册登录等等

介绍

这是一款开箱即用、维护简单、接入简单的前端随机验证码安全验证sdk模块.

一、效果展示

在线效果展示地址:点击即可跳转>>>

二、使用步骤

1.引入库

引入https://luckycola.com.cn/public/capVcode/dist/style.css 与https://luckycola.com.cn/public/capVcode/dist/mlcapsafesdk.umd.js 文件
在需要的地方初始化
参考在线demo:
https://luckycola.com.cn/public/capVcode/index.html
代码如下（示例）：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <style>
      #showSafeSDKBtn {
        padding: 10px 20px;
        border-radius: 4px;
        background-color: blue;
        color: white;
        font-size: 16px;
        margin-top: 20px;
      }
    </style>
    <link rel="stylesheet" href="https://luckycola.com.cn/public/capVcode/dist/style.css">
  </head>
  <body>
    <div id="app"></div>
    <button id="showSafeSDKBtn">切换sdk展现</button>
    <script type="text/javascript" src="https://luckycola.com.cn/public/capVcode/dist/mlcapsafesdk.umd.js"></script>
    <script>
       console.log('MlcapSafesdk:', MlcapSafesdk);
       let mySafeSdk = MlcapSafesdk.getSafeSdk({
            // 模式 弹窗模式(dialog) 嵌入模式(default)
            mode: 'dialog',
            // 验证key,请前往官网(http://luckycola.com.cn/)获取
            colaKey: 'AObOe764B7jCH01702230314446epH9YaJNEc',
            // 模块容器  传id  字符串(嵌入模式时候比需传入)
            container: '#app',
            // 验证类型 算式(2)、随机字符(1)
            capType: 1,
            capConfig: {
                // 字体大小(px) 默认110
                CaptchaSize: 140,
                // 噪声线条数 默认3
                CaptchaNoise: 6,
                // 随机验证字符数量 默认5 最多不超过15个
                CaptchaNum: 5,
            },
            // 初始化成功的回调函数
            initSuccCallback: (data) => {
              console.log('initSuccCallback 初始化成功:', data);
            },
            // 验证成功回调函数
            validateSucCallback: (data)=> {
              console.log('validateSucCallback 验证成功:', data);
            },
            // 验证失败回调函数
            validateFailCallback: (data)=> {
              console.log('validateFailCallback 验证失败:', data);
            },
            // sdk出错回调函数
            failCallback: (err)=> {
              console.log('sdk出错:', err);
            }
        });

        document.querySelector('#showSafeSDKBtn').addEventListener('click', () => {
          //  1、手动切换展现与隐藏
          // mySafeSdk && mySafeSdk.showSdk('show');
          // mySafeSdk && mySafeSdk.showSdk('hide');

          //  2、自动切换展现与隐藏
          mySafeSdk && mySafeSdk.toggleShowSdk();
        })
    </script>
  </body>
</html>

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

2.参数说明

参数| 是否必须| 值| 说明|
—|—|—|—|—
colaKey| 是| string| 唯一的验证key,请前往官网(http://luckycola.com.cn/)获取|
mode| 是| boolean| 模式弹窗模式(dialog) 嵌入模式(default)|
container| 否| string| 模块容器传id 字符串(嵌入模式时候必须传入)|
capType| 否| number| 验证类型算式(2)、随机字符(1)|
capConfig| 否| object| 验证码自定义配置,object具体参数在表后说明|

 capConfig: {
     // 字体大小(px) 默认110
       CaptchaSize: 140,
       // 噪声线条数 默认3
       CaptchaNoise: 6,
       // 随机验证字符数量 默认5 最多不超过15个
       CaptchaNum: 5,
   },

3.方法与事件说明

4.如何通过API获取当前用户的验证状态

可以通过下面这个接口查询用户是否通过了验证

请求方式: POST

https://luckycola.com.cn/captcha/getCaptchaV2Status

请求参数如下:

参数| 说明| |
—|—|—|—
ColaKey| 唯一的验证key,请前往官网(http://luckycola.com.cn/)获取| |
cuid| 要查询的用户的标识,验证码sdk的回调函数中可以获得| |

响应案例:

{
	"code": 0,
	"msg": "验证状态获取成功",
	"data": {
		// 	被查询的用户标识
		"cuid": "7c4d70ecf67dfc83010533dc2499a",
		// 用户的验证状态,如果该用户已经通过验证则为true, 没有通过验证则为false
		"validateStatus": false
	}
}

题外话

初入计算机行业的人或者大学计算机相关专业毕业生，很多因缺少实战经验，就业处处碰壁。下面我们来看两组数据：

2023届全国高校毕业生预计达到1158万人，就业形势严峻；

国家网络安全宣传周公布的数据显示，到2027年我国网络安全人员缺口将达327万。

一方面是每年应届毕业生就业形势严峻，一方面是网络安全人才百万缺口。

6月9日，麦可思研究2023年版就业蓝皮书（包括《2023年中国本科生就业报告》《2023年中国高职生就业报告》）正式发布。

2022届大学毕业生月收入较高的前10个专业

本科计算机类、高职自动化类专业月收入较高。2022届本科计算机类、高职自动化类专业月收入分别为6863元、5339元。其中，本科计算机类专业起薪与2021届基本持平，高职自动化类月收入增长明显，2022届反超铁道运输类专业（5295元）排在第一位。

具体看专业，2022届本科月收入较高的专业是信息安全（7579元）。对比2018届，电子科学与技术、自动化等与人工智能相关的本科专业表现不俗，较五年前起薪涨幅均达到了19%。数据科学与大数据技术虽是近年新增专业但表现亮眼，已跻身2022届本科毕业生毕业半年后月收入较高专业前三。五年前唯一进入本科高薪榜前10的人文社科类专业——法语已退出前10之列。

“没有网络安全就没有国家安全”。当前，网络安全已被提升到国家战略的高度，成为影响国家安全、社会稳定至关重要的因素之一。

网络安全行业特点

1、就业薪资非常高，涨薪快 2022年猎聘网发布网络安全行业就业薪资行业最高人均33.77万！

2、人才缺口大，就业机会多

2019年9月18日《中华人民共和国中央人民政府》官方网站发表：我国网络空间安全人才需求140万人，而全国各大学校每年培养的人员不到1.5W人。猎聘网《2021年上半年网络安全报告》预测2027年网安人才需求300W，现在从事网络安全行业的从业人员只有10W人。

行业发展空间大，岗位非常多

网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…

职业增值潜力大

网络安全专业具有很强的技术特性，尤其是掌握工作中的核心网络架构、安全技术，在职业发展上具有不可替代的竞争优势。

随着个人能力的不断提升，所从事工作的职业价值也会随着自身经验的丰富以及项目运作的成熟，升值空间一路看涨，这也是为什么受大家欢迎的主要原因。

从某种程度来讲，在网络安全领域，跟医生职业一样，越老越吃香，因为技术愈加成熟，自然工作会受到重视，升职加薪则是水到渠成之事。

黑客&网络安全如何学习

今天只要你给我的文章点赞，我私藏的网安学习资料一样免费共享给你们，来看看有哪些东西。