wildidea-miitvip-captcha: Слайдер-валидатор, разработанный на Vue3 с использованием Vite и Canvas, динамически генерирует слайдеры для валидации. В сочетании с серверной двусторонней проверкой он эффективно предотвращает несанкционированный доступ и подделку, дополнительно повышая надёжность системы проверки. Кроме того, он удовлетворяет разнообразные индивидуальные потребности большинства пользователей, такие как настройка фонового изображения или адаптация основной цветовой схемы и т. д.

Makeit Captcha

Makeit Captcha — это компонент для создания проверочных кодов на основе Vue3.x и Vite4.x, который динамически генерирует проверочные слайдеры. Компонент объединяет удаленную проверку с серверной частью для обеспечения дополнительной надёжности и защиты от имитации.

Особенности:

— Возможность настройки цветовой схемы;
— Настройка начального проверочного кода;
— Удаленная проверка результатов;
— Динамическая настройка фона окна проверки.

Компонент можно установить с помощью команды:

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('переинициализировать')
        captcha.value?.reset(false)
    }
</script>

Для получения дополнительной информации о настройке и использовании компонента посетите онлайн-пример: https://admin.makeit.vip/components/captcha.

OSCHINA-MIRROR/wildidea-miitvip-captcha

Комментарии ( 0 )

Введение

Обновления

Участники

Недавние действия