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

Web Demo

Preparation

Step 1

Step 2 No need / automatically added by plugin

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

Libraries

g_recaptcha_v3