basaran / svelte-recaptcha-v2 Goto Github PK

Hello!

Having some issues using the re-captcha in my svelte app. I manage to get the ready state to fire, but then all I get is this error:

caught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
    at Ci.Yy.w8 (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:721:217)
    at Array.<anonymous> (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:40:284)
    at Object.init (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:730:258)
    at https://www.google.com/recaptcha/api2/bframe?hl=en&v=85AXn53af-oJBEtL2o2WpAjZ&k=6LfetkseAAAAAM2BZdN4nLPitmM3skOeY9_jkqyq:184:30

Has anyone seen this before? I've tried adding the captcha as a div I render on it's own but I get the same issue in the end.

Does it need to be hosted on a web server rather than just localhost? Not sure why it would work for others.

My project uses Typescript, and I would love to fully use this package, however, since my project uses Typescript, I cannot fully use it. I may try to write my own type declarations, and submit a pull request, but for now, I won't. This would really help me and others who need Typescript support. I can, for now, just do this in my .d.ts file:

declare module "svelte-recaptcha-v2"

so Typescript will work, however, this does not provide the error catching and intelisense that full Typescript supports.

When verifying the token given through this package i get 0.00 ranking, anyone have a solution?

Thank you

First of all thank you making it easier to integrate ReCAPTCHA! :)

I'm using the latest version of sveltekit (SvelteKit v1.0.0-next.203) and just followed your instructions in the README one-by-one.

When I start the dev environment with npm run dev -- --open, I run into the error message below and the page won't get loaded at all.

My svelte.config.js looks like this:

import adapter from '@sveltejs/adapter-static';
import sveltePreprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: sveltePreprocess(),
	kit: {
		adapter: adapter({
			// default options are shown
			pages: 'build',
			assets: 'build',
			fallback: null,
			precompress: false
		}),
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};

export default config;

Error Message

[vite] Error when evaluating SSR module /node_modules/debug/src/index.js?v=338ddabd:
ReferenceError: module is not defined
    at /node_modules/debug/src/index.js?v=338ddabd:9:2
    at instantiateModule (/Users/**********/node_modules/vite/dist/node/chunks/dep-24a6b4c4.js:60096:15)

Do you know what the problem is? I don't even need SSR, it will be just a static page, but since the features even state 'svelte server side rendering (SSR) friendly', I guess I'm doing something wrong? 😅

Every time the captcha is successful, it reloads itself.

Same thing happens on the demo https://basaran.github.io/svelte-recaptcha-v2/demo/

Edit: Why is it resetting on success?!
https://github.com/basaran/svelte-recaptcha-v2/blob/261c1a7e53d3c705e456aa781c07ecdfe2a62d37/src/Recaptcha.svelte#LL90C9-L90C61

As per your instructions we are doing:

recaptcha.execute()
Promise.resolve(observer)

But observer seems to hang when trying to resolve its promise. We cant seem to get past this.

I am having the below error while doing import { Recaptcha, recaptcha, observer } from "svelte-recaptcha-v2";

SyntaxError: The requested module '/node_modules/debug/src/browser.js?v=9e58a267' does not provide an export named 'default'

I am using:

"@sveltejs/kit": "^1.0.0-next.221"
"@sveltejs/adapter-node": "^1.0.0-next.55"
"svelte-recaptcha-v2": "^0.0.2"

After importing the module with the line:
import { Recaptcha, recaptcha, observer } from "svelte-recaptcha-v2";

I immediately get the following build error when compiling:

[!] Error: Unexpected token
node_modules/svelte-recaptcha-v2/node_modules/debug/src/browser.js (119:45)
117:   // initialized. Since we know we're in Chrome, we'll just detect this case
118:   // explicitly
119:   if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
                                                   ^
120:     return true;
121:   }
Error: Unexpected token
    at error (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at Module.error (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:9824:16)
    at tryParse (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:9717:23)
    at Module.setSource (/home/node/app/node_modules/rollup/dist/shared/node-entry.js:10080:33)
    at /home/node/app/node_modules/rollup/dist/shared/node-entry.js:12366:20
    at async Promise.all (index 3)
    at async Promise.all (index 0)
    at async Promise.all (index 3)
    at async Promise.all (index 12)
    at async Promise.all (index 2)`

Let me know if there's any other details I should give to be more helpful :)

what is the userTracker ? it is undefined for me. Also do i need a v2 key ? where would i use the secret key ? does it work with enterprise key too ?

Is there any way to render multiple reCaptcha in same page ?

Would you mind moving svelte-recaptcha-v2 to NPM instead of PNPM?

Most people use NPM and I had lots of trouble with PNPM (pnpm/pnpm#724 (comment)), that's why I'm unable to use svelte-recaptcha-v2, even though the project looks great and I'd really like to use it.

Please consider it. Thank you.

Seeing the above error when trying to add:

<Recaptcha sitekey={recaptchatoken}
             badge={"inline"}
             size={"normal"}
             on:success={onCaptchaSuccess}
             on:error={onCaptchaError}
             on:expired={onCaptchaExpire}
             on:close={onCaptchaClose}
             on:ready={onCaptchaReady} />

Does this need to sit inside of some placeholder div? If so what id/class is required?

If component wrapped into {if} block, then on:ready event never fired.
Repl: https://svelte.dev/repl/95841074fe1648cf883b2cd5cffde2f1?version=4.2.2
The key in a repl could be wrong, but the problem exists in a wild life also. Currently, I've just added a button to manual launch execute, as in an example. But it would be nice to avoid an additional step, and subscribe to an event.

PNPM does not download types, resulting in error:

1. Could not find a declaration file for module 'svelte-recaptcha-v2'. '/path/to/project/node_modules/.pnpm/[email protected]/node_modules/svelte-recaptcha-v2/dist/index.js' implicitly has an 'any' type.

Hi,

Great package. Could you please specify the license for this module?

Thanks.