Flutter Web通过web_socket_channel连接Azure SignalR Hub的认证难题

针对你遇到的Azure SignalR Hub认证问题，结合web_socket_channel包的使用，正确的连接流程需要先完成协商请求，再用协商返回的参数构建合法的WebSocket连接URL，具体步骤如下：

1. 完成协商请求获取连接凭证 #

首先需要向SignalR Hub的negotiate端点发送POST请求，带上你的访问令牌（accessToken），获取connectionToken和connectionId等关键参数。示例代码：

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<Map<String, dynamic>> getSignalRNegotiation(String accessToken) async {
  final response = await http.post(
    Uri.parse('http://example.com/chat-hub/negotiate?negotiateVersion=1'),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $accessToken',
    },
  );
  
  if (response.statusCode != 200) {
    throw Exception('协商请求失败: ${response.statusCode}');
  }
  
  return json.decode(response.body);
}

2. 构建正确的WebSocket连接URL #

Azure SignalR的WebSocket连接需要携带协商返回的connectionToken（通过id参数传递），同时必须指定transport=webSockets参数，还需要关联协商时的connectionId。示例代码：

import 'package:web_socket_channel/web_socket_channel.dart';

Future<WebSocketChannel> establishSignalRConnection(String accessToken) async {
  final negotiationData = await getSignalRNegotiation(accessToken);
  final connectionToken = negotiationData['connectionToken'];
  final connectionId = negotiationData['connectionId'];
  
  // 构建符合Azure SignalR要求的WebSocket URL
  final wsUri = Uri.parse(
    'ws://ctifiloops.bjitgroup.com:8088/chat-hub'
    '?id=$connectionToken'
    '&transport=webSockets'
    '&connectionId=$connectionId'
  );
  
  // 创建并返回WebSocket通道
  return WebSocketChannel.connect(wsUri);
}

为什么之前的尝试失败？ #

• 直接将accessToken放在access-token参数中不符合Azure SignalR的WebSocket认证规则，WebSocket阶段需要使用协商返回的connectionToken，且参数名必须是id
• 缺少transport=webSockets参数，Azure SignalR无法识别你要使用的传输协议
• 未关联协商时的connectionId，导致服务器无法将WebSocket连接与之前的协商会话绑定

额外注意事项 #

• 如果你的服务部署在HTTPS环境下，务必使用wss://协议而非ws://
• 确保服务器端配置了正确的CORS策略，允许Flutter Web所在域名发起WebSocket连接
• 确认你的accessToken具备访问SignalR Hub的权限，服务器端认证逻辑已正确对接Azure SignalR的认证机制

内容的提问来源于stack exchange，提问作者Yasir Arefin Tusher