@leminnow/vue-lemin-cropped-captcha
v0.2.0
Published
Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.
Downloads
36
Maintainers
Readme
Table Of Contents
Getting Started
How can I get my captchaId
?
Select a puzzle captcha from your puzzle captchas
Copy your captchaId
from your puzzle's captcha script source
How can I get my containerId
?
Click on Advanced Settings from the puzzle captcha of your choice
Copy your containerId
from Captcha Div ID
Installation
Installation with npm:
npm install @leminnow/vue-lemin-cropped-captcha
Installation with yarn:
yarn add @leminnow/vue-lemin-cropped-captcha
Usage Examples
Using with vue3
<script setup lang="ts">
import {LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";
import {ref} from "vue";
const captchaRef = ref();
function getCaptchaValue() {
const values = captchaRef.value.getCaptchaValue();
console.log(values);
}
</script>
<template>
<LeminCroppedCaptcha
ref="captchaRef"
captcha-id="CROPPED_..."
container-id="lemin-cropped-captcha"
>
</LeminCroppedCaptcha>
<button @click="getCaptchaValue">Get Captcha Values</button>
</template>
Using with vue
<template>
<div>
<form>
<!-- Your Captcha Id and Captcha Container Id -->
<LeminCroppedCaptcha
ref="captchaRef"
captcha-id="CROPPED_..."
container-id="...">
</LeminCroppedCaptcha>
</form>
<button @click="getCaptchaValue">Get Captcha Values</button>
</div>
</template>
<script>
import {LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";
export default {
name: 'App',
components: {
LeminCroppedCaptcha
},
methods: {
getCaptchaValue() {
const values = this.$refs.captchaRef.getCaptchaValue();
}
}
};
</script>
Using with leminCroppedCaptcha
multiple instances
<template>
<div>
<form>
<!-- Your Captcha Id and Captcha Container Id -->
<LeminCroppedCaptcha
ref="captchaRef"
captcha-id="CROPPED_..."
container-id="...">
</LeminCroppedCaptcha>
</form>
<button @click="getCaptchaValue">Get Captcha Values</button>
</div>
</template>
<script>
import {leminCroppedCaptcha, LeminCroppedCaptcha} from "@leminnow/vue-lemin-cropped-captcha";
export default {
name: 'App',
components: {
LeminCroppedCaptcha
},
methods: {
getCaptchaValue() {
const values = leminCroppedCaptcha.getCaptcha('CROPPED_...').getCaptchaValue()
}
}
};
</script>
Documentation
Click here to documentation for Lemin Cropped Captcha
Click here to developers guide
API
Captcha Plugin Methods
| Name | Return Type | Parameter | Description |
|----------------------------|---------------------------|----------------| --------------- |
| getCaptcha
| CaptchaInstance |(CAPTCHA_KEY: Optional String) => | Returns the given CAPTCHA_KEY's captcha instance. If CAPTCHA_KEY is empty, it will return first captcha instance.|
| getInstances
| CaptchaInstance{} | (CAPTCHA_KEY: Optional String) => | Returns all the instances of captchas |
| destroyAll
| void | () => | Destroys all captchas on the page. |
| reloadAll
| void | () => | Reload all captchas on the page. |
Captcha Component Methods
| Name | Return Type | Parameter | Description |
|----------------------------|---------------------------|------------------|----------------------|
| getCaptchaValue
| {"answer": "answer","challenge_id": "challenge_id"}| () =>| Returns the captcha value on the page for needed validation |
| isReady
| boolean | () => | Returns the state of captcha |
| reloadPuzzle
| void | () => | Reloads puzzle, you may use it in fail scenarios. |
| onLoad
| void | (callbackFunction = function(){}) => | Calls the function when the captcha loaded. |
| loadPuzzleError
| void | (callbackFunction = function(){}) => | Calls the function when the captcha loaded. |
| destroyCaptcha
| void | () => | Destroys the captcha on the page |
| adjustSize
| void | () => | |
| execute
| Promise<{"answer": "answer","challenge_id": "challenge_id"}> | () => | | It initiates invisible captcha programmatically; it's only applicable for Invisible Captcha!
| display
| void | () => | |
| getToken
| void | () => | |
| loadPuzzleImage
| void | () => | |
| setUserinfo
| void | () => | |
| stopRefreshing
| void | () => | |