0.2.0 • Published 7 months ago
@leminnow/vue-lemin-cropped-captcha v0.2.0
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 | () => |