New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@gladesinger/vue3-yandex-smartcaptcha

Package Overview
Dependencies
Maintainers
0
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gladesinger/vue3-yandex-smartcaptcha

Yandex Smart Captcha Vue component

  • 0.0.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
34
decreased by-50.72%
Maintainers
0
Weekly downloads
 
Created
Source

Yandex Smart Captcha Vue component

Vue 3 Yandex SmartCaptcha

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

Описание

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

Установка

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

npm install @gladesinger/vue3-yandex-smartcaptcha

Вы можете использовать компонент 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.

Пропсы

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

ПропсТипЗначение по умолчаниюОписание
siteKeyString-Ключ клиентской части.
languageString'ru'Язык виджета. Возможные значения: 'ru', 'en', 'be', 'kk', 'tt', 'uk', 'uz', 'tr'.
testBooleanfalseВключение работы капчи в режиме тестирования. Пользователь всегда будет получать задание. Используйте только для отладки и тестирования.
webviewBooleanfalseЗапуск капчи в WebView для повышения точности оценки пользователей в мобильных приложениях.
invisibleBooleanfalseНевидимая капча.
shieldPositionString'bottom-right'Расположение блока с уведомлением об обработке данных.
hideShieldBooleanfalseСкрыть блок с уведомлением об обработке данных.
loadWidgetBooleantrueЗагружать виджет при монтировании компонента.

Эмиты

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

СобытиеОписаниеАргумент
callbackФункция-обработчик, возвращает токен в случае успехаtoken: string
onChallengeVisibleОткрытие всплывающего окна с заданием() => void
onChallengeHiddenЗакрытие всплывающего окна с заданием() => void
onNetworkErrorВозникла сетевая ошибка() => void
onJavaScriptErrorВозникла критическая ошибка JSerror: { filename: string, message: string, col: number, line: number }
onSuccessУспешная валидация пользователяtoken: string
onTokenExpiredТокен прохождения проверки стал невалидным() => void

Методы

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

МетодОписаниеАргумент
getResponseВозвращает текущее значение токена пользователя.
executeЗапускает проверку пользователя. Используется для запуска невидимой капчи.
resetСбрасывает состояние виджета до начального.
destroyУдаляет виджет и созданные им обработчики.
subscribeПодписывает обработчики на определенные события виджета. Например, для отслеживания открытия и закрытия всплывающего окна с заданием.eventName: SubscribeEvent, callbackFun: Function

Спосок возможных событий:

type SubscribeEvent =
| 'challenge-visible'
| 'challenge-hidden'
| 'network-error'
| 'javascript-error'
| 'success'
| 'token-expired';

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

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

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

<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>

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

<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>

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

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.

Props

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

PropTypeDefault ValueDescription
siteKeyString-Client-side key.
languageString'ru'Widget language. Possible values: 'ru', 'en', 'be', 'kk', 'tt', 'uk', 'uz', 'tr'.
testBooleanfalseEnables captcha testing mode. The user will always receive a challenge. Use only for debugging and testing.
webviewBooleanfalseRuns the captcha in WebView to improve accuracy in mobile applications using WebView.
invisibleBooleanfalseInvisible captcha.
shieldPositionString'bottom-right'Position of the data processing notification block.
hideShieldBooleanfalseHides the data processing notification block.
loadWidgetBooleantrueLoad the widget when the component is mounted.

Events

The YandexSmartCaptcha component supports the following events:

EventDescriptionArgument
callbackCallback function, returns the token on successtoken: string
onChallengeVisibleChallenge window becomes visible() => void
onChallengeHiddenChallenge window becomes hidden() => void
onNetworkErrorNetwork error occurred() => void
onJavaScriptErrorCritical JavaScript error occurrederror: { filename: string, message: string, col: number, line: number }
onSuccessSuccessful user validationtoken: string
onTokenExpiredThe token has expired() => void

Methods

The component exposes the following methods:

MethodDescriptionArgument
getResponseReturns the current value of the user's token.
executeStarts the user verification process. Used to trigger the invisible captcha.
resetResets the widget to its initial state.
destroyRemoves the widget and its handlers.
subscribeSubscribes handlers to specific widget events. For example, to track the opening and closing of the challenge window.eventName: SubscribeEvent, callbackFun: Function

Possible events:

type SubscribeEvent =
| 'challenge-visible'
| 'challenge-hidden'
| 'network-error'
| 'javascript-error'
| 'success'
| 'token-expired';

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

Usage Examples

Regular Captcha

<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>

Invisible Captcha

<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>

Keywords

FAQs

Package last updated on 05 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc