Ng 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
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/ng-lemin-cropped-captcha
Installation with yarn:
yarn add @leminnow/ng-lemin-cropped-captcha
Integration
Import LeminCroppedCaptchaModule
import {LeminCroppedCaptchaModule} from "@leminnow/ng-lemin-cropped-captcha";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LeminCroppedCaptchaModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Use LeminCroppedCaptcha
in your component
<form>
<!-- Your Captcha Id and Captcha Container Id -->
<lemin-cropped-captcha
containerId="..."
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
Usage Examples
Using with component ref
<form>
<lemin-cropped-captcha
containerId="..."
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
import {LeminCroppedCaptchaComponent} from "@leminnow/ng-lemin-cropped-captcha";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild(LeminCroppedCaptchaComponent) leminCroppedCaptcha!: LeminCroppedCaptchaComponent;
constructor() {
}
getCaptchaValues() {
const values = this.leminCroppedCaptcha.getCaptchaValue();
}
}
Using with LeminCroppedCaptchaService
<form>
<lemin-cropped-captcha
containerId="..."
captchaId="CROPPED_..."
></lemin-cropped-captcha>
</form>
<button (click)="getCaptchaValues()">Get Values</button>
import {LeminCroppedCaptchaService} from "@leminnow/ng-lemin-cropped-captcha";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private leminCroppedCaptchaService: LeminCroppedCaptchaService) {
}
getCaptchaValues() {
const values = this.leminCroppedCaptchaService.getCaptcha('...').getCaptchaValue()
}
}
Documentation
Click here to documentation for Lemin Cropped Captcha
Click here to developers guide
API
Captcha Service 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 | () => |