Flutter + Dio
This guide describes how to integrate the DataDome Plugin for Flutter using the Dio client.
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
- Retrieve the stored DataDome cookie with the
getDataDomeCookie
method:
String cookieValue = await dataDomeInterceptor.getDataDomeCookie();
- 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);
}
Updated 8 days ago