Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
angular-captcha
Advanced tools
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 736 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.