@leminnow/vue-lemin-cropped-captcha

Vue Lemin Cropped Captcha

Lemin Captcha is uniquely playful, robust, and effective. Through gamification, we are curing the pains of traditional CAPTCHA.

Table Of Contents

• Getting Started
• Installation
• Usage
• Documentation
• API

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"}>	() =>
display	void	() =>
getToken	void	() =>
loadPuzzleImage	void	() =>
setUserinfo	void	() =>
stopRefreshing	void	() =>