{"_id":"@alekremi/ngx-recaptcha-v3","_rev":"1-2557f76269e6c5c2c8bcac88f0b531c5","name":"@alekremi/ngx-recaptcha-v3","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@alekremi/ngx-recaptcha-v3","version":"1.0.0","author":{"name":"Aleksandr Kreminskij","email":"aleksandr.kreminskij@gmail.com"},"description":"Library to integrate RecaptchaV3 with Angular","homepage":"https://github.com/alekremi/ngx-recaptcha-v3","repository":{"type":"git","url":"git+https://github.com/alekremi/ngx-recaptcha-v3.git"},"bugs":{"url":"https://github.com/alekremi/ngx-recaptcha-v3/issues"},"keywords":["angular","RecaptchaV3","RecaptchaV3 module","RecaptchaV3 service"],"license":"MIT","peerDependencies":{"@angular/common":"^12.1.1","@angular/core":"^12.1.1"},"dependencies":{"tslib":"^2.2.0"},"main":"bundles/alekremi-ngx-recaptcha-v3.umd.js","module":"fesm2015/alekremi-ngx-recaptcha-v3.js","es2015":"fesm2015/alekremi-ngx-recaptcha-v3.js","esm2015":"esm2015/alekremi-ngx-recaptcha-v3.js","fesm2015":"fesm2015/alekremi-ngx-recaptcha-v3.js","typings":"alekremi-ngx-recaptcha-v3.d.ts","sideEffects":false,"_id":"@alekremi/ngx-recaptcha-v3@1.0.0","_nodeVersion":"14.17.2","_npmVersion":"6.14.13","dist":{"integrity":"sha512-V6KDS9y/UKQru+p618Qo8vHrbC3VKKjQsP8w+/+0q+/zzR7AprOMf0SHctUlGfbSiQpkWsSa1jNKVauxYbkhFg==","shasum":"32c4ca2903aa753c56f9a30a718d9effd8cf7f55","tarball":"https://registry.npmjs.org/@alekremi/ngx-recaptcha-v3/-/ngx-recaptcha-v3-1.0.0.tgz","fileCount":15,"unpackedSize":58849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+HsHCRA9TVsSAnZWagAAhQsP/RC8anKE4L036PyQ+SSw\ndHjQSO3aQC3x3I2JHGX29ca9mEk8EyxL+WFPn8Lw0qmZEKwCLCxlR0TYaNsp\nKcJt34yGR8sDFidNePqjKncskrt0eASBvuUKra96ZS7pnoaW9kYOS6qPSzht\n/y+KVX8wa6DB5EGl6pqqUTH7rGHxWPQQZPvgPJtajT6BdfpnSQBk1vErajZU\nCoV4CXOZB/mK4h5SVHvCgKfzF9S+5Zyfc+WvB1YdC3ZgxWVCpICcXGSD/Ebr\n6huWS9+9JfhDEb+GV1vrfGp9nO6uUwU/jniooTfpzo2jbdSAvWbF9KXblTkD\nq1AHJ41oqhweNvcOIm3VzhEQ1AAs4zu44JfQJT06QurOQCCj24U0YnBVW/hu\nZGZ7dw76krc2ZABca7HmjMd+GRGdqEBCyh5ybYEw0c0efz0UbIKApC75ggKj\n6pJZLtKwintVfgkhc/gt77iuI+TzTbYSLsr5zf2wpsnugwUfQK7wZZ17SC+1\niFvQI+ZqIJRsEjL6WvvXCTLNU6+bFGwU/EF0FYTL9DA8MAoxnNK6ROjNY4ox\nI1SIRFWRM5u4KY6bzHYYhy3zMDJZWSgMcFXxjtFC+AeHDDKsEIJ/ET0lw4YS\nKBmyG0Y2XRWTCXWQZRDIVPQm85C5zvQMjuxxMG5Z74vpc0R0os8sAef7Lxbd\nMrhd\r\n=CWOm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBkZ/3lD+Vyh6VBiarH9mU8MhwMrE5RPTO0xA6cwvCKpAiEArxlYzYG2FDcGZSe05PZbU9WUFNkVHIEL7ZAUBw2irDI="}]},"_npmUser":{"name":"alekremi","email":"aleksandr.kreminskij@gmail.com"},"directories":{},"maintainers":[{"name":"alekremi","email":"aleksandr.kreminskij@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-recaptcha-v3_1.0.0_1626897159625_0.15442193094588363"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-21T19:52:39.554Z","1.0.0":"2021-07-21T19:52:39.747Z","modified":"2022-04-04T12:37:19.643Z"},"maintainers":[{"name":"alekremi","email":"aleksandr.kreminskij@gmail.com"}],"description":"Library to integrate RecaptchaV3 with Angular","homepage":"https://github.com/alekremi/ngx-recaptcha-v3","keywords":["angular","RecaptchaV3","RecaptchaV3 module","RecaptchaV3 service"],"repository":{"type":"git","url":"git+https://github.com/alekremi/ngx-recaptcha-v3.git"},"author":{"name":"Aleksandr Kreminskij","email":"aleksandr.kreminskij@gmail.com"},"bugs":{"url":"https://github.com/alekremi/ngx-recaptcha-v3/issues"},"license":"MIT","readme":"## Library to integrate [Recaptcha v3](https://developers.google.com/recaptcha/docs/v3) with Angular\r\n\r\n[![npm version](https://badge.fury.io/js/%40alekremi%2Fngx-recaptcha-v3.svg)](https://badge.fury.io/js/%40alekremi%2Fngx-recaptcha-v3)\r\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/@alekremi/ngx-recaptcha-v3)\r\n![Depfu](https://img.shields.io/depfu/alekremi/ngx-recaptcha-v3)\r\n\r\nGoogle reCaptcha v3 service implementation for Angular 12 and beyond.\r\n\r\n### Demo\r\n\r\nStackBlitz [live example](https://stackblitz.com/edit/ngx-recaptcha-v3-example).\r\n\r\n### Installation\r\n\r\n```bash\r\nnpm install --save @alekremi/ngx-recaptcha-v3\r\n```\r\n\r\n### Usage\r\n\r\nImport `NgxRecaptchaV3Module` to Angular AppModule.\r\n\r\n```javascript\r\nimport { NgModule } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';\r\n\r\nimport { NgxRecaptchaV3Module } from '@alekremi/ngx-recaptcha-v3';\r\n\r\nimport { AppComponent } from './app.component';\r\n\r\n@NgModule({\r\n  imports: [BrowserModule, HttpClientModule, HttpClientXsrfModule, NgxRecaptchaV3Module],\r\n  declarations: [AppComponent],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}\r\n```\r\n\r\nJnject `NgxRecaptchaV3Service` in your component / service and then use `execute` method with your action.\r\nOnce you have the token, you need to verify it on your backend to get meaningful results.\r\n\r\nFor example if your external `LoginService` looks like:\r\n\r\n```javascript\r\nimport { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { User } from './user';\r\n\r\n@Injectable()\r\nexport class LoginService {\r\n  constructor(private httpClient: HttpClient) {}\r\n\r\n  login(username: string, password: string): Observable<User> {\r\n    return this.httpClient.post<User>('https://my-domain.com/api/login', { username, password });\r\n  }\r\n}\r\n\r\n```\r\n\r\nthen `NgxRecaptchaV3Service` using:\r\n\r\n```javascript\r\nimport { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { User } from './user';\r\n\r\nimport { NgxRecaptchaV3Service } from '@alekremi/ngx-recaptcha-v3';\r\n\r\n@Injectable()\r\nexport class LoginService {\r\n  constructor(private httpClient: HttpClient, private recaptchaV3Service: NgxRecaptchaV3Service) {}\r\n\r\n  login(username: string, password: string): Observable<User> {\r\n    return this.recaptchaV3Service\r\n      .execute(RECAPTCHA_SITE_KEY, 'login')\r\n      .pipe(mergeMap((token) => this.httpClient.post<User>('https://my-domain.com/api/login', { username, password, token })));\r\n  }\r\n}\r\n\r\n```\r\n\r\n### Advanced usage\r\n\r\nAdditionaly you can provide `NgxRecaptchaOptions`:\r\n\r\n| Option      | Optional | Description                                                    |\r\n| ----------- | -------- | -------------------------------------------------------------- |\r\n| language    | Yes      | reCaptcha language (badge, errors and etc.)                    |\r\n| badgeHidden | Yes      | provide if you want execute reCaptcha action with hidden badge |\r\n\r\n#### Execute action with provided language:\r\n\r\nreCaptcha supported languages: https://developers.google.com/recaptcha/docs/language\r\n\r\n```javascript\r\nthis.recaptchaV3Service.execute(RECAPTCHA_SITE_KEY, 'login', { language: 'de' });\r\n```\r\n\r\n#### Execute action with hidden badge:\r\n\r\n```javascript\r\nthis.recaptchaV3Service.execute(RECAPTCHA_SITE_KEY, 'login', { badgeHidden: true });\r\n```\r\n\r\nNote: You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.\r\nPlease include the following text:\r\n\r\n```javascript\r\nThis site is protected by reCAPTCHA and the Google\r\n    <a href=\"https://policies.google.com/privacy\">Privacy Policy</a> and\r\n    <a href=\"https://policies.google.com/terms\">Terms of Service</a> apply.\r\n```\r\n\r\nFor more info see FAQ: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed\r\n\r\n#### Unload reCaptcha manually:\r\n\r\n```javascript\r\nthis.recaptchaV3Service.unload();\r\n```\r\n\r\nThis method will remove recaptcha badge and scripts.\r\n","readmeFilename":"README.md"}