Installation

To install the plugin, add the datadome_flutter_dio dependency to your pubspec.yaml:

dependencies:
  datadome_flutter_dio: ^3.3.4
  flutter:
    sdk: flutter

Note: Make sure your project does support Swift/Kotlin. If not, enable Swift/Kotlin for your Flutter project by executing the following command

flutter create -i swift -a kotlin

Setup

Import the DataDome Interceptor

Import the DataDome Interceptor:

import 'package:datadome_flutter_dio/datadome_interceptor.dart';

Initialize the DataDome Interceptor

Create an instance of the DataDome interceptor, then add it to Dio.

var dio = Dio();
dio.interceptors.add(DataDomeInterceptor('YOUR_CLIENT_SIDE_KEY', dio, context));

Advanced setup

Gesture detection

In order to improve our detection, our mobile SDK collects some extra signals about device model, application version, and some gestural behaviors.
To enable gesture event collection, you need to call DataDome GestureDetection widget in your application view:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: GestureDetection(
          child: Scaffold(
              appBar: AppBar(
                title: const Text('DataDome example app'),
              ),
              body: Center(
                 child:
                      // your view widgets
              ),
          )
        ),
    );
  }

Share cookie between application and WebView context

If your application uses WebViews, we recommend sharing DataDome cookies between the application and WebViews. This prevents session loss when navigating to a WebView page.

From application to WebView context

1. Retrieve the stored DataDome cookie with the getDataDomeCookie method:

String cookieValue = await dataDomeInterceptor.getDataDomeCookie();

2. Add this cookie value to your cookie manager. The sample below assumes the usage of the WebviewCookieManager from the webview_cookie_manager package.

// Get stored DataDome cookie
String cookieValue = await dataDomeInterceptor.getDataDomeCookie();

var wvCookie = Cookie.fromSetCookieValue(cookieValue);
// Add DataDome cookie to cookie manager
await cookieManager.setCookies([wvCookie], origin: url);

From WebView to application context

Store the new DataDome cookie value from your WebView by calling setDataDomeCookie method:

final cookies = await cookieManager.getCookies(url);
for (var item in cookies) {
  if(item.name == "datadome") {
    // Update DataDome cookie store with the new cookie value.
    dataDomeInterceptor.setDataDomeCookie(item.toString());
  }
}

Flutter Dio - Manual integration

If you prefer to handle challenge display yourself, use the manual integration.

Define your challenge display and dismiss functions, then provide them as callbacks to the interceptor.

DataDomeInterceptor dataDomeInterceptor = DataDomeInterceptor.withCallback(datadome_client_key, dio, (widget) { displayCaptcha(widget); }, () { dismissCaptcha(); });

Here are examples of challenge page display and dismiss callback functions.

void displayCaptcha(Widget view) {
    showGeneralDialog(
      context: context,
      barrierDismissible: false,
      pageBuilder: (context, __, ___) {
        return view;
      },
    );
  }

void dismissCaptcha() {
    Navigator.pop(context);
  }

How to test

📘

To test your integration, you need to activate the protection on your endpoints

Force a captcha display

❗️

Do not use the BLOCKUA User-Agent in production

To test your integration, add the header User-Agent with the value BLOCKUA to your request. This will hint the remote protection module to block the current request. The plugin will react to the blocked request (403 code) and display a challenge.

var dio = Dio();
dio.interceptors.add(DataDomeInterceptor('YOUR_CLIENT_SIDE_KEY', dio, context));
try {
  var response = await dio.get(
  				'https://example.com', 
  				options: Options(headers: {'User-Agent': 'BLOCKUA'})
  );
  print(response);
} catch (e) {
  print(e);
}