An all-in-one package for adding HCaptcha to your flutter app!

Overview

hCaptcha Flutter

During one of the projects I was working on, I found out that there aren't any "solid enough" captcha implementations in Flutter.

After following [https://medium.com/@hCaptcha/implementing-hcaptcha-in-your-flutter-app-13ea6ddca71b](this official guide) on https://www.hcaptcha.com/, I decided to make an "all-in-one" solution, that takes care of the state and widgets needed to get HCaptcha Working with your flutter project.

This Repository is part of the Hacktoberfest 2021 challenge! If it seems kind of empty, it's because it's intentionally left this way. Take a look at the issues tab for stuff that needs doing, and earn yourself a free T-Shirt along the way!

Features:

  • Uses Flutter BLOC to manage the state.
  • Provides a class for adding any of your data (eg form data) when solving the captcha.

Captcha HTML Page creation:

For this package to work, we assume that the app you're developing client-server based, meaning that there's a backend to support it.

Before you take care of the package installation and implementation, you'll need to add a simple HTML page to your server (Don't forget to add your secret key!!!):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Captcha Challenge</title>
    </head>

    <body>
        <div style="display: flex; justify-content: center;">
            <form method="POST">
                <div class="h-captcha" data-sitekey="YOUR_SECRET_GOES_HERE" data-callback="captchaCallback"></div>
                <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
            </form>
        </div>

        <script>
            function captchaCallback(response) {
                if (typeof Captcha!=="undefined") {
                    Captcha.postMessage(response);
                }
            }
        </script>
    </body>
</html>

This page takes care of serving your Captcha to your mobile device. The Captcha thing inside the <script> is where the magic happens. This is a JavaScript Channel and its job is to pass the data back to the Flutter App, using the integrated WebView (which we'll set up in the next step).

In this case, we'll assume that the URL pointing to this page is myapp.kgiannakis.me/captcha-challenge.

Installation:

Note: For now and until most of the scaffolding work of the project is complete, in terms of documentation and such, the project will only be published here and not on pub.dev.

  1. Clone this plugin to a directory of your choice.

  2. Include it in your pubspec file:

dependencies:
  ...
  hcaptcha_flutter:
    path: ../hcaptcha_flutter
  1. Create a HCaptchaProvider:
HCaptchaProvider(
  captchaUrl: "https://myapp.kgiannakis.me/captcha-challenge",
  onPreCaptcha: const SomeForm(),
  onCaptcha: const CaptchaScreen(),
  onCaptchaCompleted: (result, cbloc, data) {
    // This is the part where you pass the result to the server for verification
    final username = data.getData(key: "username");
    log(result);
    log(username);
  })

This provides the scaffolding work of the captcha process. It injects a CaptchaBloc to the widget tree along with a CaptchaDataContainer. Think of the data container as a method to temporarily store stuff when dealing with a captcha challenge.

  1. Inside your form, add the Captcha Logic when submitting:
if (_formKey.currentState!.validate()) {
  // Add the username to the data container.
  var dataContainer = CaptchaUtils.getDataContainer(context);
  dataContainer.addData(
      key: "username", dataIn: _usernameController.value.text);

  // This advances the user to the second step (the challenge)
  CaptchaUtils.goToCaptcha(context);
}
  1. Finally, add the HCaptcha widget itself:
class CaptchaScreen extends StatelessWidget {
  const CaptchaScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(minHeight: 450),
      child: HCaptcha(),
    );
  }
}
  1. When the challenge has been completed by the user, the callback in step 3 (onCaptchaCompleted) will be called. You can then pass on the result to your backend for verification.
You might also like...

Easy to use open source Hub ๐Ÿ•ธ๏ธ to control your smart devices from one app.

Easy to use open source Hub ๐Ÿ•ธ๏ธ to control your smart devices from one app.

CyBear Jinni Hub Welcome! This repository is in charge of controlling smart devices and is part of the CyBear Jinni Smart Home system. The software is

Jul 22, 2021

A Mobile App to Track Your Favourite Anime in One Place.

A Mobile App to Track Your Favourite Anime in One Place.

Tako Anime Tracker A Mobile App to Track Your Favourite Anime in One Place. Download App Android : Tako-release.apk IOS : Coming soon ... ScreenShots

Dec 21, 2022

An App To manage all your tasks with firebase backend

An App To manage all your tasks with firebase backend

๐Ÿ”ฅ Todo App An App To manage all your tasks with firebase backend. Star โญ the repo if you like what you see ๐Ÿ˜‰ . โœจ Features : Login/SignUp with Fireba

Dec 12, 2022

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesnโ€™t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Jan 6, 2023

Latest and easy-to-read news, all in your pocket ๐Ÿ“ฑ

Latest and easy-to-read news, all in your pocket ๐Ÿ“ฑ

Observer-flutter About Flutter app for getting live news in different categories Tools used Inshorts News API v2 This API's documentation Get the App

