{"id":17434250,"url":"https://github.com/leNicDev/ng-hcaptcha","last_synced_at":"2025-03-01T07:31:53.032Z","repository":{"id":33077557,"uuid":"151155533","full_name":"leNicDev/ng-hcaptcha","owner":"leNicDev","description":":fire: hCaptcha Component for Angular","archived":false,"fork":false,"pushed_at":"2024-10-14T21:00:01.000Z","size":2448,"stargazers_count":50,"open_issues_count":11,"forks_count":42,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-21T23:02:49.022Z","etag":null,"topics":["angular","captcha","hcaptcha","human","protocol","verification"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-hcaptcha","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leNicDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-01T20:34:03.000Z","updated_at":"2025-02-21T13:43:28.000Z","dependencies_parsed_at":"2024-10-20T11:39:14.713Z","dependency_job_id":null,"html_url":"https://github.com/leNicDev/ng-hcaptcha","commit_stats":{"total_commits":75,"total_committers":7,"mean_commits":"10.714285714285714","dds":"0.16000000000000003","last_synced_commit":"1b32bbe49bcdf5d5468f9924e20bbe76d80b7855"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leNicDev%2Fng-hcaptcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leNicDev%2Fng-hcaptcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leNicDev%2Fng-hcaptcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leNicDev%2Fng-hcaptcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leNicDev","download_url":"https://codeload.github.com/leNicDev/ng-hcaptcha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241276758,"owners_count":19937607,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","captcha","hcaptcha","human","protocol","verification"],"created_at":"2024-10-17T09:01:24.979Z","updated_at":"2025-03-01T07:31:53.009Z","avatar_url":"https://github.com/leNicDev.png","language":"TypeScript","readme":"[![GitHub license](https://img.shields.io/github/license/leNicDev/ng-hcaptcha.svg)](https://github.com/leNicDev/ng-hcaptcha/blob/master/LICENSE)\u0026nbsp;\n[![GitHub issues](https://img.shields.io/github/issues/leNicDev/ng-hcaptcha.svg)](https://GitHub.com/leNicDev/ng-hcaptcha/issues/)\u0026nbsp;\n[![GitHub pull-requests](https://img.shields.io/github/issues-pr/leNicDev/ng-hcaptcha.svg)](https://GitHub.com/leNicDev/ng-hcaptcha/pull/)\n\n# ng-hcaptcha - hCaptcha Component for Angular\n\nng-hcaptcha provides an easy to use component for [hCaptcha](https://hcaptcha.com).\n\n## Table of Contents\n\n- [Supported Angular versions](#supported-angular-versions)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Execute hCaptcha programmatically](#execute-hcaptcha-programmatically)\n- [Bugs? Ideas?](#bugs-ideas)\n- [Support me](#support-me)\n\n## Supported Angular versions\n\nThe latest version of `ng-hcaptcha` currently supports Angular v9 to v17.\n\n## Installation\n\n### Step 1 - Install the ng-hcaptcha dependency\n\n```shell\n# NPM\nnpm install --save ng-hcaptcha\n\n# Yarn\nyarn add ng-hcaptcha\n```\n\n\u003e You can use the tag 'next' to get the latest beta version.\n\n### Step 2 - Import  the NgHcaptchaModule\n```ts\nimport { NgHcaptchaModule } from 'ng-hcaptcha';\n\n@NgModule({\n    imports: [\n        // Option #1\n        // Set the sitekey globally for every hCaptcha component\n        NgHcaptchaModule.forRoot({\n            siteKey: 'YOUR_SITEKEY',\n            languageCode: 'de' // optional, will default to browser language\n        }),\n\n        // Option #2\n        // This option requires you to set the [siteKey] property for every hCaptcha component\n        NgHcaptchaModule.forRoot()\n    ]\n})\n```\n\n## Usage\n\nTemplate:\n```html\n\u003c!-- Regular usage --\u003e\n\u003cng-hcaptcha (verify)=\"onVerify($event)\"\n              (expired)=\"onExpired($event)\"\n              (error)=\"onError($event)\"\u003e\n\u003c/ng-hcaptcha\u003e\n\n\u003c!-- Usage in forms --\u003e\n\u003c!-- The value of the form control will be the verification token --\u003e\n\u003cform [formGroup]=\"formGroup\" (submit)=\"onSubmit()\"\u003e\n    \u003cng-hcaptcha formControlName=\"captcha\"\u003e\u003c/ng-hcaptcha\u003e\n\u003c/form\u003e\n\n\u003c!-- Invisible captcha --\u003e\n\u003cbutton ngHcaptchaInvisibleButton\n        (verify)=\"onVerify($event)\"\n        (expired)=\"onExpired($event)\"\n        (error)=\"onError($event)\"\u003eClick me\u003c/button\u003e\n```\n\nTS:\n```ts\nonVerify(token: string) {\n    // The verification process was successful.\n    // You can verify the token on your server now.\n}\n\nonExpired(response: any) {\n    // The verification expired.\n}\n\nonError(error: any) {\n    // An error occured during the verification process.\n}\n```\n\n## Execute hCaptcha programmatically\n\nThe hCaptcha verification process can also be executed programmatically:\n```ts\n@Component({\n  selector: 'hc-programmatically',\n  templateUrl: './programmatically.component.html',\n  styleUrls: ['./programmatically.component.scss']\n})\nexport class ProgrammaticallyComponent {\n\n  constructor(private hcaptchaService: NgHcaptchaService) { }\n\n  verify() {\n    this.hcaptchaService.verify().subscribe(\n      (result) =\u003e {\n        console.log('SUCCESS', result);\n      },\n      (err) =\u003e {\n        console.log('FAILED', err);\n      },\n      () =\u003e {\n        console.log('COMPLETE');\n      }\n    );\n  }\n\n}\n```\n\n## Properties\nThe properties below exist for all captcha components.\n\n`siteKey` Allows you to set the site key per captcha instance.\n\n`languageCode` Allows you to force a specific language. See https://docs.hcaptcha.com/languages\n\n## Bugs? Ideas?\n\nIf you found a bug or something you don't like, feel free to [open an issue](https://github.com/leNicDev/ng-hcaptcha/issues/new). If you have any ideas for new features or improvements, feel free to contribute or [open an issue](https://github.com/leNicDev/ng-hcaptcha/issues/new) :wink:\n\n## Support me\n\nIf you would like to support me for free, just create your hCaptcha account using my referral link :relaxed:\n[https://hCaptcha.com/?r=4afcb2d42338](https://hCaptcha.com/?r=4afcb2d42338)\n","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Captcha"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FleNicDev%2Fng-hcaptcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FleNicDev%2Fng-hcaptcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FleNicDev%2Fng-hcaptcha/lists"}