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

这篇具有很好参考价值的文章主要介绍了前端随机验证码安全验证sdk。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。



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

前言

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

介绍

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

一、效果展示

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

二、使用步骤

1.引入库

  1. 引入https://luckycola.com.cn/public/capVcode/dist/style.css 与https://luckycola.com.cn/public/capVcode/dist/mlcapsafesdk.umd.js 文件
  2. 在需要的地方初始化
  3. 参考在线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.方法与事件说明

事件或方法 调用或者触发时机
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的回调函数中可以获得

响应案例:文章来源地址https://www.toymoban.com/news/detail-788058.html

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

到了这里,关于前端随机验证码安全验证sdk的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包