readme.md · 火冰/tianai-captcha-web-sdk

# 						(captcha-web-sdk)

# 是一个([TIANAI-CAPTCHA)](https://gitee.com/tianai/tianai-captcha)验证码前端脚手架工具

## 原生HTML使用方法

**注：tac.min.js`和`tac.css` 作者已经打包好放到（gitee）release中，可自行下载使用**

1. 导入`tac.min.js`和`tac.css`

```html
   <link href="styles/tac.css" rel="stylesheet">
   <script src="tac.min.js"></script>
   ```

2. 创建一个div快用于渲染验证码

```html
    <div id="captcha-box"></div>
   ```

3. 在需要调用验证码的时候执行加载验证码方法

```js
   const config = {
       // 生成接口 (必选项,必须配置, 要符合tianai-captcha默认验证码生成接口规范)
       requestCaptchaDataUrl: "/gen",
       // 验证接口 (必选项,必须配置, 要符合tianai-captcha默认验证码校验接口规范)
       validCaptchaUrl: "/check",
       // 验证码绑定的div块 (必选项,必须配置)
       bindEl: "#captcha-box",
       // 验证成功回调函数(必选项,必须配置)
       validSuccess: (res, c, tac) => {
           console.log("验证成功，后端返回的数据为", res);
           alert("验证成功");
           // 销毁验证码服务
           tac.destroyWindow();
       },
       // 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
       validFail: (res, c, tac) => {
           console.log("验证码验证失败回调...")
           // 验证失败后重新拉取验证码
           tac.reloadCaptcha();
       },
       // 刷新按钮回调事件
       btnRefreshFun: (el, tac) => {
           console.log("刷新按钮触发事件...")
           tac.reloadCaptcha();
       },
       // 关闭按钮回调事件
       btnCloseFun: (el, tac) => {
           console.log("关闭按钮触发事件...")
           tac.destroyWindow();
       }
   }
    // 创建 TAC 启动验证码服务,调用该方法后会在指定的div块中渲染出验证码
   new TAC(config).init();
   ```

## VUE2使用方法

导入`tac.min.js`和`tac.css` 后和原生使用方法调用即可

```vue
<template>
  <div class="login-div">
    <div class="kuang"><span class="kuang-left">用户名</span>天爱有情</div>
    <div class="kuang"><span class="kuang-left">密码</span>*********</div>
    <div id="login-btn" @click="loginBtn">登录</div>
    <div id="captcha-div"></div>
  </div>
</template>

## 其它框架使用方法

### 导入写好的`tac.min.js`和`tac.css`即可， 或者把该项目复制到自己项目用使用即可

## 一些扩展功能

### 去除或者替换默认的logo

```js
let config ={...}
let style = {logoUrl: null}// 去除logo             
//let style = {logoUrl: "/xx/xx/xxx.png"}// 替换成自定义的logo             
new TAC(config,style).init();
```

### 对滑块的按钮和背景设置为自定义的一些样式

```js
// 这里分享一些作者自己调的样式供参考
const style =    {
    	// 按钮样式
        btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",
    	// 背景样式
        bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",
    	// logo地址
        logoUrl: "https://minio.tianai.cloud/public/static/captcha/images/logo.png",
 		// 滑动边框样式
    	moveTrackMaskBgColor: "#f7b645",
        moveTrackMaskBorderColor: "#ef9c0d"
    }
new TAC(config,style).init();
```

火冰/tianai-captcha-web-sdk

简介

发行版

贡献者

近期动态

火冰/tianai-captcha-web-sdk .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

火冰/tianai-captcha-web-sdk