dethariel / ng-recaptcha Goto Github PK
View Code? Open in Web Editor NEWAngular component for Google reCAPTCHA
Home Page: https://dethariel.github.io/ng-recaptcha/
License: MIT License
Angular component for Google reCAPTCHA
Home Page: https://dethariel.github.io/ng-recaptcha/
License: MIT License
I can't seem to load the captcha and I get the following error
Uncaught (in promise): Error: DI Error
@angular/cli: 1.0.0
node: 6.9.5
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0
@angular/compiler-cli: 2.4.7
AppModule
@NgModule({
imports: [
RecaptchaFormsModule
In your example here: https://dethariel.github.io/ng-recaptcha/language
Is there a way to load the current language of the locale being used?
ie. something like this:
import { NgModule, LOCALE_ID } from '@angular/core';
...
providers: [
{
provide: RECAPTCHA_LANGUAGE,
useValue: LOCALE_ID,
},
I am currently using AOT translations for my app if that helps.
Thanks
Is it possible to change the reCaptcha language dynamically?
Changing the language on the page of the site, I would like to change the language of captcha. Is this possible?
This happens for both untouched captcha, and one that has been resolved.
TypeError: Cannot read property 'value' of null
at Object.mo [as getResponse] (https://www.gstatic.com/recaptcha/api2/r20170126104253/recaptcha__en_gb.js:298:137)
at RecaptchaComponent.reset (eval at ./node_modules/ng2-recaptcha/recaptcha/recaptcha.component.js (http://localhost:8000/app.1.js:11315:1), :38:33)
at RecaptchaComponent.ngOnDestroy (eval at ./node_modules/ng2-recaptcha/recaptcha/recaptcha.component.js (http://localhost:8000/app.1.js:11315:1), :33:14)
It seems to work for the most part by simply using "invisible" as the size attribute, but in order for it to work this package needs to implement grecaptcha.execute() so one may call it in the component and get the response token if needed.
Hi,
maybe there is some issue with Angular 4.1. :(
while trying to normally import your package, compiller throwing these errors:
I am using a lot of angular2 packages in my project, but there is no issue with tham.
ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts (2,29): Cannot find module '@angular/core'.
ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts (3,28): Cannot find module 'rxjs/Observable'.
ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha.component.d.ts (2,64): Cannot find module '@angular/core'.
ERROR in /Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/node_modules/ng-recaptcha/recaptcha/recaptcha.module.d.ts (1,37): Cannot find module '@angular/core'.
ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'ng-recaptcha' in '/Applications/XAMPP/xamppfiles/htdocs/hudebnizkusebny/public/frontend/src/app'
@ ./src/app/app.module.ts 61:0-47
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
I'm compiling the library from the source, and tsc gives me these errors:
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(15,41): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(17,28): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(17,28): error TS4031: Public property 'ready' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(33,12): error TS2339: Property 'ng2recaptchaloaded' does not exist on type 'Window'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(34,41): error TS2304: Cannot find name 'grecaptcha'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha-loader.service.ts(36,56): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(24,26): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(24,26): error TS4031: Public property 'theme' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(25,25): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(25,25): error TS4031: Public property 'type' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(26,25): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(26,25): error TS4031: Public property 'size' of exported class has or is using private name 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(36,23): error TS2503: Cannot find namespace 'ReCaptchaV2'.
node_modules/ng2-recaptcha-src/recaptcha/recaptcha.component.ts(45,66): error TS2503: Cannot find namespace 'ReCaptchaV2'.
When I look into recaptcha.component.ts and recaptcha-loader.service.ts, I see uses of this namespace but this is never imported. I could not find where this is defined.
Where is this coming from?
Thank you!
Is it possible to change Recaptcha Width? make it responsible.
HI. I am developping a web app with ionic framework and when i try to build for production I get an error related to ng-recatcha.
Have you seen anything like this?
Error:
"Failed on type {"filePath":"/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts","name":"RecaptchaLoaderService","members":[]} with error Error: Error encountered resolving symbol values statically. Expression form not supported (position 29:55 in the original .ts file), resolving symbol RecaptchaLoaderService in /home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts
Error: Error encountered resolving symbol values statically. Expression form not supported (position 29:55 in the original .ts file), resolving symbol RecaptchaLoaderService in /home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/ng-recaptcha/recaptcha/recaptcha-loader.service.d.ts
at positionalError (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:24025:35)
at simplifyInContext (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:23868:27)
at StaticReflector.simplify (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:23882:13)
at StaticReflector.parameters (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:23403:65)
at CompileMetadataResolver._getDependenciesMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14830:71)
at CompileMetadataResolver._getTypeMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14755:26)
at CompileMetadataResolver._getInjectableMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14741:21)
at CompileMetadataResolver.getProviderMetadata (/home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:15031:40)
at /home/clovisjr/IonicProjs/PedidosOnline/Pedidos-V2-PizzariaBrasil-01/Pedidos-V2/node_modules/@angular/compiler/bundles/compiler.umd.js:14960:49
at Array.forEach ()"
Hello,
I think it'll be good to update angular dependencies to the final version (2.0.0).
Thank for this repo, it is the better I've found ;)
Trying to use "npm i ng-recaptcha --save"
when importing, i get a 404 error in the console
login:18 Error: (SystemJS) XHR error (404 Not Found) loading http://10.0.0.5:3000/ng-recaptcha Error: XHR error (404 Not Found) loading http://10.0.0.5:3000/ng-recaptcha at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:1230:39) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:460:38) [<root>] Error loading http://10.0.0.5:3000/ng-recaptcha as "ng-recaptcha" from http://10.0.0.5:3000/app/app.module.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:1230:39) [<root>] at XMLHttpRequest.ZoneTask.invoke (http://10.0.0.5:3000/node_modules/zone.js/dist/zone.js:460:38) [<root>] Error loading http://10.0.0.5:3000/ng-recaptcha as "ng-recaptcha" from http://10.0.0.5:3000/app/app.module.js
Tried to set defaultJsExtension to js, no difference...
Tried adding to the map in the systemjs.config.js:
'ng-recaptcha': 'npm:ng-recaptcha/index.js',
then i get a different error:
GET http://10.0.0.5:3000/node_modules/ng-recaptcha/recaptcha/recaptcha.component 404 (Not Found)
for service and module as well :/
Am I missing something basic? red the instructions like 16 times already
I was able to create the custom provider to load the reCAPTCHA widget and allow for changing of the language. With two widgets on one page I get an error when loading:
The root looks to be that api.js is loaded multiple times.
Uncaught Error: ReCAPTCHA placeholder element must be empty
at Object.Vp [as render] (recaptcha__en.js:384)
at RecaptchaComponent.renderRecaptcha (recaptcha.component.js:69)
at SafeSubscriber._next (recaptcha.component.js:18)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at BehaviorSubject.Subject.next (Subject.js:55)
at BehaviorSubject.next (BehaviorSubject.js:44)
at window.ng2recaptchaloaded (locale-recaptcha-provider.ts:39)
After submitting and navigating away from the page,
ERROR Error: Uncaught (in promise): Error: Invalid ReCAPTCHA client id: 0
Error: Invalid ReCAPTCHA client id: 0
at Object.Xp [as reset] (recaptcha__en.js:386)
at recaptcha.component.js:63
at ZoneDelegate.invoke (zone.js:381)
at Zone.run (zone.js:141)
at NgZone.runOutsideAngular (core.es5.js:4019)
at RecaptchaComponent.grecaptchaReset (recaptcha.component.js:63)
at RecaptchaComponent.ngOnDestroy (recaptcha.component.js:25)
at callProviderLifecycles (core.es5.js:11145)
at callElementProvidersLifecycles (core.es5.js:11114)
at callLifecycleHooksChildrenFirst (core.es5.js:11098)
at Object.Xp [as reset] (recaptcha__en.js:386)
at recaptcha.component.js:63
at ZoneDelegate.invoke (zone.js:381)
at Zone.run (zone.js:141)
at NgZone.runOutsideAngular (core.es5.js:4019)
at RecaptchaComponent.grecaptchaReset (recaptcha.component.js:63)
at RecaptchaComponent.ngOnDestroy (recaptcha.component.js:25)
at callProviderLifecycles (core.es5.js:11145)
at callElementProvidersLifecycles (core.es5.js:11114)
at callLifecycleHooksChildrenFirst (core.es5.js:11098)
at resolvePromise (zone.js:757)
at resolvePromise (zone.js:728)
at zone.js:805
at ZoneDelegate.invokeTask (zone.js:414)
at Object.onInvokeTask (core.es5.js:4119)
at ZoneDelegate.invokeTask (zone.js:413)
at Zone.runTask (zone.js:181)
at drainMicroTaskQueue (zone.js:574)
at HTMLFormElement.ZoneTask.invoke (zone.js:480)
Hi, since I've implemented ng2-recaptcha, both development and production throw in console this issue or log
ReCAPTCHA couldn't find user-provided function: ng2recaptchaloaded
ERROR in /opt/lampp/htdocs/app/src/app/boot.ts (2,29): An import path cannot end with a '.ts' extension. Consider importing 'app.module' instead.
Hello,
I use router-outlet for navigation of some pages, each of them has a form using your invisible recaptcha.
When I get into one of these pages, and then move to another, I get this exception in my web browser's console:
Uncaught TypeError: Cannot read property 'render' of null
at Vp (recaptcha__en.js:380)
at Np.Hk (recaptcha__en.js:381)
at ZoneDelegate.webpackJsonp.606.ZoneDelegate.invokeTask (zone.js:414)
at Zone.webpackJsonp.606.Zone.runTask (zone.js:181)
at ZoneTask.invoke (zone.js:476)
at timer (zone.js:1491)
As far as I understand, it happens since the captcha tries to render itself again on the same page, and fails to do that in that previous element since it's not there anymore, because we just routed to a different page. Since there is no bug in recaptcha itself, I assume this issue should be taken care of in your component.
It sounds similar to this #35 issue, however I get a different exception.
Hopefully you can take a look into it and get it fixed and/or suggest me please I can go around it til then.
Thanks in advance!
I am trying to find a way to pause the client's UI success confirmation (checkbox resolves to checkmark), until after I've sent a request to Google with the token, and then received back the response that says it is a success.
When a user clicks to verify and only half completes the process, when they change view the test still shows up.
Hi, I want to know, as it's not specify in the documentation, how this new version work's with angular dynamic forms.
With the previous version i was able to handle the recaptcha with a "formControlName", but now i've got an error. Is there a solution or i need to pass via the resolve function? Thank's
Hi,
The forRoot()
method does not seem to work for me.
Here's my package.json:
{
"name": "my-project",
"version": "1.0.0",
"description": "My Project",
"author": "Alphero",
"contributors": [
"Martín Martínez"
],
"license": "UNLICENSED",
"engines": {
"node": ">=5.11.0",
"npm": ">=3.8.6"
},
"scripts": {
"reinstall": "rimraf node_modules && npm cache clean && npm install",
"postinstall": "npm run typings",
"typings": "typings install",
"updatetypings": "typings ls | awk '$2 ~ /.+/ {print $2}' | xargs -I {} typings i dt~{} -SG",
"prebuild": "rimraf dist",
"build": "webpack --config config/webpack.prod.js --progress --profile --bail",
"start": "webpack-dev-server --inline --progress --port 8079 --debug",
"test": "karma start"
},
"keywords": [],
"dependencies": {
"@angular/common": "^2.0.1",
"@angular/compiler": "^2.0.1",
"@angular/core": "^2.0.1",
"@angular/forms": "^2.0.1",
"@angular/http": "^2.0.1",
"@angular/platform-browser": "^2.0.1",
"@angular/platform-browser-dynamic": "^2.0.1",
"@angular/router": "^3.0.1",
"angular2-recaptcha": "^0.3.4",
"angular2-text-mask": "^2.1.0",
"core-js": "^2.4.1",
"headroom.js": "^0.9.3",
"moment": "^2.17.0",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23"
},
"devDependencies": {
"autoprefixer": "^6.4.1",
"browser-sync": "^2.16.0",
"browser-sync-webpack-plugin": "^1.1.3",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.22.0",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26",
"node-sass": "^3.10.0",
"null-loader": "^0.1.1",
"phantomjs-prebuilt": "^2.1.12",
"postcss-loader": "^0.13.0",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.4",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"ts-loader": "^0.8.1",
"tslint": "^3.15.1",
"typescript": "^2.1.0-dev.20160926",
"typings": "^1.4.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1",
"webpack-merge": "^0.14.1"
}
}
I get the forRoot() is not a function
error when going:
import { RecaptchaModule } from 'ng2-recaptcha';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
bootstrap: [MyApp],
declarations: [MyApp],
imports: [
BrowserModule,
RecaptchaModule.forRoot(), // Keep in mind the "forRoot"-magic nuances!
],
})
export class MyAppModule { }
Let me know if you need further information.
Cheers!
Martín.
When I apply new language, it works fine in development environment
ng serve
But when I try to build prod, I get error
ng build -prod
ERROR in Error encountered resolving symbol values statically. Calling function 'RecaptchaLoaderService', function calls are not supp
replacing the function or lambda with a reference to an exported function, resolving symbol AppComponent in /Users/
src/app/app.component.ts, resolving symbol AppComponent in /Users/ang/src/app/app.componeERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/ang/src
@ ./src/main.ts 4:0-74
@ multi ./src/main.ts
Then I have to remove RecaptchaLoaderService.
When I have <re-captcha>
apart of the component when I submit a form I get the following error:
ERROR DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.
I have the re-captcha component as part of the form:
<re-captcha siteKey="[removed]" formControlName="is_human"></re-captcha>
and only using it's value to validate the form. If it's not false, it is considered valid.
I'm wondering how to use this component with a real use for it, currently, it is not useful for some related functions from google, like firebase.auth.RecaptchaVerifier
See this:
https://angularfirebase.com/lessons/firebase-phone-authentication-with-angular-4-tutorial/
Is it possible to return the instance of RecaptchaVerifier so I can use it to log in?
Hi,
So I don't know if there is a way to do this, but my problem is the following:
I'm using the invisible captcha on my login page. It goes like this
<div class="form-buttons">
<div [class.enabled]="isValid() && !isPristine()" (click)="onSubmit();" class="submit-button">Login</div>
<re-captcha [size]="'invisible'" site_key="6Lfz2xsUAAAAABf0KnVEpLdJptBScodnOYpliVPA"></re-captcha>
</div>
And then
@ViewChild(ReCaptchaComponent) captcha: ReCaptchaComponent;
/**
* If the form is valid, handle form submission here
*/
onSubmit() {
if (this.isValid()) {
this.captcha.execute();
let token = this.captcha.getResponse();
if (token != "")
this.signIn();
}
}
So my problem is that when / if the captcha activates, the user validates it, but then has to click on the submit button again.
Would you know a way to submit the form at the captcha validation ?
Thanks in advance :)
I've pulled in this component and it works great. I have run into one issue. When displaying the page with the captcha, then navigating away from this page and then going back, the captcha isn't shown on the second load of the page. No console errors or anything.
Any idea what could cause that?
Hi have 2 components containing form on the same page, and I want to use invisible recaptcha in both of them.
I tried to use it twice, one recaptcha per component, and it looks to work almost, but I frequently get this JS error:
TypeError: null is not an object (evaluating 'a.style')
at Th (/recaptcha/api2/r20170503135251/recaptcha__fr.js:130:152)
at None (/recaptcha/api2/r20170503135251/recaptcha__fr.js:379:259)
at None ([native code])
at r (/vendor.e8ca299bdc7eb8a082ad.bundle.js:533:54252)
at runTask (/polyfills.e973013abdce7c05a842.bundle.js:36:3206)
So, I guess it is probably better to create the recaptcha in my main component, then get a reference to it using @ViewChild, and pass it to each of my sub-components as an Input().
And when submitting a form in one of my component, manually trigger:
this.recaptchaRef.execute();
But infortunately, this method does not return an observable nor provide any callback mechanism, and make it tricky to execute the form action in my sub-component once the captcha has been resolved.
Any suggestion to solve my issue, or any plan to support such a scenario?
I need to customize de css of my invisible recaptcha but there is no binding property to the data-badge attribute.
According to official invisible recaptcha doc (https://developers.google.com/recaptcha/docs/invisible) , there should be a ReCaptchaV2.Badge enum with the following values :
"bottomright", "bottomleft", "inline".
Summary says it all, see #30
The file should at least contain:
When I tried to debug the code I found this function:
RecaptchaComponent.prototype.execute = function () {
if (this.size !== 'invisible') {
return;
}
if (this.widget != null) {
this.grecaptcha.execute(this.widget);
}
};
and the problem is that this.widget
is undefined
.
"ng-recaptcha": "^3.0.0",
What am I missing here ?
hi,
The current release gives conflicts on dependencies
Angular 2.4.4 uses zone 0.7.2, but the current release of ng2-captcha uses 0.6.26.
Angular 2.4.4 release works with the ng2-translate release 1.4.0.
The difference i found is that zone v0.6.26 is added to the "peerdependency section" in "package.json"
This is the reason i get conflicts.
How can i resolve this issue? if i want to use the 1.5.0 version of ng2-translate
farhad
I was wondering if someone could point to webpack sample somewhere! I cannot get it up and running in webpack 2.
Since that other guy isn't going to do it, I will. The issue is completely explained in the title. PR to follow
Recaptcha is working as expected in my app. however,
The following errors are thrown in to developer console:
`[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha-loader.service.d.ts:3:22
Cannot find namespace 'ReCaptchaV2'.
[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha.component.d.ts:9:11
Cannot find namespace 'ReCaptchaV2'.
[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha.component.d.ts:10:10
Cannot find namespace 'ReCaptchaV2'.
[default] C:\www\myapp\node_modules\ng2-recaptcha\recaptcha\recaptcha.component.d.ts:11:10
Cannot find namespace 'ReCaptchaV2'.`
Thoughts on what is happening here?
I'd be happy to provide additional details if needed.
Angular2 - 2.0.0
[email protected]
I want to use the recaptcha multiple times, test it on my development with a different key as in production environment. In the latest angular 4 project created with angular/cli there is the following code within src/environment/environment.ts:
export const environment = {
production: false,
recaptcha_sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI' // site key for testing.
};
Later for production there will be another code. My question is: How to use this constant in the sidekey-Parameter of ng-recaptcha? It would be hard to exchange all occurences for production code.
I can't seem to make it work on systemjs. It finds ng2-recaptcha.noforms.js
but it fails on following requests:
[1] 17.01.30 04:46:34 404 GET /node_modules/ng2-recaptcha/recaptcha/recaptcha.component
[1] 17.01.30 04:46:34 404 GET /node_modules/ng2-recaptcha/recaptcha/recaptcha-loader.service
[1] 17.01.30 04:46:34 404 GET /node_modules/ng2-recaptcha/recaptcha/recaptcha-noforms.module
My system.config.js has followinf line to load:
'ng2-recaptcha' : 'node_modules/ng2-recaptcha/ng2-recaptcha.noforms.js'
And like readme explains I call from module
import { RecaptchaModule } from 'ng2-recaptcha';
Any idea what is wrong?
After taking pull, how to run sample ?
After loading, recaptcha steals the focus from the focused field.
It should be able to override the method Recaptcha.focus_response_field .
Thanks.
Under README.md for the section "Usage with required in forms", example given still uses <recpatcha> instead of <re-captcha>.
The 'expired-callback' located within the "recaptcha.component.ts" is not working as expected - specifically, its not emitting a null via the "resolved" EventEmitter;
I verified that the call back is fired, ie: the following code does result in "reset()" being executed:
'expired-callback': () => {
this.zone.run(() => this.reset());
},
However, within the reset method, the code never makes it past the "this.grecaptcha.getResponse" check; ie:
if (this.grecaptcha.getResponse(this.widget)) {
// Only reset the captcha and emit an event in case if something would actually change.
// That way we do not trigger "touching" of the control if someone does a "reset"
// on a non-resolved captcha.
this.grecaptcha.reset(this.widget);
this.resolved.emit(null);
}
It seems in every test I've performed, this method always returns an empty string after the recaptcha expires.
I'm not sure the best way to fix this; personally, I would think a good design would be to expose a new responseExpired EventEmitter, and let the developer subscribe to that to explicitly handle expiration; for example, perhaps we don't want to do an automatic reset of the recaptcha upon expiration.
As of the moment, including re-captcha
into a server-side rendered page will result in an error (see #33). The component should gracefully handle server-side rendering instead of erring out.
Hi,
The module looks interesting. But when looking at the instructions is not actually clear how to set it up.
See below:
import { RecaptchaModule } from 'ng2-recaptcha';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
bootstrap: [MyApp],
declarations: [MyApp],
imports: [
BrowserModule,
RecaptchaModule.forRoot(), // Keep in mind the "forRoot"-magic nuances!
],
})
export class MyAppModule { }
There you bootstrap and declare MyApp
which is never imported in this module.
(By the way, forRoot
did not do it for me. I get Property 'forRoot' does not exist on type 'typeof ReCaptchaModule'
error. I can raise a separate issue with more information if that'd help).
And then here:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<recaptcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></recaptcha>`,
}) export class MyApp {
resolved(captchaResponse: string) {
console.log(`Resolved captcha with response ${captchaResponse}:`);
}
}
platformBrowserDynamic().bootstrapModule(MyAppModule);
You declare a new component and then export MyApp
class. But at the end of this example you bootstrap your AppModule
which is never imported in the example.
Can you please check on that? I've been trying to use it and I'm not sure what I'm missing.
So if you can have the instructions corrected, that'd be awesome.
Thanks.
Cheers!
how to verify client side captcha with server side.
It seems that the model validation is upside down as in https://dethariel.github.io/ng-recaptcha/forms.
The whole example returns valid when should be invalid, what is an issue with other form component validation
Hello is there an example on how to use it with reactive forms module ?
Hi,
when I try to extract translation strings from my app using ng-xi18n I'm getting this error in recaptcha module... How can I fix this?
./node_modules/.bin/ng-xi18n -p ./src/tsconfig.json Error: Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha-loader.service.d.ts:1:1: Cannot find type definition file for 'grecaptcha'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha-loader.service.d.ts:6:23: Cannot find namespace 'ReCaptchaV2'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:1:1: Cannot find type definition file for 'grecaptcha'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:10:12: Cannot find namespace 'ReCaptchaV2'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:11:11: Cannot find namespace 'ReCaptchaV2'. Error at /app/node_modules/ng2-recaptcha/recaptcha/recaptcha.component.d.ts:12:11: Cannot find namespace 'ReCaptchaV2'. at UserError.Error (native) at new UserError (/app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/tsc.js:22:34) at check (/app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/tsc.js:73:15) at Tsc.typeCheck (/app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/tsc.js:148:9) at /app/node_modules/@angular/compiler-cli/node_modules/@angular/tsc-wrapped/src/main.js:56:23 at process._tickCallback (internal/process/next_tick.js:103:7) at Module.runMain (module.js:606:11) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) at bootstrap_node.js:509:3 Extraction failed
HI,
I'm using anular-cli for this project.
I've installed the typing using the following command
npm install @types/grecaptcha --save-dev
My root app module looks like this
import { BrowserModule } from '@angular/platform-browser';
import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { RecaptchaModule } from 'ng2-recaptcha';
import { routes } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module';
import { SharedModule } from './shared/shared.module';
import { ToasterModule, ToasterService } from 'angular2-toaster/angular2-toaster';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RecaptchaModule.forRoot(),
ToasterModule,
RouterModule.forRoot(routes, { useHash: true }),
SharedModule.forRoot(),
UserModule
],
providers: [ToasterService],
bootstrap: [AppComponent],
exports: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
After importing the module, in another module, UserModule (which is imported here) I'm using the element.
Thats when I'm getting this error in browser console.
zone.js:355Unhandled Promise rejection: Template parse errors:
'recaptcha' is not a known element:If 'recaptcha' is an Angular component, then verify that it is part of this module.
If 'recaptcha' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
After first time getting this message I added CUSTOM_ELEMENTS_SCHEMA in my root module as seen above, even after that I'm getting the same error.
Where I'm going wrong?
Thanks..
Is it possible to dynamically change the language of the recaptcha when it is already loaded on the screen?
Hi, could you help me please with this error, some other package display the same message, what could be?
The error is in the /dist/main-server.js file.
I'm using a Net Core SPA project with angular 2, if you need more info tell me,
Thanks.
I followed the guide on the front page for the invisible captcha.
I have referenced captcha in my .ts file
@ViewChild('captchaRef') public captcha: RecaptchaComponent;
and in my html I got this
<re-captcha #captchaRef="reCaptcha" size="invisible" siteKey="super-secret-key" (resolved)="resolved($event)"></re-captcha>
I am calling this.captcha.execute()
to trigger execution but how do I call resolved(event)? When I try to assign this.captcha.resolved I get an EventEmitter. I am still pretty new to Angular so not sure what to do with that information. I tried using this.captcha.resolved.emit(); but what am I supposed to emit?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.