Flutter: login through a webview - authentication

Question

I'm pretty new to Flutter.
Is there a way to login through a webview into our app?
e.g. In the first page there is this webview where we can do the login. After we logged in, the app takes us in a second page where we can do other stuff.

Answer 1

In my app I use instagram implicit authentification, which implies to login user in webview and get token from redirect url. I use flutter_webview_plugin
Next code builds WebviewScaffold with login url. And it listen for url changes. So when response is redirected to my redirectUrl it parses url to get token. Then you need to save token for following requests in app.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
class LoginScreen extends StatefulWidget {
#override
_LoginScreenState createState() => new _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final flutterWebviewPlugin = new FlutterWebviewPlugin();
StreamSubscription _onDestroy;
StreamSubscription<String> _onUrlChanged;
StreamSubscription<WebViewStateChanged> _onStateChanged;
String token;
#override
void dispose() {
// Every listener should be canceled, the same should be done with this stream.
_onDestroy.cancel();
_onUrlChanged.cancel();
_onStateChanged.cancel();
flutterWebviewPlugin.dispose();
super.dispose();
}
#override
void initState() {
super.initState();
flutterWebviewPlugin.close();
// Add a listener to on destroy WebView, so you can make came actions.
_onDestroy = flutterWebviewPlugin.onDestroy.listen((_) {
print("destroy");
});
_onStateChanged =
flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
print("onStateChanged: ${state.type} ${state.url}");
});
// Add a listener to on url changed
_onUrlChanged = flutterWebviewPlugin.onUrlChanged.listen((String url) {
if (mounted) {
setState(() {
print("URL changed: $url");
if (url.startsWith(Constants.redirectUri)) {
RegExp regExp = new RegExp("#access_token=(.*)");
this.token = regExp.firstMatch(url)?.group(1);
print("token $token");
saveToken(token);
Navigator.of(context).pushNamedAndRemoveUntil(
"/home", (Route<dynamic> route) => false);
flutterWebviewPlugin.close();
}
});
}
});
}
#override
Widget build(BuildContext context) {
String loginUrl = "someservise.com/auth";
return new WebviewScaffold(
url: loginUrl,
appBar: new AppBar(
title: new Text("Login to someservise..."),
));
}
}

Answer 2

You can use my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.
You can use onLoadStart or onLoadStop events to detect URL changes. For example, you can get the token:
from the url
from cookies
from localStorage
Full example:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
runApp(new MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InAppWebViewPage()
);
}
}
class InAppWebViewPage extends StatefulWidget {
#override
_InAppWebViewPageState createState() => new _InAppWebViewPageState();
}
class _InAppWebViewPageState extends State<InAppWebViewPage> {
InAppWebViewController webView;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InAppWebView")
),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: Container(
child: InAppWebView(
initialUrlRequest: URLRequest(url: Uri.https("next.kemi.ai", "")),
initialOptions: InAppWebViewGroupOptions(
android: AndroidInAppWebViewOptions(
domStorageEnabled: true,
databaseEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
},
onLoadStart: (InAppWebViewController controller, Uri? url) {
},
onLoadStop: (InAppWebViewController controller, Uri? url) async {
if (url?.toString().startsWith("https://myUrl.com/auth-response")??false) {
// get your token from url
RegExp regExp = RegExp("access_token=(.*)");
String? token = regExp.firstMatch(url?.toString()??'')?.group(1);
print(token);
// or using CookieManager
CookieManager cookieManager = CookieManager.instance();
Cookie? cookie = await cookieManager.getCookie(
url: Uri.parse("https://myUrl.com/auth-response"),
name: "access_token");
print(cookie?.value??'');
// or using javascript to get access_token from localStorage
String? tokenFromJSEvaluation = await controller.evaluateJavascript(source: "localStorage.getItem('access_token')");
print(tokenFromJSEvaluation);
}
},
)
),
),
]))
);
}
}

Answer 3

For my case, I get my data via this -
InAppWebView(
initialUrlRequest: URLRequest(url: Uri.parse(widget.url)),
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(userAgent: "random"),
//Add 'random' to 'userAgent' other wise you get error in webview for google signin.
android: AndroidInAppWebViewOptions(
domStorageEnabled: true,
databaseEnabled: true,
),
),
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
showAnimationLoader(context);
},
onLoadStop: (InAppWebViewController controller, Uri? url) async {
Get.back();
if (url?.toString().contains("my.domain.app") ?? false) {
debuggingPrint(
message: 'Code : ${url?.queryParameters['code'] ?? ''}');
debuggingPrint(
message: 'State : ${url?.queryParameters['state'] ?? ''}');
}
},
)