Flutter集成TrueLayer实现App-to-App跳转至英国银行应用失败排查

问题分析 #

当前代码核心问题是未处理WebView中的自定义URL Scheme跳转，TrueLayer唤起银行应用依赖barclays://这类自定义协议，默认WebView不会自动处理这类跳转，必须拦截请求并手动唤起外部应用。

修复步骤 #

1. 添加依赖
   确保引入url_launcher包用于唤起外部应用，在pubspec.yaml中添加：

dependencies:
  url_launcher: ^6.1.10

2. 修改WebView代码，添加请求拦截逻辑
   更新WebViewTruelayer代码，通过navigationDelegate拦截自定义Scheme请求，调用url_launcher处理跳转：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

class WebViewTruelayer extends StatefulWidget {
  const WebViewTruelayer({super.key});

  @override
  WebViewTruelayerState createState() => WebViewTruelayerState();
}

class WebViewTruelayerState extends State<WebViewTruelayer> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Trulayer示例'),
      ),
      body: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'https://truelayer-sandbox.com/test-redirect',
        navigationDelegate: (NavigationRequest request) async {
          // 拦截非http/https的自定义Scheme请求
          if (!request.url.startsWith('http://') && !request.url.startsWith('https://')) {
            if (await canLaunchUrl(Uri.parse(request.url))) {
              await launchUrl(Uri.parse(request.url), mode: LaunchMode.externalApplication);
              // 阻止WebView加载该URL
              return NavigationDecision.prevent;
            }
          }
          return NavigationDecision.navigate;
        },
      ),
    );
  }
}

3. 平台配置（关键）

• Android端：在android/app/src/main/AndroidManifest.xml中添加queries标签，允许唤起目标银行应用：

<queries>
  <!-- 示例：允许唤起Barclays银行应用 -->
  <package android:name="com.barclays.android.barclaysmobilebank" />
  <!-- 按需添加其他支持的银行应用包名 -->
</queries>

• iOS端：在ios/Runner/Info.plist中添加允许查询的银行应用Scheme：

<key>LSApplicationQueriesSchemes</key>
<array>
  <!-- 示例：Barclays的Scheme -->
  <string>barclays</string>
  <!-- 按需添加其他银行的Scheme -->
</array>

原理说明 #

TrueLayer的Web流程会生成带银行自定义Scheme的链接，默认WebView会尝试加载而非唤起外部应用。通过navigationDelegate拦截这类请求，用url_launcher直接唤起对应应用，即可实现App-to-App跳转流程。

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