Jul 13, 2022

For all the developers out there make your first Pull Request and earn a free Tee from GitHub!

For all the developers out there make your first Pull Request and earn a free Tee from GitHub!

Hacktoberfest2021 For all the developers out there make your first Pull Request and earn a free Tee from GitHub! Make sure you have a GitHub account.

Oct 10, 2021

Animefie: Android application for animefying all your selfies!

Animefie An Android application for animefying all your selfies completely built in Flutter! Demo animefie_demo.mp4 How to Install I have only tested

Oct 20, 2022

Compress videos, remove audio, manipulate thumbnails, and make your video compatible with all platforms through this lightweight and efficient library.

video_compress Compress videos, remove audio, manipulate thumbnails, and make your video compatible with all platforms through this lightweight and ef

Dec 31, 2022

A flutter app for a wordpress websites with clean and elegant design. This app is available in free and pro version. You can choose to use the one you need.

A flutter app for a wordpress websites with clean and elegant design. This app is available in free and pro version. You can choose to use the one you need.

๐Ÿ“Œ Get Flutter for Wordpress Flutter for wordpress is currently available in free and pro version: Flutter for Wordpress Flutter for Wordpress Pro Bea

Dec 13, 2022
Comments
  • Feature: Should we add

    Feature: Should we add "Back Button" functionality?

    Imagine the following:

    • You're a user of an app that features a registration form, protected by captcha.
    • You type in your details, click on submit. The captcha challenge appears.
    • Whoops, you remember you typed something wrong!
    • You click the back button.
    • The registration form appears again, with all your data typed in. You can now edit the form again and resubmit.

    Should we spend some time adding this, or should the user do it themselves using the included CaptchaBloc? Keep in mind that if we are to add this, there should be a toggle functionality for the feature (addBackButtonReturn: true)...

    question hacktoberfest 
    opened by kerk12 0
  • Add documentation, EVERYWHERE

    Add documentation, EVERYWHERE

    Title says it all. Clear, concise documentation should be added everywhere, be it classes, methods etc.

    Here's the official dart guide on adding documentation.

    hacktoberfest 
    opened by kerk12 0
  • Create a complete example app

    Create a complete example app

    Right now, there isn't any example app for this package, only the parts inside the README.

    Based on these parts, we need to create an example app with full a implementation of HCaptcha.

    hacktoberfest 
    opened by kerk12 3
Owner
Kyriakos Giannakis
CS Student at University of Piraeus.
Kyriakos Giannakis
A full-fledged one-to-one chat app developed entirely in Flutter

Enigma Enigma - A minimalist, locked-down one-to-one chat app. Usage Flutter - Get Started Since this is a Firebase dependent project, create a Fireba

Amit Joki 389 Dec 23, 2022
Bloon - One click, One party - app to find club in Paris

Bloon Bloon is mobile application for E3 project in ESIEE Paris. It list all night clubs and events in Paris and recommend you according to you person

null 57 Oct 17, 2021
Mobile app to square images by adding padding around it.

Resizrr Mobile app to crop images. Screens ?? How to set-up this project on local machine? Fork this project Then clone the forked project by git clon

Aman Kumar 9 Oct 23, 2022
'Efficacy' is a an Android app that keeps users updated on all events and happenings in and around the NITS campus. Note that the one in this repo is a slightly altered version of the original.

Efficacy : The proposed Android app for all clubs, events and happenings at NIT Silchar Get the release APK Some interesting features of this app incl

Gaurav Bhattacharjee 2 Aug 29, 2021
The ultimate baby monitor! This mobile app helps new parents keep track of all their newborn baby's needs, milestones, and reminders in one place!

New Parent The ultimate baby monitor! This mobile app helps new parents keep track of all their newborn baby's needs, milestones, and reminders in one

ACM Projects 6 Jun 22, 2022
Apartment4a - An app which will be a one stop solution to all the problems Students are facing these days

APARTMENT 4A An app which will be a one stop solution to all the problems Studen

Adam Oommen Jacob 13 Nov 15, 2022
A simple easy to use Flutter DApp , which keeps a track of all your day to day transactions by using Ethereum blockchain in the background which in turn increases your credit score.

Sahayog A simple easy to use Flutter DApp , which keeps a track of all your day to day transactions by using Ethereum blockchain in the background whi

Utkarsh Agarwal 15 May 21, 2022
Your grades across all your devices.

Gradely 2 A Grade Calculator App, that syncs all your Grades across all your devices, built with Flutter and with the amazing backend Appwrite. Screen

Elias Schneider 16 Dec 8, 2022
Easy to use open source Hub ๐Ÿ•ธ๏ธ to control your smart devices from one app.

CyBear Jinni Hub Welcome! This repository is in charge of controlling smart devices and is part of the CyBear Jinni Smart Home system. The software is

CyBear Jinni 26 Nov 23, 2022