如何在ReactJS客户端中对SignalR握手进行身份验证

1. 查询字符串传递令牌 #

SignalR连接初始化时，可将身份令牌（比如JWT）附加到Hub地址的查询参数中，服务器端在握手阶段读取并验证。

• 客户端代码示例：

import { HubConnectionBuilder } from '@microsoft/signalr';

const authToken = localStorage.getItem('authToken');
const connection = new HubConnectionBuilder()
  .withUrl(`/your-hub-endpoint?token=${authToken}`)
  .build();

• 服务器端验证（以ASP.NET Core为例）：
  在Hub的连接回调里读取令牌并校验，无效则直接断开连接：

public override async Task OnConnectedAsync()
{
    var token = Context.GetHttpContext().Request.Query["token"].ToString();
    if (!IsValidToken(token)) // 自定义令牌验证逻辑
    {
        await Context.AbortAsync();
        return;
    }
    // 验证通过，执行后续连接逻辑
    await base.OnConnectedAsync();
}

2. 请求头携带身份凭证 #

针对WebSocket或长轮询传输，SignalR支持自定义请求头。客户端在连接配置中添加授权头，服务器端读取并验证。

• 客户端代码示例：

const connection = new HubConnectionBuilder()
  .withUrl('/your-hub-endpoint', {
    headers: {
      Authorization: `Bearer ${localStorage.getItem('authToken')}`
    }
  })
  .build();

• 服务器端验证：
  可直接利用框架内置认证中间件，给Hub添加[Authorize]特性，自动校验Bearer令牌：

[Authorize]
public class YourHub : Hub
{
    public override async Task OnConnectedAsync()
    {
        // 已通过授权，可通过Context.User获取用户信息
        await base.OnConnectedAsync();
    }
}

3. Cookie认证（同域场景） #

若React客户端与SignalR服务器同域，且采用Cookie-based认证（如ASP.NET Core Cookie认证），SignalR会自动携带Cookie，服务器端无需额外客户端配置，直接用[Authorize]即可完成验证。

• 客户端代码示例：

const connection = new HubConnectionBuilder()
  .withUrl('/your-hub-endpoint')
  .build();

• 服务器端配置：
  确保已启用Cookie认证中间件，Hub添加[Authorize]特性，握手时自动校验Cookie中的身份信息。

4. 自定义握手拦截逻辑 #

如果上述方案无法满足需求，可在服务器端通过中间件拦截SignalR握手请求，提前执行身份验证，验证失败直接返回401状态码，阻止连接建立。

注意事项 #

• 令牌需做好安全防护，避免XSS泄露，建议用HttpOnly Cookie（Cookie方案）或前端加密存储。
• 验证失败时必须及时断开连接，防止未授权客户端建立持久连接。
• 部分浏览器对WebSocket传输的自定义头支持有限，这种场景优先选择查询字符串或Cookie方案。

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