Flutter integration
3 min
Accessing Link using webview
Use webview_flutter as WebView component to load klavi Link for authorization and data sharing.
According to the original official openfinance article (https://openfinancebrasil.atlassian.net/wiki/spaces/DraftOF/pages/7995738/Redirecionamento+App-to-App), we assume by default that all institutions implement deeplinks, so we only deal with deep links. and no longer deal with android 'intent://' or custom URL scheme.
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
class WebPage extends StatefulWidget {
const WebPage({super.key});
@override
State<WebPage> createState() => _WebPageState();
}
class _WebPageState extends State<WebPage> {
late final WebViewController _webViewController;
static const urlWhiteList = [
'https://open-sandbox.klavi.ai',
'https://open-testing.klavi.ai',
'https://open.klavi.ai',
'https://www.google.com/recaptcha',
'https://recaptcha.google.com/recaptcha',
];
bool isInWhitelistFn(String url) {
return urlWhiteList.any((element) => url.startsWith(element));
}
@override
void initState() {
super.initState();
late final PlatformWebViewControllerCreationParams params;
if (WebViewPlatform.instance is WebKitWebViewPlatform) {
params = WebKitWebViewControllerCreationParams(
allowsInlineMediaPlayback: true,
mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
);
} else {
params = const PlatformWebViewControllerCreationParams();
}
_webViewController = WebViewController.fromPlatformCreationParams(params);
_webViewController
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(NavigationDelegate(
onNavigationRequest: (NavigationRequest request) async {
if (request.url == 'about:blank') {
return NavigationDecision.prevent;
}
try {
Uri requestUri = Uri.parse(request.url);
if (isInWhitelistFn(requestUri.toString())) {
return NavigationDecision.navigate;
}
launchUrl(requestUri, mode: LaunchMode.externalApplication);
return NavigationDecision.prevent;
} catch (e) {
debugPrint('e: $e');
return NavigationDecision.prevent;
}
}));
}
@override
Widget build(BuildContext context) {
final String url = GoRouterState.of(context).extra! as String;
_webViewController.loadRequest(Uri.parse(url));
return Scaffold(
appBar: AppBar(
title: const Text('Web'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(child: WebViewWidget(controller: _webViewController)),
],
));
}
}
It is necessary to set up a whitelist containing the domain name of klavi. Otherwise the klavi link will be opened with the system browser.
GitHub
Demo App Download
