bharathraj-e / g_recaptcha_v3 Goto Github PK

Hello,

When I try to run the recaptcha on a production environment get the following error. I use Firebase Hosting

Error Message
XMLHttpRequest cannot load https://www.google.com/recaptcha/api/siteverify due to access control checks.

Is there a step in the implementation that I am missing. Thank you.

hi) is it possible to add the script programmably?

<script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>

I tried to implement flavors, but creating ScriptElement doesn't help( The app sees this script only afte hot reload

  void _createReCaptchaScript(String token) {
    final script = ScriptElement()
      ..id = 'recaptcha_script'
      ..src = 'https://www.google.com/recaptcha/api.js?render=$key';
    document.head?.append(script);
  }

@bharathraj-e Google ReCaptcha is not displaying in live mode also throw the error please check it and give me solution for that overall very good package for google reCaptcha thank you

is there any option to upgrade this package to new package:web of flutter 3.19

Thanks for sharing, I downloaded the example, but it doesn't work.Do you need any other configuration?

Hi,
first thanks for your plugin!
I have an issue that at first if I added GRecaptchaV3.hideBadge() It will no show the badge but after I refresh the app is showing the page again,
thank you1

Hello, I used this package with the tutorial which link is below

https://levelup.gitconnected.com/how-to-implement-google-recaptcha-v3-in-flutter-web-38000139bbc0

but when I run project in debug mode recaptcha verification is completed successfully. After then, I deploy my project on Firebase hosting, isNotABot function returns null. All of my codes are as same as tutorial. I do not get error, and I do not know why this function return null. I added my domain address on Firebase to recapctha settings.

Token does not get generated.

NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.ready'
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.execute'

To add possibility to compile WASM in the projects its necessary update de js library to 0.7.1

I've checked almost any other issue here,
What I've understand is that we need a html file working in a API/Website, and then we need to redirect user to that View by using WebView widget than the google will handle the visual part.

My question is that, what if we want that visual part with in a page,
For example we have a login page, an username input, a password input, and then a submit button.
When user fails to enter password right for at least 2 times I want to check that if user is a human by recaptcha.
A Webview should apper between the password and submit button (or at the bottom) to show user that they have to submit recaptcha.

The problem is if I basicly put a Weview there, I dont know how much height I should give it. And will it expand when the bigger modal shown. Will it be responsive to other screen aspect ratios?

If I use a Stack Widget, that contains all other widgets in a Column, and captcha as other child, I can maybe simulate the height requested by the Recaptcha on the other hand and the modal pop-up will be shown normally.

Anyone tried that ? How to put a recaptcha in between a FlutterUI design? Basicly I dont want to put a HTML page in my app.

Thank you for creating such a great package. I hope this demo tutorial & article would be fruitful in promoting your hard efforts. I have deployed the code on firebase hosting.

I followed this answer from Stack Overflow, but no luck.

The below code goes straight to the catch block because of CORS.

Source Code

static Future<RecaptchaResponse?> _getVerificationResponse() async {
    _token = await GRecaptchaV3.execute('submit') ?? '';

    _token.isEmpty
        ? debugPrint('Token Empty!')
        : debugPrint('Token is generated successfully!');

    RecaptchaResponse? _recaptchaResponse;

    if (_token.isNotEmpty) {
      try {
        /// Holds the body parameter for the HTTP request.
        final _bodyParameters = {
          'secret': Config.secretKey,
          'response': _token,
        };

        debugPrint(_bodyParameters.values.toList()[1]);

        debugPrint('POSTING...');

        var response = await http.post(
          Config.verificationURL.replace(queryParameters: _bodyParameters),
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
          },
        );

        debugPrint(response.body);
        debugPrint(response.reasonPhrase);

        _recaptchaResponse = RecaptchaResponse.fromJson(response.body);
      } on http.ClientException catch (e) {
        debugPrint('In Catch Block');
        debugPrint(e.uri.toString());
        debugPrint(e.message);
      }
    }
    return _recaptchaResponse;
  }

Log

main.dart.js:18117 gRecaptcha V3 ready

main.dart.js:18117 Token is generated successfully!

main.dart.js:18117 03AGdBq25efrSnywQ8nNxtm-_kh-YUDpl0z2bQ3cmkmXQ0-vTNThGAM-2Du_k05aPmmFS5NWMtwSDVekc2jv6JBJQJimBH6V2115ZiyZ2KjbA3bRWcyTfwfr_tDWI6dc4FQYnucSqyB8ALi_DusMvt3vuZyrfqkqzOYcUntE0x-lk56Zno4e5E7zLl0r6c2-hs0DVVgzkaruh5mBuuhWdA8-zJOpGZibq2Kq57rii_1iGSPp3jopI1ieFUVSs962Qc-yNSywfJPFzDXd0AzwgX-SFbFEk2IOnQ2Jm5GwQ4haH1PiXyPivVxJxyNrYJc3s1WoDCiMZDrsPEa_CgRLZc91m1dstutSTAB3vztnmxcfjDM7wyZs43Z3rSoCdWMZVq6xEKQAP0um-oaiHdroAG-RAlMHWsBChtauCPlFtelWq7-PW8spy1nC1vL3az1427hqAo84ZfVUgzOD_TGLoEWp-XjgGG8H2Wr_kCKxTEB7bWy-B6ad-horizUS5hq7Z2LjxXSW-PGYjS

main.dart.js:18117 POSTING...

/#/:1 Access to XMLHttpRequest at 'https://www.google.com/recaptcha/api/siteverify?secret=the-recaptcha-secret-key&response=03AGdBq25efrSnywQ8nNxtm-_kh-YUDpl0z2bQ3cmkmXQ0-vTNThGAM-2Du_k05aPmmFS5NWMtwSDVekc2jv6JBJQJimBH6V2115ZiyZ2KjbA3bRWcyTfwfr_tDWI6dc4FQYnucSqyB8ALi_DusMvt3vuZyrfqkqzOYcUntE0x-lk56Zno4e5E7zLl0r6c2-hs0DVVgzkaruh5mBuuhWdA8-zJOpGZibq2Kq57rii_1iGSPp3jopI1ieFUVSs962Qc-yNSywfJPFzDXd0AzwgX-SFbFEk2IOnQ2Jm5GwQ4haH1PiXyPivVxJxyNrYJc3s1WoDCiMZDrsPEa_CgRLZc91m1dstutSTAB3vztnmxcfjDM7wyZs43Z3rSoCdWMZVq6xEKQAP0um-oaiHdroAG-RAlMHWsBChtauCPlFtelWq7-PW8spy1nC1vL3az1427hqAo84ZfVUgzOD_TGLoEWp-XjgGG8H2Wr_kCKxTEB7bWy-B6ad-horizUS5hq7Z2LjxXSW-PGYjS' from origin 'https://recaptchav3test-b9edb.web.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

main.dart.js:18117 In Catch Block

main.dart.js:18117 XMLHttpRequest error.

main.dart.js:18117 false

IF not there a problem with other libraries

js ^0.7.0 is the required version for satisfied the compilation