{"_id":"@achimha/ngx-captcha","name":"@achimha/ngx-captcha","dist-tags":{"latest":"14.0.0"},"versions":{"14.0.0":{"name":"@achimha/ngx-captcha","version":"14.0.0","license":"MIT","repository":{"type":"git","url":"git+https://github.com/achimha/ngx-captcha.git"},"author":{"name":"richard sustek"},"description":"Dynamic captcha (Google reCaptcha) implementation for Angular","keywords":["Captcha","reCaptcha","Google captcha","Angular Captcha","Angular reCaptcha","reCaptcha v2","reCaptcha v3","Invisible reCaptcha","google reCaptcha"],"private":false,"peerDependencies":{"@angular/common":">= 15.0.0","@angular/core":">= 15.0.0"},"module":"fesm2015/achimha-ngx-captcha.mjs","es2020":"fesm2020/achimha-ngx-captcha.mjs","esm2020":"esm2020/achimha-ngx-captcha.mjs","fesm2020":"fesm2020/achimha-ngx-captcha.mjs","fesm2015":"fesm2015/achimha-ngx-captcha.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/achimha-ngx-captcha.mjs","es2020":"./fesm2020/achimha-ngx-captcha.mjs","es2015":"./fesm2015/achimha-ngx-captcha.mjs","node":"./fesm2015/achimha-ngx-captcha.mjs","default":"./fesm2020/achimha-ngx-captcha.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.3.0"},"_id":"@achimha/ngx-captcha@14.0.0","gitHead":"e9683cd6a755f19cbeface666830067d4f262251","bugs":{"url":"https://github.com/achimha/ngx-captcha/issues"},"homepage":"https://github.com/achimha/ngx-captcha#readme","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-/kmlqHCKfbFooPs0h3maen/32yxBjBxUShT2DYhNydJ6PDWvK9B0PDg05axI9rSfQI6yHKjS02SMtG64x7N4EA==","shasum":"16dda08fcf85253e5460b4c5db4ae3b630d1bf3f","tarball":"https://registry.npmjs.org/@achimha/ngx-captcha/-/ngx-captcha-14.0.0.tgz","fileCount":39,"unpackedSize":260730,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH6v9qIiO2IsUnRoGSPueAKtopUr/x8sUhj0aeDEoZsqAiEA/WIFD00zJx1p9sLJ4GvVUM1Aj0R6H4UaaWFAiYK45xg="}]},"_npmUser":{"name":"achimha","email":"achim.hasenmueller@gmail.com"},"directories":{},"maintainers":[{"name":"achimha","email":"achim.hasenmueller@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-captcha_14.0.0_1749211725012_0.7271366429786961"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-06T12:08:44.906Z","14.0.0":"2025-06-06T12:08:45.228Z","modified":"2025-06-06T12:08:45.492Z"},"maintainers":[{"name":"achimha","email":"achim.hasenmueller@gmail.com"}],"description":"Dynamic captcha (Google reCaptcha) implementation for Angular","homepage":"https://github.com/achimha/ngx-captcha#readme","keywords":["Captcha","reCaptcha","Google captcha","Angular Captcha","Angular reCaptcha","reCaptcha v2","reCaptcha v3","Invisible reCaptcha","google reCaptcha"],"repository":{"type":"git","url":"git+https://github.com/achimha/ngx-captcha.git"},"author":{"name":"richard sustek"},"bugs":{"url":"https://github.com/achimha/ngx-captcha/issues"},"license":"MIT","readme":"[![npm version](https://badge.fury.io/js/ngx-captcha.svg)](https://badge.fury.io/js/ngx-captcha)\n[![Build Status](https://api.travis-ci.org/Enngage/ngx-captcha.svg?branch=master)](https://travis-ci.org/Enngage/ngx-captcha)\n[![NPM](https://nodei.co/npm/ngx-captcha.png?mini=true)](https://nodei.co/npm/ngx-captcha/)\n\n## Angular Captcha\n\nGoogle reCaptcha implementation for Angular.\n\nFeatures: \n\n1. reCaptcha v2\n2. reCaptcha v3 (beta)\n3. invisible reCaptcha\n\nLive examples: [https://enngage.github.io/ngx-captcha/](https://enngage.github.io/ngx-captcha/)\n\n## Installation\n\n```javascript\nnpm install ngx-captcha\n```\n\nImport `NgxCaptchaModule ` to your module (i.e. `AppModule`)\n\n### Use with Angular forms\n\nDepending on whether you want to use [reactive forms](https://angular.io/guide/reactive-forms) or [template-driven forms](https://angular.io/guide/forms) you need to include the appropriate modules, too.\nAdd `ReactiveFormsModule` to your imports in case you want to use reactive forms. If you prefer the the template-driven approach simple add the `FormsModule` to your module. \n\nBoth can be imported from `@angular/forms`. In the demo project you can check out the *normal* demo to see how to use reactive forms or the *invisible* demo to see what the template-driven approach looks like. With the template-driven approach you don't necessarily need to use a from element to wrap the component, you can instead use the `[ngModelOptions]=\"{ standalone: true }\"`.\nHowever, using it with the standalone option is not recommended but can be used if needed. \n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { NgxCaptchaModule } from 'ngx-captcha';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule,\n    NgxCaptchaModule\n  })\n\nexport class AppModule { }\n```\n\n## Usage\nThe configuration properties are a copy of the official ones that google provides. For explanation of what these properties do and how to use them, please refer to [https://developers.google.com/recaptcha/docs/display](https://developers.google.com/recaptcha/docs/display) and [https://developers.google.com/recaptcha/docs/invisible](https://developers.google.com/recaptcha/docs/invisible).\n\n### reCaptcha v2\n\nyour.component.ts\n```typescript\nexport class YourComponent implements OnInit {\n  protected aFormGroup: FormGroup;\n\n  constructor(private formBuilder: FormBuilder) {}\n\n  ngOnInit() {\n    this.aFormGroup = this.formBuilder.group({\n      recaptcha: ['', Validators.required]\n    });\n  }\n}\n```\n\nyour.template.html\n```html\n<form [formGroup]=\"aFormGroup\">\n  <ngx-recaptcha2 #captchaElem\n    [siteKey]=\"siteKey\"\n    (reset)=\"handleReset()\"\n    (expire)=\"handleExpire()\"\n    (load)=\"handleLoad()\"\n    (success)=\"handleSuccess($event)\"\n    [useGlobalDomain]=\"false\"\n    formControlName=\"recaptcha\">\n  </ngx-recaptcha2>\n</form>\n```\n\n### reCaptcha v3\n\n This is the implementation of <em>beta</em> version of google reCaptcha v3 as per following documentation[\"https://developers.google.com/recaptcha/docs/v3\"](https://developers.google.com/recaptcha/docs/v3).\n\n First you need to inject the <em></em> class in your component / service and then use <em>Execute</em> method with your action. Once you have the token, you need to verify it on your backend to get meaningful results. See official google documentation for more details.\n\n ```typescript\n import { ReCaptchaV3Service } from 'ngx-captcha';\n\n  constructor(\n    private reCaptchaV3Service: ReCaptchaV3Service\n  ) { }\n\n  ....\n\n  this.reCaptchaV3Service.execute(this.siteKey, 'homepage', (token) => {\n    console.log('This is your token: ', token);\n  }, {\n      useGlobalDomain: false\n  });\n ```\n\n### Invisible reCaptcha\n\n```html\n<form [formGroup]=\"aFormGroup\">\n  <ngx-invisible-recaptcha #captchaElem\n    [siteKey]=\"siteKey\"\n    (reset)=\"handleReset()\"\n    (ready)=\"handleReady()\"\n    (load)=\"handleLoad()\"\n    (success)=\"handleSuccess($event)\"\n    [ngModel]=\"recaptcha\"\n    [ngModelOptions]=\"{ standalone: true }\">\n  </ngx-invisible-recaptcha>\n</form>\n```\n\n### Unit testing\n\nUnit testing in Angular is possible, but a bit clunky because this component tries to dynamically include google's script if its not already loaded. You are not required to include in globally or manually which has a benefit of not loading until you actually use this component. This has a caveat though, since the `load` callback is executed outside of Angular's zone, performing unit tests might fail due to racing condition where Angular might fail the test before the script has a chance to load and initialize captcha. \n\nA simple fix for this is wait certain amount of time so that everything has a chance to initialize. See example below:\n\n```typescript\nbeforeEach(() => {\n        fixture = TestBed.createComponent(YourComponent);\n        component = fixture.componentInstance;\n        setTimeout(function () {\n            fixture.detectChanges();\n        }, 2000);\n});\n```\n\nOther possible scenario might be including google's script globally. If someone has a better solution, please do let me know or submit a PR for a change in readme.\n\n### Publishing lib\n\nUnder `projects\\ngx-captcha-lib` run \n\n```\nnpm run publish-lib\n```\n\n","readmeFilename":"README.md","_rev":"1-5d6257e75e9c6456cc6a8982ddf3a261"}