Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
angular-captcha
Advanced tools
Weekly downloads
Readme
For a comprehensive step-by-step integration guide please see our Angular Captcha Module Integration Guide.
The guide covers the integration with the following backends:
To give you a hint how Angular Captcha Module works we pasted bellow a few excerpts from the Integration Guide.
npm install angular-captcha --save
and add the following lines into the import section of your app's app.module.ts file:
// import the Angular Captcha Module
import { BotDetectCaptchaModule } from 'angular-captcha';
@NgModule({
imports: [
...
BotDetectCaptchaModule
],
...
})
Endpoint configuration depends on which technology you use in the backend.
import { CaptchaComponent } from 'angular-captcha';
export class YourFormWithCaptchaComponent {
ngOnInit(): void {
this.captchaComponent.captchaEndpoint =
'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint.ashx';
}
import { CaptchaComponent } from 'angular-captcha';
export class YourFormWithCaptchaComponent {
ngOnInit(): void {
this.captchaComponent.captchaEndpoint =
'https://your-app-backend-hostname.your-domain.com/simple-captcha-endpoint';
}
import { CaptchaComponent } from 'angular-captcha';
export class YourFormWithCaptchaComponent {
ngOnInit(): void {
this.captchaComponent.captchaEndpoint =
'https://your-app-backend-hostname.your-domain.com/botdetect-captcha-lib/simple-botdetect.php';
}
Place the following lines in your form where you want to display captcha:
<botdetect-captcha captchaStyleName="yourFirstCaptchaStyle"></botdetect-captcha>
<input id="userCaptchaInput"
name="userCaptchaInput"
ngModel
#userCaptchaInput="ngModel"
type="text" >
import { Component, ViewChild } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { YourFormWithCaptchaService } from './your-form-with-captcha.service';
import { CaptchaComponent } from 'angular-captcha';
@Component({
moduleId: module.id,
selector: 'your-form-with-captcha',
templateUrl: 'your-form-with-captcha.component.html',
styleUrls: ['your-form-with-captcha.component.css'],
providers: [YourFormWithCaptchaService]
})
export class YourFormWithCaptchaComponent {
// uncomment the line bellow if you use Angular 2/4/5/6/7
// @ViewChild(CaptchaComponent) captchaComponent: CaptchaComponent;
// uncomment the line bellow if you use Angular 8
// @ViewChild(CaptchaComponent, { static: true }) captchaComponent: CaptchaComponent;
constructor(
private yourFormWithCaptchaService: YourFormWithCaptchaService
) { }
// Process the form on submit event.
validate(value, valid): void {
// get the user-entered captcha code value to be validated at the backend side
let userEnteredCaptchaCode = this.captchaComponent.userEnteredCaptchaCode;
// get the id of a captcha instance that the user tried to solve
let captchaId = this.captchaComponent.captchaId;
const postData = {
userEnteredCaptchaCode: userEnteredCaptchaCode,
captchaId: captchaId
};
// post the captcha data to the /your-app-backend-path on your backend
this.yourFormWithCaptchaService.send(postData)
.subscribe(
response => {
if (response.success == false) {
// captcha validation failed; reload image
this.captchaComponent.reloadImage();
// TODO: maybe display an error message, too
} else {
// TODO: captcha validation succeeded; proceed with the workflow
}
},
error => {
throw new Error(error);
});
}
}
The userEnteredCaptchaCode
and captchaId
values posted from the frontend are used to validate a captcha challenge on the backend.
The validation is performed by calling the: Validate(userEnteredCaptchaCode, captchaId)
.
// C#
SimpleCaptcha yourFirstCaptcha = new SimpleCaptcha();
bool isHuman = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId);
' VB.NET
Dim yourFirstCaptcha As SimpleCaptcha = New SimpleCaptcha()
Dim isHuman As Boolean = yourFirstCaptcha.Validate(userEnteredCaptchaCode, captchaId)
SimpleCaptcha yourFirstCaptcha = SimpleCaptcha.load(request);
boolean isHuman = yourFirstCaptcha.validate(userEnteredCaptchaCode, captchaId);
$yourFirstCaptcha = new SimpleCaptcha();
$isHuman = $yourFirstCaptcha->Validate($userEnteredCaptchaCode, $captchaId);
Angular Captcha Module Step-by-step Integration Guide -- read this one first
Angular Captcha Module Basic Example -- partial code walk-through
Angular Captcha Module Form Example -- partial code walk-through
The current version of the Angular Captcha Module requires one of the following BotDetect CAPTCHA backends:
Send us questions, suggestions contact form on captcha.com.
FAQs
BotDetect CAPTCHA Angular Module (TypeScript: Angular 2/4/5/6/7/8+)
The npm package angular-captcha receives a total of 867 weekly downloads. As such, angular-captcha popularity was classified as not popular.
We found that angular-captcha demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.