Flutter Web中启动URL跳转后如何获取返回的JSON响应数据

url_launcher在Flutter Web场景下打开的独立窗口和当前应用上下文完全隔离，受浏览器同源安全策略限制，无法直接读取目标窗口的返回内容，这是之前方案跑不通的核心原因。
可落地的实现方案基于浏览器原生弹窗+postMessage通信实现，不需要依赖第三方插件，全Web端兼容。

实现步骤 #

• 移除原有基于url_launcher的跳转逻辑，该逻辑在Web场景下无法满足跨窗口取数需求
• 在项目web目录下新增中转HTML页面，作用是接收Slack登录完成后的跳转，把页面承载的JSON数据通过跨窗口通信传回Flutter应用，之后自动关闭弹窗
• 在Flutter端通过dart内置的html能力调用原生window.open打开Slack业务链接，同时监听窗口消息事件，接收中转页传回的JSON数据
• 将Slack应用的回调地址配置为你部署的中转HTML页地址，确保中转页和Flutter应用同域

代码实现 #

1. 中转页代码（路径：web/slack-callback.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>授权跳转中</title>
</head>
<body>
<script>
    // 读取页面加载完成后返回的JSON文本
    const responseText = document.body.innerText;
    // 向父窗口发送数据，生产环境替换origin为你的应用正式域名
    window.opener.postMessage({
        msgType: 'slackAuthRes',
        payload: responseText
    }, window.location.origin);
    // 发送完成后自动关闭弹窗
    window.close();
</script>
</body>
</html>

2. Flutter端调用代码 #

import 'dart:html' as html;
import 'dart:convert';
import 'package:flutter/foundation.dart';

/// 打开Slack授权并获取返回数据
void launchSlackFlow() {
  // 替换为你的实际Slack业务URL，回调地址指向同域下的/slack-callback.html
  final slackUri = '替换为你的Slack业务请求地址';
  // 打开固定尺寸的授权弹窗
  html.window.open(
    slackUri,
    'slackAuth',
    'width=600,height=750,scrollbars=yes'
  );

  // 绑定消息监听
  void onMessageReceived(html.MessageEvent event) {
    // 校验消息来源，过滤非可信源消息
    if (event.origin != html.window.location.origin) return;
    final msgData = event.data;
    if (msgData is Map && msgData['msgType'] == 'slackAuthRes') {
      // 解析JSON数据
      final slackRes = jsonDecode(msgData['payload'] as String);
      // 此处编写拿到数据后的业务处理逻辑
      debugPrint('Slack返回数据: $slackRes');
      // 移除监听避免内存泄漏
      html.window.removeEventListener('message', onMessageReceived);
    }
  }
  html.window.addEventListener('message', onMessageReceived);
}

避坑说明 #

• 中转页必须和Flutter Web应用部署在同域名、同端口、同协议下，否则postMessage通信会被浏览器跨域策略拦截
• 不要尝试使用iframe嵌入Slack登录页，Slack服务端配置了X-Frame-Options响应头，禁止第三方页面嵌入其登录流程
• 开发调试时如果本地服务端口有变动，要同步确认postMessage的origin配置和当前服务地址一致，否则会收不到回传消息
• 如果Slack侧支持配置OAuth返回格式，优先走标准OAuth授权码模式，比直接返回JSON的流程安全性更高

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