czq297297 / miitvip-captcha Goto Github PK

View Code? Open in Web Editor NEW

:sparkling_heart: 基于 Vue3 + Vite + Canvas 开发的滑块验证码 :sparkling_heart: 动态生成验证滑块，结合后端的二次校验，能有效的避免被其他人肆意抓取并模拟验证，进一步提升验证码的的可靠性 :collision: 且能满足大部分用户的不同定制化需求，譬如自定义背景图 / 定制主题色等等 :fire: :fire:

License: MIT License

HTML 0.74% Vue 0.77% JavaScript 13.85% TypeScript 54.05% Less 30.59%

miitvip-captcha's Introduction

Makeit Captcha

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

关于

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

✅ 自定义主题配色 🌲

✅ 自定义初始化验证码 💖

✅ 自定义远程校验结果 💥

✅ 动态配置验证码弹窗背景图 🌺

安装

npm i makeit-captcha

使用

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

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

示例

<!-- 自定义初始化 / 校验等 -->
<template>
    <div class="mi-captchas">

        <!-- 基础效果 -->
        <mi-captcha ref="captcha" />

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

        <!-- 自定义主题色 -->
        <mi-captcha theme-color="#2F9688"
            border-color="#2F9688"
            box-shadow-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>