Skip to content

Bugfix: enterprise recaptcha not loading properly #1526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: v3
Choose a base branch
from
Open

Bugfix: enterprise recaptcha not loading properly #1526

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ab22751
fix: add recaptcha enterprise load validation
mateusmcordeiro Feb 5, 2024
957b817
bugfix: grecaptcha not aways load on mounted
mateusmcordeiro Mar 21, 2024
cdb70f0
add if scope defined
mateusmcordeiro Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 21 additions & 8 deletions src/script-manager/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { LiteralUnion, Opaque } from 'type-fest'
import pDefer from 'p-defer'
import defu from 'defu'
import pDefer from 'p-defer'
import type { LiteralUnion, Opaque } from 'type-fest'
import { warn } from '../utils'

export type RecaptchaCallback = '__vueRecaptchaLoaded'
Expand Down Expand Up @@ -33,10 +33,15 @@ export interface GRecaptcha {
execute(widgetId: WidgetID): void
execute(siteKey: string, options: { action: string }): Promise<string>
}
interface ExtendedGRecaptcha extends GRecaptcha {
enterprise?: GRecaptcha;
}



declare global {
interface Window {
grecaptcha: GRecaptcha & { enterprise?: GRecaptcha }
grecaptcha: ExtendedGRecaptcha
__vueRecaptchaLoaded: () => void
}
}
Expand Down Expand Up @@ -134,12 +139,20 @@ export function normalizeParams(raw: RecaptchaParams): string[][] {
export function toStringPair(params: RecaptchaParams): string[][] {
return Object.entries(params).filter((pair): pair is [string, string] => typeof pair[1] === 'string')
}

export function checkRecaptchaLoad() {
if (typeof window === 'undefined') return false
if (typeof window === 'undefined') return false;

const isLoaded = () => 'grecaptcha' in window && (
'execute' in window.grecaptcha ||
'execute' in (window.grecaptcha?.enterprise ?? {})
);

const isLoaded = Object.hasOwn(window, 'grecaptcha') && Object.hasOwn(window.grecaptcha, 'execute')
if (isLoaded) recaptchaLoaded.resolve()
const interval = setInterval(() => {
if (isLoaded()) {
recaptchaLoaded.resolve();
clearInterval(interval);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The design here is rely on the onload callback from reCAPTCHA. So I didn't put a polling here. Does the onload callback not work with enterprise version?

}
},500);

return isLoaded
return isLoaded();
}