Flutter Web应用中使用URL Launcher处理URL回调问题

URL Launcher是调用外部浏览器打开页面，没法直接捕获跳转后的URL，得换个思路——用WebView组件把登录流程嵌到自己应用里，这样就能监听页面跳转，拿到目标URL。

具体做法 #

• 先添加WebView相关依赖，比如Flutter场景下用webview_flutter
• 用WebView加载登录页面，然后监听页面导航事件：
  • 通过onNavigationRequest拦截即将跳转的URL，检查是否包含你需要的查询参数，符合条件就停止页面加载，直接解析参数
  • 或者在onPageFinished回调中获取当前页面的完整URL，再从中提取目标参数

示例代码（Flutter） #

import 'package:webview_flutter/webview_flutter.dart';

class LoginWebView extends StatefulWidget {
  final String loginUrl;
  const LoginWebView({super.key, required this.loginUrl});

  @override
  State<LoginWebView> createState() => _LoginWebViewState();
}

class _LoginWebViewState extends State<LoginWebView> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(Uri.parse(widget.loginUrl))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) {
            // 检查跳转URL是否包含目标参数（比如token、code等）
            if (request.url.contains('target_param')) {
              Uri uri = Uri.parse(request.url);
              // 提取目标参数值
              String paramValue = uri.queryParameters['target_param'] ?? '';
              // 将参数传回上一级页面
              Navigator.pop(context, paramValue);
              // 阻止页面继续跳转
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: WebViewWidget(controller: controller),
    );
  }
}

特殊场景处理 #

如果必须使用外部浏览器（比如部分登录流程有强安全校验，不允许嵌入WebView），可以采用deeplink方案：在登录跳转的目标URL中配置你的应用专属deeplink协议（例如yourapp://callback），登录完成后页面会自动跳回你的应用，你可以在deeplink的回调逻辑中获取带参数的完整URL。

内容的提问来源于stack exchange，提问作者Maitri