Comments (10)
This error only occurs sometimes in production, so I can't get a better stacktrace.
I tried locally your solution, and it looks good, so I will deploy in to production and let you know if it works.
If yes, it could be good to document the solution.
Here is what I did:
Main component
<!-- AccountLogin.html -->
<!-- declare captcha -->
<re-captcha #recaptchaRef="reCaptcha" size="invisible" siteKey="***"></re-captcha>
<!-- pass a reference to sub-components -->
<tw-account-reset-form [recaptchaRef]="recaptchaRef"></tw-account-reset-form>
<tw-account-create-form [recaptchaRef]="recaptchaRef"></tw-account-create-form>
// AccountLogin.ts
import {RecaptchaComponent} from 'ng-recaptcha';
export class AccountLogin {
@ViewChild('recaptchaRef')
recaptchaRef: RecaptchaComponent;
Sub form 1 & 2
// AccountResetForm.ts
import {RecaptchaComponent} from 'ng-recaptcha';
export class AccountResetForm {
@Input()
recaptchaRef: RecaptchaComponent;
captchaResolved(){
// form submitted, do something
}
tryToSubmit() {
this.recaptchaRef.resolved.first().subscribe((captchaResponse) => this.captchaResolved(captchaResponse), err => {
console.log('[AccountSigninEmail] Error resolving captcha', err);
}, () => {
// finally
this.recaptchaRef.reset();
});
this.recaptchaRef.execute()
}
}
I guess it is important to subscribe to the first emitted item only, and also to reset the component in the final block.
Also, when the first visible captcha appeared, I got the following error locally (not sure it can help!):
TypeError: a.la is null
Vp()
recaptcha__fr.js:393
Np.prototype.Hk()
recaptcha__fr.js:394
[1781]/</</ZoneDelegate.prototype.invokeTask()
polyfills.bundle.js:7597
[1781]/</</Zone.prototype.runTask()
polyfills.bundle.js:7364
ZoneTask/this.invoke()
polyfills.bundle.js:7659
timer()
But there is no side-effect for the user, as the captcha shows and works correctly.
from ng-recaptcha.
@ch-hristov hi! yes, I did.
from ng-recaptcha.
recaptcha.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class RecaptchaService {
private recaptchaSource = new BehaviorSubject<Boolean>(false);
getStatus = this.recaptchaSource.asObservable();
constructor() { }
public setStatus(option: Boolean) {
this.recaptchaSource.next(option);
}
}
sign-up-layout.html
<mat-tab-group>
<mat-tab>
<app-form-user></app-form-user>
</mat-tab>
<mat-tab>
<app-form-company></app-form-company>
</mat-tab>
</mat-tab-group>
<!-- ReCaptcha invisible -->
<re-captcha size="invisible" #recaptchaRef="reCaptcha"></re-captcha>
import { RecaptchaComponent } from 'ng-recaptcha';
import { RecaptchaService } from '@core/services';
@ViewChild('recaptchaRef') recaptchaRef: RecaptchaComponent;
...
class SignUpLayout
...
ngAfterViewInit() {
this.recaptchaRef.resolved.subscribe((response) => {
// Captcha valid
this.recaptchaService.setStatus(true);
}, error => {
console.error('[AccountSigninEmail] Error resolving captcha');
this.recaptchaService.setStatus(false);
this.recaptchaRef.reset();
});
}
onSubmit(event) {
console.log(event);
if (!this.recaptchaStatus) {
// If recatpcha status is not resolved then execute recaptchaRef
this.recaptchaRef.execute();
}
}
...
from ng-recaptcha.
Hi, @Toub !
As to the error that you mentioned - it's very hard to navigate through webpack-uglified vendor bundle, could you provide a non-obfuscated stack trace for further investigation?
As to how you can solve the issue. Since you already have the recaptchaRef
, you can use the resolved
event emitter:
this.recaptchaRef.resolved.subscribe((response) => /* stuff */);
this.recaptchaRef.execute();
Would that suffice?
from ng-recaptcha.
Labelling this as "question"
until more info on the error is provided. Will convert to "bug"
if the error occurs in ng-recaptcha
code
from ng-recaptcha.
@Toub could you please re-verify the issue? It could have been resolved by a recaptcha update, as mentioned in #38 (comment)
from ng-recaptcha.
I updated and published to prod, but I still see the following issue in the logs reported by sentry tracker (not sure if it is related to the fact I have multiple forms):
TypeError: Cannot read property 'style' of null
at Ih (/recaptcha/api2/r20170531093331/recaptcha__fr.js:122:430)
at Qo (/recaptcha/api2/r20170531093331/recaptcha__fr.js:389:41)
at vp.Ko.Jb (/recaptcha/api2/r20170531093331/recaptcha__fr.js:388:283)
at Kp.f.Hi (/recaptcha/api2/r20170531093331/recaptcha__fr.js:404:180)
at km.<anonymous> (/recaptcha/api2/r20170531093331/recaptcha__fr.js:236:367)
It could also be related to a network problem loading google captcha itself.
from ng-recaptcha.
@Toub it looks like reCAPTCHA is being loaded successfully. I assume that you are right, and this error indeed appears due to the fact that there are multiple reCAPTCHA components on a page. reCAPTCHA seems to have problems with such a pattern. Since you haven't been able to reproduce the issue in DEV environment it's hard to tell whether it has an impact on the end user or not. Unfortunately, there's little I can do at this point to help mitigate this. My suggestion would be to refactor two forms in such a way that there is at maximum one recaptcha shown.
from ng-recaptcha.
Hello, I have the same problem with the two forms and the solution that implements the next, to see what you think.
// service.ts
@Injectable()
export class RecaptchaService {
private recaptchaSource = new BehaviorSubject<Boolean>(false);
getStatus = this.recaptchaSource.asObservable();
constructor() {}
public setStatus(option: Boolean) {
this.recaptchaSource.next(option);
}
}
// child component.ts
@Output() submit: EventEmitter<any> = new EventEmitter<any>();
// parent component.ts
@ViewChild('recaptchaRef') recaptchaRef: RecaptchaComponent;
recaptchaStatus: Boolean = false;
constructor(private recaptchaService: RecaptchaService) { }
ngOnInit() {
//subscribe to recaptcha service
this.recaptchaService.getStatus.subscribe(status => {
this.recaptchaStatus = status;
console.log(status);
});
}
ngAfterViewInit() {
console.log(`ngAfterViewInit`, this.recaptchaRef);
//if recaptcha is resolved then send HTTP request!
this.recaptchaRef.resolved.first().subscribe(
captchaResponse => {
this.recaptchaService.setStatus(true);
console.log(`Captcha valid, sending HTTP request...`);
},
err => {
console.log('[AccountSigninEmail] Error resolving captcha', err);
//set false to recaptcha status
this.recaptchaService.setStatus(false);
},
() => {
//finally reset reCaptcha
this.recaptchaRef.reset();
}
);
}
onSubmit(event) {
//on Submit execute recaptchaRef
this.recaptchaRef.execute();
}
from ng-recaptcha.
@Bodeclas hi, did you manage to solve it?
from ng-recaptcha.
Related Issues (20)
- ng-recaptcha _502-gateway issue HOT 1
- Angular v16 support HOT 10
- Getting accessibility issue using JAWS screen reader when using recaptcha v2 sitekey HOT 6
- There is no way to know if a user pressed escape on the puzzle HOT 1
- What is the recommended way to load recaptcha when site key comes from back-end HOT 4
- Invalid site key or not loaded in api.js HOT 2
- Invisible using overloaded submit loses token and doesn't recover HOT 3
- Help!!!
- No way to make v3 invisible HOT 2
- Add support for Trusted Types HOT 1
- Cannot vertically scroll images in recaptcha on mobile popup HOT 1
- Can't bind to 'siteKey' since it isn't a known property of 're-captcha' HOT 3
- Feature Request Support for WAF HOT 1
- Standard Angular Standalone app giving NullInjectionError: R3InjectorError error HOT 2
- Upgrade to Angular 17? HOT 6
- Angular v17 Support HOT 1
- How to handle errors on older Angular and ng-recaptcha versions
- Issue with Recaptcha Loading
- Chrome Issue: recaptcha Reading cookie in cross-site context will be blocked in future Chrome versions
- Angular 18 Support HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-recaptcha.