Flutter应用跳转Web端完成硬件密钥2FA登录后无法返回的问题咨询

一、配置Flutter应用的Deep Link（核心唤起逻辑） #

要实现Web端跳转回Flutter App，必须为App配置Deep Link（URL Scheme或App Links/Universal Links），让系统识别特定URL时唤起你的应用。

iOS配置 #

1. 在ios/Runner/Info.plist中添加URL Scheme（快速实现）或Universal Links（更安全，避免Scheme冲突）：

   • URL Scheme示例：

     <key>CFBundleURLTypes</key>
     <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>myflutterauth</string> <!-- 自定义专属Scheme，比如你的App标识 -->
         </array>
       </dict>
     </array>
     

   • Universal Links配置（推荐）：需在苹果开发者后台配置关联域名，再在Info.plist添加：

     <key>associated-domains</key>
     <array>
       <string>applinks:your-web-domain.com</string>
     </array>
     <key>NSUserActivityTypes</key>
     <array>
       <string>NSUserActivityTypeBrowsingWeb</string>
     </array>
     

2. 在AppDelegate.swift中处理跳转回调：

   import UIKit
   import Flutter
   
   @UIApplicationMain
   @objc class AppDelegate: FlutterAppDelegate {
     override func application(
       _ application: UIApplication,
       open url: URL,
       options: [UIApplication.OpenURLOptionsKey : Any] = [:]
     ) -> Bool {
       // 将跳转URL传递给Flutter端处理
       let controller = window?.rootViewController as! FlutterViewController
       let channel = FlutterMethodChannel(name: "com.yourapp.auth", binaryMessenger: controller.binaryMessenger)
       channel.invokeMethod("handleLoginResult", arguments: url.absoluteString)
       return true
     }
   
     // Universal Links回调处理
     override func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
       if userActivity.activityType == NSUserActivityTypeBrowsingWeb, let url = userActivity.webpageURL {
         let controller = window?.rootViewController as! FlutterViewController
         let channel = FlutterMethodChannel(name: "com.yourapp.auth", binaryMessenger: controller.binaryMessenger)
         channel.invokeMethod("handleLoginResult", arguments: url.absoluteString)
       }
       return true
     }
   }
   

Android配置 #

1. 在android/app/src/main/AndroidManifest.xml的MainActivity标签内添加Deep Link配置：

   <activity
       android:name=".MainActivity"
       android:exported="true">
       <!-- URL Scheme配置 -->
       <intent-filter>
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.DEFAULT" />
           <category android:name="android.intent.category.BROWSABLE" />
           <data
               android:scheme="myflutterauth"
               android:host="login" /> <!-- 示例：myflutterauth://login -->
       </intent-filter>
       <!-- App Links配置（推荐，需域名验证） -->
       <intent-filter android:autoVerify="true">
           <action android:name="android.intent.action.VIEW" />
           <category android:name="android.intent.category.DEFAULT" />
           <category android:name="android.intent.category.BROWSABLE" />
           <data
               android:scheme="https"
               android:host="your-web-domain.com"
               android:pathPrefix="/back-to-app" /> <!-- 示例：https://your-web-domain.com/back-to-app -->
       </intent-filter>
   </activity>
   

2. 在MainActivity.kt中处理跳转回调：

   import io.flutter.embedding.android.FlutterActivity
   import io.flutter.embedding.engine.FlutterEngine
   import io.flutter.plugin.common.MethodChannel
   import android.content.Intent
   import android.net.Uri
   
   class MainActivity: FlutterActivity() {
       private val CHANNEL = "com.yourapp.auth"
   
       override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
           super.configureFlutterEngine(flutterEngine)
           intent?.data?.let { uri ->
               sendResultToFlutter(uri.toString(), flutterEngine)
           }
       }
   
       override fun onNewIntent(intent: Intent) {
           super.onNewIntent(intent)
           intent.data?.let { uri ->
               sendResultToFlutter(uri.toString(), flutterEngine!!)
           }
       }
   
       private fun sendResultToFlutter(url: String, flutterEngine: FlutterEngine) {
           val channel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
           channel.invokeMethod("handleLoginResult", url)
       }
   }
   

二、Flutter端处理跳转回调与Web登录跳转 #

用url_launcher跳转Web登录页，同时通过MethodChannel接收原生端传递的登录结果：

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:flutter/services.dart';

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  static const _authChannel = MethodChannel('com.yourapp.auth');
  String? _loginStatus;

  @override
  void initState() {
    super.initState();
    // 监听登录结果回调
    _authChannel.setMethodCallHandler((call) async {
      if (call.method == 'handleLoginResult') {
        final url = call.arguments as String;
        Uri uri = Uri.parse(url);
        String? token = uri.queryParameters['token'];
        if (token != null) {
          // 处理登录成功逻辑：保存token、跳转首页等
          setState(() {
            _loginStatus = "登录成功，已获取授权";
          });
        }
      }
    });
  }

  // 跳转到Web端登录页（携带回调地址）
  Future<void> _openWebLogin() async {
    final loginUrl = Uri.parse('https://your-web-domain.com/login?redirect_uri=myflutterauth://login');
    if (await canLaunchUrl(loginUrl)) {
      await launchUrl(loginUrl);
    } else {
      setState(() {
        _loginStatus = "无法打开Web登录页";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _openWebLogin,
              child: const Text('跳转到Web端完成2FA登录'),
            ),
            if (_loginStatus != null)
              Padding(
                padding: const EdgeInsets.all(16),
                child: Text(_loginStatus!),
              ),
          ],
        ),
      ),
    );
  }
}

三、Angular Web端处理登录后跳转 #

Web端完成2FA登录后，跳转到约定的Deep Link并携带登录态参数：

// Angular登录组件的成功回调逻辑
onLoginSuccess(token: string) {
  // 从URL参数中获取跳转回App的地址
  const redirectUri = new URLSearchParams(window.location.search).get('redirect_uri');
  if (redirectUri) {
    // 拼接token参数，跳转唤起App
    const returnUrl = `${redirectUri}?token=${token}`;
    window.location.href = returnUrl;
  } else {
    // 无回调地址时跳转到Web首页
    window.location.href = '/';
  }
}

四、安全与测试注意事项 #

• 避免直接在URL中暴露敏感token，建议用短时效授权码，Flutter端拿到后再去后端换取长时效token。
• iOS测试需用真机，Android可使用模拟器或真机，直接在浏览器输入Scheme地址（如myflutterauth://login?token=xxx）验证是否能唤起App。
• 使用App Links/Universal Links时，需在Web域名下放置验证文件（iOS为apple-app-site-association，Android为assetlinks.json），确保系统识别域名与App的关联。

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