# miitvip-captcha

**Repository Path**: wildidea/miitvip-captcha

## Basic Information

- **Project Name**: miitvip-captcha
- **Description**: 基于 Vue3 + Vite + Canvas 开发的滑块验证码，动态生成验证滑块，结合后端的二次校验，能有效的避免被其他人肆意抓取并模拟验证，进一步提升验证码的的可靠性，且能满足大部分用户的不同定制化需求，譬如自定义背景图 / 定制主题色等等 ...
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: https://admin.makeit.vip/component/captcha
- **GVP Project**: No

## Statistics

- **Stars**: 35
- **Forks**: 9
- **Created**: 2021-04-15
- **Last Updated**: 2025-12-10

## Categories & Tags

**Categories**: captcha

**Tags**: None

## README

<p align="center">
    <a href="https://admin.makeit.vip/">
        <img width="200" src="https://file.makeit.vip/MIITVIP/M00/00/00/K4vDRGPcbmmAG8_sAAAtlj6Tt_s562.png">
    </a>
</p>

<h1 align="center" color="green">
    <a href="https://admin.makeit.vip/components/captcha" target="_blank" style="color: #41b995">
        Makeit Captcha
    </a>
</h1>

<div align="center">

基于 Vue3.x + Vite6.x 开发，动态生成验证滑块的验证码组件

[![npm package](https://img.shields.io/npm/v/@miitvip/captcha.svg?style=flat-square)](https://www.npmjs.org/package/@miitvip/captcha)
[![npm_downloads](http://img.shields.io/npm/dm/@miitvip/captcha.svg?style=flat-square)](http://www.npmtrends.com/@miitvip/captcha)
![MIT](https://img.shields.io/badge/license-MIT-ff69b4.svg)
![node](https://img.shields.io/badge/node-22.17.0-orange.svg)
![vue](https://img.shields.io/badge/vue-3.5.17-green.svg)
![vite](https://img.shields.io/badge/vite-6.3.5-yellow.svg)
![axios](https://img.shields.io/badge/axios-1.10.0-red.svg)
![ant design vue](https://img.shields.io/badge/ant%20design%20vue-4.x-blueviolet.svg)

</div>

## 关于

> Makeit Captcha 滑块验证码组件，基于 Vue3.x + Vite6.x + Canvas 开发，动态生成验证滑块，结合后端进行二次校验，能有效避免被恶意抓取后的模拟验证，进一步提升验证码的可靠性。

:white_check_mark: 自定义主题配色 :evergreen_tree:

:white_check_mark: 自定义初始化验证码 :sparkling_heart:

:white_check_mark: 自定义远程校验结果 :collision:

:white_check_mark: 动态配置验证码弹窗背景图 :hibiscus:

## 安装

```bash
npm i @miitvip/captcha
```

## 使用

```ts
import { createApp } from 'vue'
import MakeitCaptcha from '@miitvip/captcha'
import '@miitvip/captcha/dist/makeit-captcha.min.css'
import App from './app.vue'

const app = createApp(App)
app.use(MakeitCaptcha)
app.mount('#app')
```

## 国际化（本身项目包含 vue-i18n）

```ts
/**
 * 如果项目本身有引入 vue-i18n，请导出 setupCaptchaI18n，
 * 且在 captcha 组件 install 之前调用。
 * 避免 vue-i18n 冲突（多次实例化）
 * 如下示例：
 */
import { createApp } from 'vue'
import MakeitCaptcha, { setupCaptchaI18n } from '@miitvip/captcha'
import '@miitvip/captcha/dist/makeit-captcha.min.css'
import App from './app.vue'

const app = createApp(App)
const i18n = createI18n({
    legacy: false,
    locale: 'zh-cn',
    messages: {}
})
setupCaptchaI18n(i18n)
app.use(MakeitCaptcha)
app.mount('#app')
```

## 示例

```html
<!-- 自定义初始化 / 校验等 -->
<template>
    <div class="mi-captchas">
        <!-- 基础效果 -->
        <mi-captcha ref="captcha" />

        <!-- 手动触发重置 -->
        <a @click="reset">重置</a>

        <!-- 自定义主题色 ( 颜色值  ) -->
        <mi-captcha primary-color="#2F9688" />

        <!-- 自定义初始化 / 校验等 -->
        <mi-captcha
            theme-color="#be6be0"
            init-action="v1/captcha/init"
            @init="initAfter"
            verify-action="v1/captcha/verification"
            :verify-params="params.verify"
        />
    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue'

    const captcha = ref(null)

    const params = reactive({
        verify: { key: null }
    })

    const initAfter = (res) => {
        if (res?.ret?.code === 200) {
            localStorage.setItem('mi-captcha-key', res?.data?.key)
            params.verify.key = res?.data?.key
        }
    }

    const reset = () => {
        console.log('reinitialize')
        captcha.value?.reset(false)
    }
</script>
```

## 更多

> 更多定制化内容及使用请查看在线示例：[https://admin.makeit.vip/component/captcha](https://admin.makeit.vip/component/captcha)