前端随机验证码安全验证sdk
前端随机验证码安全验证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) 默认110CaptchaSize: 140,// 噪声线条数 默认3CaptchaNoise: 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) 默认110CaptchaSize: 140,// 噪声线条数 默认3CaptchaNoise: 6,// 随机验证字符数量 默认5 最多不超过15个CaptchaNum: 5,},
3.方法与事件说明
| 事件或方法 | 调用或者触发时机 | ||
|---|---|---|---|
| initSuccCallback | 初始化成功的回调函数,返回参数中可以拿到cuid参数,该参数用于后端通过接口查询当前用户是否通过了验证 | ||
| validateSucCallback | 验证成功回调函数 ,返回参数中可以拿到cuid参数,该参数用于后端通过接口查询当前用户是否通过了验证 | ||
| validateFailCallback | 验证失败回调函数 | ||
| failCallback | sdk出错回调函数 | ||
| showSdk | 手动切换sdk展现与隐藏,展现传参数“show“,隐藏传入“hide“ | ||
| toggleShowSdk | 自动切换展现与隐藏,无需参数 |
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}
}
相关文章：
前端随机验证码安全验证sdk
前端随机验证码安全验证sdk 前言介绍一、效果展示二、使用步骤1.引入库2.参数说明3.方法与事件说明4.如何通过API获取当前用户的验证状态 前端必备工具推荐网站(免费图床、API和ChatAI等实用工具): http://luckycola.com.cn/ 前言 验证码：是一种校验区分用户是…...
语境化语言表示模型
一.语境化语言表示模型介绍 语境化语言表示模型（Contextualized Language Representation Models）是一类在自然语言处理领域中取得显著成功的模型，其主要特点是能够根据上下文动态地学习词汇和短语的表示。这些模型利用了上下文信息…...
PDO【配置】
PDOr： 6040 控制字 6060 模式 6083 加速度 6084 减速度 =====================【定位1】：// 补间7 607A 定位位置 6081 定位速度 =====================【速度3】： 60FF 目标速度 =====================【力矩4…...
CMake入门教程【高级篇】管理MSVC编译器警告
😈「CSDN主页」：传送门 😈「Bilibil首页」：传送门 😈「动动你的小手」：点赞👍收藏⭐️评论📝 文章目录 1.什么是MSVC？2.常用的屏蔽警告3.MSVC所有警告4.target_compile_options用法5.如何在CMake中消除MSVC的警告？6.屏蔽警告编写技巧...
【JaveWeb教程】（8）Web前端基础：Vue组件库Element之Table表格组件和Pagination分页组件 详细示例介绍
目录 1 Table表格组件1.1 组件演示1.2 组件属性详解 2 Pagination分页2.1 组件演示2.2 组件属性详解2.3 组件事件详解 接下来我们来学习一下ElementUI的常用组件，对于组件的学习比较简单，我们只需要参考官方提供的代码，然后复制粘贴即可。本节…...
llama_index 创始人为我们展示召回提升策略（提升15%）
用句子向量替换为句子向量 句子检索，将句子转化为向量。在检索的过程中，假如句子命中，则将句子周围的内容也当做检索内容。 对比句子检索和之前的按块去做切分的检索。可以看到，内容的相关性提升了8%， 构建数据的时候…...
RAG 详解
原文：GitHub - Tongji-KGLLM/RAG-Survey 目录 RAG调查 什么是RAG？RAG的范式 幼稚的 RAG高级 RAG模块化 RAG如何进行增强？RAG 还是微调？如何评估 RAG？前景 严峻的挑战多式联运扩展RAG的生态系统RAG论文清单 增强阶段 …...
【llm 部署运行videochat--完整教程】
# 申请llama权重 https://ai.meta.com/resources/models-and-libraries/llama-downloads/ -> 勾选三个模型 -> 等待接收右键信息 # 下载llama代码库 git clone https://github.com/facebookresearch/llama.git cd llama bash download.py -> email -> url …...
Talking about likes
Tutorial Hi! Tim here with another 925English lesson! In today’s lesson, we’re learning how to talk about likes and preferences. Why It’s Important: Talking about things we like is common in various situations, from meetings to casual chats over lunch…...
DeepSeek 发布全新开源大模型，数学推理能力超越 LLaMA-2
自从 LLaMA 被提出以来，开源大型语言模型（LLM）的快速发展就引起了广泛研究关注，随后的一些研究就主要集中于训练固定大小和高质量的模型，但这往往忽略了对 LLM 缩放规律的深入探索。 开源 LLM 的缩放研究可以促使 LLM…...
代码随想录算法训练营第二十一天| 回溯 216. 组合总和 III 17. 电话号码的字母组合
216. 组合总和 III 可以参考77.组合中关于选取数组的相关操作。 递归函数的返回值以及参数：一般为void类型 递归函数终止条件：path这个数组的大小如果达到k，说明我们找到了一个子集大小为k的组合了，然后当n为0的时候࿰…...
微服务架构最佳实践
我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版，欢迎购买。点击进入详情 构建和管理微服务是一项艰巨的任务。这是因为微服务就像多个并行的整体应用程序，它们都必须处于同步通信和并发运行时间。因此，在设计和构建…...
国内首款支持苹果Find My芯片-伦茨科技ST17H6x
深圳市伦茨科技有限公司（以下简称“伦茨科技”）发布ST17H6x Soc平台。成为继Nordic之后全球第二家取得Apple Find My「查找」认证的芯片厂家，该平台提供可通过Apple Find My认证的Apple查找（Find My）功能集成解决方案。…...
linux 01 centos镜像下载，服务器，vmware模拟服务器
https://www.bilibili.com/video/BV1pz4y1D73n?p3&vd_source4ba64cb9b5f8c56f1545096dfddf8822 01.使用的版本 国内主要使用的版本是centos 02.centos镜像下载 这里的是centos7 一.阿里云官网地址：https://www.aliyun.com/ 二. -----【文档与社区】 —【…...
Linux安装RabbitMq明白纸（无图）
Linux安装RabbitMq步骤 安装环境Erlang和RabbitMQ版本对照安装包下载地址登录Linux服务器创建安装目录将之前下载的两个rpm文件上传到这个目录下，并解压安装Erlang安装完成后，查看Erlang版本安装socat（RabbitMq安装需要这个）解压并…...
Android - CrashHandler 全局异常捕获器
官网介绍如下：Thread.UncaughtExceptionHandler (Java Platform SE 8 ) 用于线程因未捕获异常而突然终止时调用的处理程序接口。当线程由于未捕获异常而即将终止时，Java虚拟机将使用thread . getuncaughtexceptionhandler()查询该线程的UncaughtExceptio…...
商品源数据如何采集，您知道吗？
如今，电子商务已经渗透到了人们生活的方方面面。2020年新冠肺炎突如其来，打乱了人们正常的生产生活秩序，给经济发展带来了极大的影响。抗击疫情过程中，为避免人员接触和聚集，以“无接触配送”为营销卖点的电子商务迅速…...
输入输出流、字符字节流、NIO
1、对输入输出流、字符字节流的学习，以之前做的批量下载功能为例 批量下载指的是，将多个文件打包到zip文件中，然后下载该zip文件。 1.1下载网络上的文件 代码参考如下： import java.io.*; import java.net.URL; import java.n…...
格式化处理)
js中对数字,超大金额(千位符，小数点)格式化处理
前言 这个问题的灵感来自线上一个小bug，前两天刚看完同事写的代码，对数字类型处理的很好，之前一直都是用正则和toFixed(2)处理数字相关，后面发现使用numeral.js处理更完美。 对于下面这种数据的处理，你能想到几种方法…...
Android 打开热点2.4G系统重启解决
Android 打开热点2.4G系统重启解决 文章目录 Android 打开热点2.4G系统重启解决一、前言二、过程分析1、Android 设备开机后第一次打开热点2.4G系统重启2、日志分析3、设备重启原因 三、解决方法四、其他1、wifi/有线网 代理信息也可能导致系统重启2、Android13 热点默认5G频道…...
【大模型RAG】Docker 一键部署 Milvus 完整攻略
本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装；只需暴露 19530（gRPC）与 9091（HTTP/WebUI）两个端口，即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...
Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库，获取股票数据，并生成TabPFN这个模型 可以识别、处理的格式，写一个完整的预处理示例，并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务，进行预测并输…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
抽象类和接口（全）
一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中，⼀个类如果被 abs…...
0x-3-Oracle 23 ai-sqlcl 25.1 集成安装-配置和优化
是不是受够了安装了oracle database之后sqlplus的简陋，无法删除无法上下翻页的苦恼。 可以安装readline和rlwrap插件的话，配置.bahs_profile后也能解决上下翻页这些，但是很多生产环境无法安装rpm包。 oracle提供了sqlcl免费许可，…...
一些实用的chrome扩展0x01
简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序，无论是测试应用程序、搜寻漏洞还是收集情报，它们都能提升工作流程。 FoxyProxy 代理管理工具，此扩展简化了使用代理（如 Burp…...
土建施工员考试：建筑施工技术重点知识有哪些？
《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目，核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容，附学习方向和应试技巧： 一、施工组织与进度管理 核心目标： 规…...
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...