1 Star 18 Fork 5

makeit.vip / miitvip-captcha

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

Makeit Captcha

基于 Vue3.0 + Vite 开发,动态生成验证滑块的验证码组件

npm package npm_downloads MIT webpack vue vite axios

关于

Makeit Captcha 滑块验证码组件,是基于 Vue3.0 + Vite + 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>
    <mi-captcha></mi-captcha>
</template>

<!-- 自定义主题色 -->
<template>
    <mi-captcha theme-color="#2F9688"></mi-captcha>
</template>

<!-- 自定义初始化 / 校验等 -->
<template>
    <mi-captcha theme-color="#be6be0"
        init-action="v1/captcha/init"
        @init="initAfter"
        verify-action="v1/captcha/verification"
        :verify-params="verifyParams">
    </mi-captcha>
</template>
import { defineComponent } from 'vue'
export default defineComponent({
    data() {
        return {
            verifyParams: {}
        }
    },
    methods: {
        initAfter(res) {
            if (res.ret.code === 1) {
                localStorage.setItem('mi-captcha-key', res.data.key)
                this.verifyParams = {key: res.data.key}
            }
        }
    }
})

更多

更多定制化内容及使用请查看在线示例:https://admin.makeit.vip/components/captcha

Repository Comments ( 3 )

Sign in to post a comment

About

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

Releases

No release

miitvip-captcha

Contributors

All

Activities

Load More
can not load any more
TypeScript
1
https://gitee.com/wildidea/miitvip-captcha.git
git@gitee.com:wildidea/miitvip-captcha.git
wildidea
miitvip-captcha
miitvip-captcha
main

Search