Yandex Smart Captcha Vue component

Vue 3 Yandex SmartCaptcha

Русская версия | English version

Описание

Компонент для работы с Yandex Smartcaptcha. Перед использованием нужно зарегистрироваться и получить ключ клиента. Вся документация капчи доступна по ссылке Yandex Smartcaptcha

Установка

Чтобы установить этот пакет, выполните следующую команду:

npm install @gladesinger/vue3-yandex-smartcaptcha@latest

Вы можете использовать компонент YandexSmartCaptcha в вашем Vue 3 проекте следующим образом:

Импорт компонента

Импортируйте компонент и используйте его в вашем файле Vue:

import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'

Или зарегистрируйте его через плагин Vue:

import { createApp } from 'vue'
import App from './App.vue'
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'

const app = createApp(App)
app.component('YandexSmartCaptcha', YandexSmartCaptcha)
app.mount('#app')

Для использования в Nuxt, оберните вызов компонента в ClientOnly.

TypeScript Поддержка

Компонент полностью поддерживает TypeScript и предоставляет типы для всех пропсов, эмитов и методов. Типы доступны через импорт:

import type { 
  IYandexSmartCaptchaProps,
  IYandexSmartCaptchaEmits,
  IYandexSmartCaptcha,
  TCaptchaEvents,
  TSupportedLanguages,
  TShieldPositions
} from '@gladesinger/vue3-yandex-smartcaptcha/types';

Доступные типы:

• IYandexSmartCaptchaProps - типы для пропсов компонента
• IYandexSmartCaptchaEmits - типы для эмитов компонента
• IYandexSmartCaptcha - типы для методов и свойств компонента
• TCaptchaEvents - типы для событий капчи
• TSupportedLanguages - поддерживаемые языки
• TShieldPositions - возможные позиции щита

Пропсы

Вот список доступных пропсов для компонента YandexSmartCaptcha:

Эмиты

Компонент YandexSmartCaptcha поддерживает следующие события:

Методы

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

Компонент также предоставляет значение widgetId.

Примеры использования

Обычная капча

JavaScript

<script setup>
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'

const success = (token) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      siteKey="ваш_ключ_сайта"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
  </div>
</template>

TypeScript

<script setup lang="ts">
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import type { IYandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha/types'

const success = (token: string) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      siteKey="ваш_ключ_сайта"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
  </div>
</template>

TypeScript Nuxt 3

<script setup lang="ts">
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import type { IYandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha/types'

const success = (token: string) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}
</script>

<template>
  <div>
    <ClientOnly>
      <YandexSmartCaptcha 
        siteKey="ваш_ключ_сайта"
        @onSuccess="success"
        @onTokenExpired="expired"
      />
    </ClientOnly>
  </div>
</template>

Невидимая капча

JavaScript

<script setup>
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import { ref } from 'vue'

const yaCaptcha = ref(null)

const success = (token) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}

const fireCaptcha = () => {
  yaCaptcha.value.execute()
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      ref="yaCaptcha"
      siteKey="ваш_ключ_сайта"
      :invisible="true"
      shieldPosition="top-left"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
    <button @click="fireCaptcha">Тест</button>
  </div>
</template>

TypeScript

<script setup lang="ts">
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import type { IYandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha/types'
import { ref } from 'vue'

const yaCaptcha = ref<IYandexSmartCaptcha | null>(null)

const success = (token: string) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}

const fireCaptcha = () => {
  yaCaptcha.value?.execute()
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      ref="yaCaptcha"
      siteKey="ваш_ключ_сайта"
      :invisible="true"
      shieldPosition="top-left"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
    <button @click="fireCaptcha">Тест</button>
  </div>
</template>

Description

This package brings a component for Yandex Smartcaptcha. Before using it you need to get the user token from the official website. Smartcaptcha documentation available here Yandex Smartcaptcha

Installation

To install this package, run the following command:

npm install @gladesinger/vue3-yandex-smartcaptcha@latest

Usage

You can use the YandexSmartCaptcha component in your Vue 3 project as follows:

Importing the Component

Import the component and use it in your Vue file:

import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'

Or register it as a Vue plugin:

import { createApp } from 'vue'
import App from './App.vue'
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'

const app = createApp(App)
app.component('YandexSmartCaptcha', YandexSmartCaptcha)
app.mount('#app')

For usage in Nuxt, wrap the component call in ClientOnly.

TypeScript Support

The component fully supports TypeScript and provides types for all props, emits, and methods. Types are available through import:

import type { 
  IYandexSmartCaptchaProps,
  IYandexSmartCaptchaEmits,
  IYandexSmartCaptcha,
  TCaptchaEvents,
  TSupportedLanguages,
  TShieldPositions
} from '@gladesinger/vue3-yandex-smartcaptcha/types';

Available Types:

• IYandexSmartCaptchaProps - types for component props
• IYandexSmartCaptchaEmits - types for component emits
• IYandexSmartCaptcha - types for component methods and properties
• TCaptchaEvents - types for captcha events
• TSupportedLanguages - supported languages
• TShieldPositions - possible shield positions

Props

Here is a list of available props for the YandexSmartCaptcha component:

Events

The YandexSmartCaptcha component supports the following events:

Methods

The component exposes the following methods:

The component also exposes the widgetId state, if you need it for your case.

Usage Examples

Regular Captcha

JavaScript

<script setup>
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'

const success = (token) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      siteKey="your_site_key"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
  </div>
</template>

TypeScript

<script setup lang="ts">
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import type { IYandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha/types'

const success = (token: string) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      siteKey="your_site_key"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
  </div>
</template>

TypeScript Nuxt 3

<script setup lang="ts">
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import type { IYandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha/types'

const success = (token: string) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}
</script>

<template>
  <div>
    <ClientOnly>
      <YandexSmartCaptcha 
        siteKey="your_site_key"
        @onSuccess="success"
        @onTokenExpired="expired"
      />
    </ClientOnly>
  </div>
</template>

Invisible Captcha

JavaScript

<script setup>
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import { ref } from 'vue'

const yaCaptcha = ref(null)

const success = (token) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}

const fireCaptcha = () => {
  yaCaptcha.value.execute()
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      ref="yaCaptcha"
      siteKey="your_site_key"
      :invisible="true"
      shieldPosition="top-left"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
    <button @click="fireCaptcha">Test</button>
  </div>
</template>

TypeScript

<script setup lang="ts">
import { YandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha'
import type { IYandexSmartCaptcha } from '@gladesinger/vue3-yandex-smartcaptcha/types'
import { ref } from 'vue'

const yaCaptcha = ref<IYandexSmartCaptcha | null>(null)

const success = (token: string) => {
  console.log(token)
}

const expired = () => {
  console.log('expired')
}

const fireCaptcha = () => {
  yaCaptcha.value?.execute()
}
</script>

<template>
  <div>
    <YandexSmartCaptcha 
      ref="yaCaptcha"
      siteKey="your_site_key"
      :invisible="true"
      shieldPosition="top-left"
      @onSuccess="success"
      @onTokenExpired="expired"
    />
    <button @click="fireCaptcha">Test</button>
  </div>
</template>