Create Google reCAPTCHA v3 token for Flutter web.

Overview

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 - <body> tag
  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>

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();
  await GRecaptchaV3.ready("<your Recaptcha site key>"); //--2
  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 - 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
Comments
  • Always showing badge

    Always showing badge

    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

    opened by hmbenhaim 3
  • Handle CORS Issue

    Handle CORS Issue

    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
    
    opened by Zujaj 1
  • Example and or library is not working.

    Example and or library is not working.

    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'
    
    opened by Eliasdevlb 1
  • Recapthca v3 isNotABot function return null value

    Recapthca v3 isNotABot function return null value

    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.

    opened by cerenyasa97 5
Releases(v0.0.4)
Owner
Bharathraj
Flutter Developer, TN INDIA
Bharathraj
In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application using JWT Token Authentication.

Flutter Login & Register with Node JS Rest API In this video we will learn how to Integrate NodeJS Login and Register API in our Flutter application u

SnippetCoder 18 Nov 28, 2022
Custom style-dictionary transforms and formats to generate Flutter resources from a Figma Design Token plugin export..

style-dictionary-figma-flutter An extension to style-dictionary to support more custom types with Flutter as target platform. It supports the custom t

Aloïs Deniel 24 Dec 30, 2022
An intuitive Token Parser that includes grammar definition, tokenization, parsing, syntax error and debugging. Implementation based on Lexical Analysis for Dart.

Token Parser An intuitive Token Parser that includes syntax/grammar definition, tokenization and parsing. Implementation based on Lexical Analysis. Re

JUST A SNIPER ツ 2 Dec 15, 2022
A note-taking app powered by Google services such as Google Sign In, Google Drive, and Firebase ML Vision.

Smart Notes A note-taking app powered by Google services such as Google Sign In, Google Drive, and Firebase ML Vision. This is an official entry to Fl

Cross Solutions 88 Oct 26, 2022
Flutter google maps - Flutter google maps Example

google_maps_example Development Setup Clone the repository and run the following

Isaac Pitwa Nyonyintono 12 Oct 23, 2022
A Demo application📱 which stores User feedback from 💙Flutter application into Google Sheets🗎 using Google AppScript.

?? Flutter ?? to Google Sheets ?? A Demo application which stores User feedback from Flutter application into Google Sheets using Google AppScript. Yo

Shreyas Patil 289 Dec 28, 2022
Google mobile ads applovin - AppLovin mediation plugin for Google Mobile Ads (Flutter).

AppLovin mediation plugin for Google Mobile Ads Flutter Google Mobile Ads Flutter mediation plugin for AppLovin. Use this package as a library depende

Taeho Kim 1 Jul 5, 2022
Google one tap sign in - Flutter Google One Tap Sign In (Android)

Google One Tap Sign In Google One Tap Sign In (Android) A Flutter Plugin for Goo

null 6 Nov 23, 2022
A google browser clone which is made by using flutter and fetching the google search api for the search requests.

google_clone A new Flutter project. Project Preview Getting Started This project is a starting point for a Flutter application. A few resources to get

Priyam Soni 2 May 31, 2022
Google-news-app-redesign - Redesigned the ui of google news app with flutter

News app like Google news! ScreenShots If you face any problem with this project

Munem Sarker 3 Jun 23, 2022
Google play scraper for flutter and dart created form

Google Play Store Scraper Dart and Flutter Google Play Store Scraper for flutter and dart helps you to get apks information from google play store. Im

Sifat 3 Sep 14, 2022
Get google api credentials - A Dart CLI app to obtain credentials for accessing Google APIs

get_google_api_credentials A Dart CLI app to obtain credentials for accessing Go

null 1 Jan 28, 2022
Flashcard App where you can learn different topics and create your own flashcards in Google Drive.

flashcard_project Flashcard app connected with Google Spreadsheet Getting Started This is a Flutter Project that works on iOS, Android, Web and MacOS.

Max Weber 11 Oct 24, 2022
Simple tool to open WhatsApp chat without saving the number, developed using Google's Flutter Framework. for Android/ IOS/ Desktop/ Web

OpenWp Simple tool to open WhatsApp chat without saving the number Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About

Swarup Bhanja Chowdhury 15 Nov 1, 2022
Dart Web API Template Using Google Shelf Framework and Postgres Drivers, read readme to learn how to use

Shelf Web Framework Template by Alex Merced of AlexMercedCoder.com Cloning the Template git clone https://github.com/AlexMercedCoder/DartShelfPostgres

Alex Merced 16 Dec 26, 2022
Aris fltrtuber - Flutter Web App to list top 30 YouTubers who create tutorial on Flutter

Fluttuber - Top 30 Flutter YouTubers Flutter Web App to list top 30 YouTubers wh

Behruz Hurramov 3 Jan 27, 2022
flutter web app with given code and example. Step by step teaching how to build a flutter web app with backend

flutter_web A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

dbestech 20 Oct 26, 2022
Flutter-web-portfolio - A Basic web portfolio built using flutter

My Flutter Web Portfolio It is a basic flutter web portfolio. 1. Home To use thi

Aleyna Eser 2 May 30, 2022
Flutter web socket - Flutter Web Socket Example

web_socket_example A new Flutter Web Socket project. Getx and web_scoket_channel

Gizem Malçok 7 Nov 2, 2022