g_recaptcha_v3 0.0.6 copy "g_recaptcha_v3: ^0.0.6" to clipboard
g_recaptcha_v3: ^0.0.6 copied to clipboard

Platformweb

Google reCAPTCHA v3 plugin for Flutter Web. A Google reCAPTCHA is a free service that protects your website from spam and abuse.

g_recaptcha_v3 #

Create Google reCAPTCHA v3 token for Flutter web. Google reCAPTCHA v3 plugin for Flutter. A Google reCAPTCHA is a free service that protects your website from spam and abuse.

Pub MIT License

Web Demo


Preparation #

Step 1

Step 2

  • Add the script inside web/index.html - <head> tag
  • Place it before the main.dart.js script (or) flutter.js script
<head>
  .
  .
  <!-- Step 2 -->
  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>
  <!-- Step 2 End -->
  .
  .
  <script src="flutter.js" defer></script>
</head>

Step 3

  • Add g_recaptcha_v3 to pubspec.yaml
  flutter pub add g_recaptcha_v3

Development #

1. GRecaptchaV3.ready() #

The ready() method should be called before execute()

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; //--1

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if(kIsWeb){
    bool ready = await GRecaptchaV3.ready("<your Recaptcha site key>"); //--2
    print("Is Recaptcha ready? $ready");
  }
  runApp(const MyApp());
}

2. GRecaptchaV3.execute() #

The ready() method should be called before execute()

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void generateToken() async {
  String? token = await GRecaptchaV3.execute('<your_action>'); //--3
  print(token);
  // send token to server and verify
}
  • String action - used to verify the string in backend. ( action docs )
  • token will be null if the,
    • web setup has any errors.
    • method called from other than web platform.

3. Show / Hide reCaptcha badge #

change the reCaptcha badge visibility

    GRecaptchaV3.showBadge();
    GRecaptchaV3.hideBadge();

Warning!!! #

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.`

Sample Image

alternate way

Read more about hiding in reCaptcha docs #

Web Port 80 setup #

(for localhost only)

If in case recaptcha script gives you error for port other than port :80, you can use the following code to setup the port.

  flutter run -d chrome --web-port 80

FAQ #

Q: How to hide reCaptcha until / before Flutter render its UI?

A: https://github.com/bharathraj-e/g_recaptcha_v3/issues/3

50
likes
160
pub points
94%
popularity

Publisher

unverified uploader

Google reCAPTCHA v3 plugin for Flutter Web. A Google reCAPTCHA is a free service that protects your website from spam and abuse.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_web_plugins, js

More

Packages that depend on g_recaptcha_v3