In my app, I am using InAppWebView
to load a SAML
URL to authenticate the user. The InAppWebView
works fine in Android
and IOS
, but when I try to run the same App on the web, it gives me this error: TargetPlatform. Linux is not yet supported by the flutter_inappwebview plugin.
.
I know that the InAppWebView
doesn't support the web, but I am posting this question hoping that someone will suggest alternate options to achieve this.
This is how I am doing, which is working fine:
import 'dart:convert';
import 'package:feeta/services/TokenManager.dart';
import 'package:feeta/views/dashboard/MyDashboard.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class LoginWebView extends StatefulWidget {
const LoginWebView({super.key});
@override
State<LoginWebView> createState() => _LoginWebViewState();
}
class _LoginWebViewState extends State<LoginWebView> {
final tokenManager = TokenManager();
InAppWebViewController? inAppWebViewController;
bool isShowingError = false;
late var url;
var initialUrl =
"https://accounts.google.com/o/saml2/initsso?idpid=C02qtgmcd&spid=859837136968&forceauthn=false";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Login"),
),
body: Column(
children: [
Expanded(
child: InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse(initialUrl)),
onWebViewCreated: (controller) async {
inAppWebViewController = controller;
},
onProgressChanged: onWebViewProgressChanged,
),
),
],
),
);
}
void onWebViewProgressChanged(
InAppWebViewController controller, int progress) async {
if (progress == 100) {
String html = await getHtmlFromWebViewController(controller);
if (!isShowingError && html.contains('not_a_saml_app')) {
isShowingError = true;
// Show the error dialog and return
showErrorDialog();
return;
}
String token = extractTokenFromHTML(html);
if (kDebugMode) {
print("My Token: $token");
}
if (token.isNotEmpty) {
tokenManager.storeToken(token);
navigateToNewScreen();
}
}
}
void showErrorDialog() {
showDialog(
context: context,
barrierDismissible: false,
// Prevent dismissing the dialog by tapping outside
builder: (context) {
return AlertDialog(
title: const Text("Login Error"),
content: const Text(
"Oops! It seems like you're trying to login with a personal or different email address. Please make sure to use your Lattice email ID for authentication."),
actions: [
TextButton(
child: const Text("Retry"),
onPressed: () {
Navigator.pop(context);
isShowingError = false;
logout();
},
),
],
);
},
);
}
Future<String> getHtmlFromWebViewController(
InAppWebViewController controller) async {
try {
String html = await controller.evaluateJavascript(
source: 'document.documentElement.outerHTML;');
return html;
} catch (e) {
if (kDebugMode) {
print('Error retrieving HTML: $e');
}
return '';
}
}
String extractTokenFromHTML(String html) {
try {
// Extract the JSON string from the HTML
String jsonString =
html.substring(html.indexOf('{'), html.lastIndexOf('}') + 1);
// Parse the JSON string
Map<String, dynamic> json = jsonDecode(jsonString);
// Extract the token from the JSON
String _token = json['token'] as String;
return _token;
} catch (e) {
if (kDebugMode) {
print('Error extracting token from HTML: $e');
}
return '';
}
}
void logout() async {
// Reload the initial login URL
if (inAppWebViewController != null) {
// // Clear WebView cache
await inAppWebViewController!.clearCache();
inAppWebViewController!.loadUrl(
urlRequest: URLRequest(url: Uri.parse(initialUrl)),
);
}
if (kDebugMode) {
print("came back on this method");
}
}
void navigateToNewScreen() async {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => const MyDashboard()),
);
}
}
Can anyone suggest an alternate option, on how I can run the app on the web? I will be thankful!