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.
- Create your keys 🗝
- ReCaptcha Docs
- For development, add
localhostas domain in reCaptcha console
- Add the script inside
web/index.html-<head>tag - Place it before the
main.dart.jsscript (or)flutter.jsscript
<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>- Add
g_recaptcha_v3to pubspec.yaml
flutter pub add g_recaptcha_v3The 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());
}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 )tokenwill be null if the,- web setup has any errors.
- method called from other than web platform.
change the reCaptcha badge visibility
GRecaptchaV3.showBadge();
GRecaptchaV3.hideBadge();You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.`
Sample Image
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 80Q: How to hide reCaptcha until / before Flutter render its UI?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent