使用 accessTokenFactory 的 JavaScript 中 SignalR WebSockets 的问题答案

【问题标题】：Problems with SignalR WebSockets in JavaScript using accessTokenFactory使用 accessTokenFactory 的 JavaScript 中 SignalR WebSockets 的问题
【发布时间】：2021-09-01 01:19:10
【问题描述】：

当我的 js 客户端连接到 net 5 服务中的 SignalR 集线器时，只要游戏中没有令牌，一切都会正常工作。我得到了一个 WebSockets 连接，没有任何问题。

只要有授权令牌，我就会进行长时间轮询。我尝试使用 Firefox、Edge 和 Chrome。

我的客户代码：

<script>
    var token = document.getElementById("SignalRToken").value;
    var server = document.getElementById("CloudServer").value;

    const connection = new signalR.HubConnectionBuilder()
        .withUrl(server, {
            accessTokenFactory: () => token
        })
        .configureLogging(signalR.LogLevel.Trace)
        .withAutomaticReconnect()
        .build();

    connection.on("DevicePowerChanged",
        function (deviceId, power) {
            console.log("got power: " + power + " for " + deviceId);
            if (power) {
                document.getElementById("power").src = "/Images/power-on.png";
            } else {
                document.getElementById("power").src = "/Images/power-off.png";
            }
        });

    connection
        .start()
        .then(_=> console.log("signal-r connection established successfully."))
        .catch(err => console.error(err.toString()));

</script>

浏览器的控制台日志告诉我，唯一可能的传输层是长轮询。

我做错了什么？我忘记了什么？
为什么 WebSockets 中没有有效的凭据？
为什么返回 SSE 未授权的连接请求？
为什么长轮询一切正常？

edge的控制台输出

signalr.js:2160 [2021-06-16T08:08:21.267Z] Debug: Starting HubConnection.
signalr.js:2160 [2021-06-16T08:08:21.267Z] Debug: Starting connection with transfer format 'Text'.
signalr.js:2160 [2021-06-16T08:08:21.268Z] Debug: Sending negotiation request: http://192.168.0.148:5001/signal-r/devices/negotiate?negotiateVersion=1.
signalr.js:2160 [2021-06-16T08:08:21.423Z] Debug: Selecting transport 'WebSockets'.
signalr.js:2160 [2021-06-16T08:08:21.424Z] Trace: (WebSockets transport) Connecting.
signalr.js:5071 WebSocket connection to 'ws://192.168.0.148:5001/signal-r/devices?id=ldKsTwHBD2T4TvZHT6Ii3w&access_token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjcwRDkzRDY4M0MzRDZFMEI5ODk3NkZBQTlFNDQyM0REIiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE2MjM4MzA4ODYsImV4cCI6MTYyMzgzNDQ4NiwiaXNzIjoiaHR0cHM6Ly9wYXRhdWdlb2lyZS1hdXRoZW50aWNhdGlvbi5henVyZXdlYnNpdGVzLm5ldCIsImNsaWVudF9pZCI6InJhc3BlcnJ5UGllIiwianRpIjoiM0ZFQzU4RDI4QTI3MDQxQ0Q2QTIzNTE2OUMwMDVBOUMiLCJpYXQiOjE2MjM4MzA4ODYsInNjb3BlIjpbIlNpZ25hbFJqcyJdfQ.XkQMI9CWXgi1n4KD_w7jJI0uDrF1uNAxmdx9YP_7DMmd5oV6eMFVmG2ja7gFBknVmsjRbGooIPyxs-UOufZYSjF5QZFjY9nYXUS_eI_Zx7bI7zbX2r3KVL-JwV1N-H4Fm1uGc3luIWkxcZ-aEnoOwPTO9-ETgTz1PX7fOXCFdGbNTZzdU2VDMCP8fxqPwQuX4gWc9MgV5kIu4ZVbu_UdSzu6Iksh-1qFOq_pDDatrEr4TcTOgbfY4gAIQHtKh54NltBfvhp2XrmylZVlwnXpC8WPizctE1eK8Gx829Dcn5q01s2qRg5Sep35grvrF-y6zKkPSviJm6qshvRNjz3KMg' failed: HTTP Authentication failed; no valid credentials available
(anonymous) @ signalr.js:5071
(anonymous) @ signalr.js:5052
step @ signalr.js:5013
(anonymous) @ signalr.js:4994
fulfilled @ signalr.js:4985
signalr.js:2150 [2021-06-16T08:08:21.513Z] Error: Failed to start the transport 'WebSockets': Error: There was an error with the transport.
ConsoleLogger.log @ signalr.js:2150
(anonymous) @ signalr.js:4124
step @ signalr.js:3726
(anonymous) @ signalr.js:3707
rejected @ signalr.js:3699
Promise.then (async)
step @ signalr.js:3700
(anonymous) @ signalr.js:3701
__awaiter @ signalr.js:3697
HttpConnection.createTransport @ signalr.js:4070
(anonymous) @ signalr.js:3986
step @ signalr.js:3726
(anonymous) @ signalr.js:3707
fulfilled @ signalr.js:3698
Promise.then (async)
step @ signalr.js:3700
(anonymous) @ signalr.js:3701
__awaiter @ signalr.js:3697
HttpConnection.startInternal @ signalr.js:3917
(anonymous) @ signalr.js:3802
step @ signalr.js:3726
(anonymous) @ signalr.js:3707
(anonymous) @ signalr.js:3701
__awaiter @ signalr.js:3697
HttpConnection.start @ signalr.js:3790
(anonymous) @ signalr.js:2553
step @ signalr.js:2399
(anonymous) @ signalr.js:2380
(anonymous) @ signalr.js:2374
__awaiter @ signalr.js:2370
HubConnection.startInternal @ signalr.js:2541
(anonymous) @ signalr.js:2523
step @ signalr.js:2399
(anonymous) @ signalr.js:2380
(anonymous) @ signalr.js:2374
__awaiter @ signalr.js:2370
HubConnection.startWithStateTransitions @ signalr.js:2510
HubConnection.start @ signalr.js:2506
(anonymous) @ ConnectedDevices:296
signalr.js:2160 [2021-06-16T08:08:21.513Z] Debug: Selecting transport 'ServerSentEvents'.
signalr.js:2160 [2021-06-16T08:08:21.513Z] Debug: Sending negotiation request: http://192.168.0.148:5001/signal-r/devices/negotiate?negotiateVersion=1.
DevTools failed to load source map: Could not load content for http://localhost:50004/js/signalr/dist/browser/signalr.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
signalr.js:2160 [2021-06-16T08:08:21.636Z] Trace: (SSE transport) Connecting.
devices:1 GET http://192.168.0.148:5001/signal-r/devices?id=3XUAFbfpkmCMmpWeAbn0oA&access_token=eyJhbGciOiJSUzI1NiIsImtpZCI6IjcwRDkzRDY4M0MzRDZFMEI5ODk3NkZBQTlFNDQyM0REIiwidHlwIjoiYXQrand0In0.eyJuYmYiOjE2MjM4MzA4ODYsImV4cCI6MTYyMzgzNDQ4NiwiaXNzIjoiaHR0cHM6Ly9wYXRhdWdlb2lyZS1hdXRoZW50aWNhdGlvbi5henVyZXdlYnNpdGVzLm5ldCIsImNsaWVudF9pZCI6InJhc3BlcnJ5UGllIiwianRpIjoiM0ZFQzU4RDI4QTI3MDQxQ0Q2QTIzNTE2OUMwMDVBOUMiLCJpYXQiOjE2MjM4MzA4ODYsInNjb3BlIjpbIlNpZ25hbFJqcyJdfQ.XkQMI9CWXgi1n4KD_w7jJI0uDrF1uNAxmdx9YP_7DMmd5oV6eMFVmG2ja7gFBknVmsjRbGooIPyxs-UOufZYSjF5QZFjY9nYXUS_eI_Zx7bI7zbX2r3KVL-JwV1N-H4Fm1uGc3luIWkxcZ-aEnoOwPTO9-ETgTz1PX7fOXCFdGbNTZzdU2VDMCP8fxqPwQuX4gWc9MgV5kIu4ZVbu_UdSzu6Iksh-1qFOq_pDDatrEr4TcTOgbfY4gAIQHtKh54NltBfvhp2XrmylZVlwnXpC8WPizctE1eK8Gx829Dcn5q01s2qRg5Sep35grvrF-y6zKkPSviJm6qshvRNjz3KMg 401 (Unauthorized)
signalr.js:2150 [2021-06-16T08:08:21.675Z] Error: Failed to start the transport 'ServerSentEvents': Error: Error occurred
ConsoleLogger.log @ signalr.js:2150
(anonymous) @ signalr.js:4124
step @ signalr.js:3726
(anonymous) @ signalr.js:3707
rejected @ signalr.js:3699
Promise.then (async)
step @ signalr.js:3700
fulfilled @ signalr.js:3698
Promise.then (async)
step @ signalr.js:3700
rejected @ signalr.js:3699
Promise.then (async)
step @ signalr.js:3700
(anonymous) @ signalr.js:3701
__awaiter @ signalr.js:3697
HttpConnection.createTransport @ signalr.js:4070
(anonymous) @ signalr.js:3986
step @ signalr.js:3726
(anonymous) @ signalr.js:3707
fulfilled @ signalr.js:3698
Promise.then (async)
step @ signalr.js:3700
(anonymous) @ signalr.js:3701
__awaiter @ signalr.js:3697
HttpConnection.startInternal @ signalr.js:3917
(anonymous) @ signalr.js:3802
step @ signalr.js:3726
(anonymous) @ signalr.js:3707
(anonymous) @ signalr.js:3701
__awaiter @ signalr.js:3697
HttpConnection.start @ signalr.js:3790
(anonymous) @ signalr.js:2553
step @ signalr.js:2399
(anonymous) @ signalr.js:2380
(anonymous) @ signalr.js:2374
__awaiter @ signalr.js:2370
HubConnection.startInternal @ signalr.js:2541
(anonymous) @ signalr.js:2523
step @ signalr.js:2399
(anonymous) @ signalr.js:2380
(anonymous) @ signalr.js:2374
__awaiter @ signalr.js:2370
HubConnection.startWithStateTransitions @ signalr.js:2510
HubConnection.start @ signalr.js:2506
(anonymous) @ ConnectedDevices:296
signalr.js:2160 [2021-06-16T08:08:21.675Z] Debug: Selecting transport 'LongPolling'.
signalr.js:2160 [2021-06-16T08:08:21.675Z] Debug: Sending negotiation request: http://192.168.0.148:5001/signal-r/devices/negotiate?negotiateVersion=1.
signalr.js:2160 [2021-06-16T08:08:21.745Z] Trace: (LongPolling transport) Connecting.
signalr.js:2160 [2021-06-16T08:08:21.745Z] Trace: (LongPolling transport) polling: http://192.168.0.148:5001/signal-r/devices?id=cUN1ZArHIZhEi8pQGTK2yw&_=1623830901745.
signalr.js:2160 [2021-06-16T08:08:21.817Z] Trace: (LongPolling transport) polling: http://192.168.0.148:5001/signal-r/devices?id=cUN1ZArHIZhEi8pQGTK2yw&_=1623830901817.
signalr.js:2160 [2021-06-16T08:08:21.817Z] Debug: The HttpConnection connected successfully.
signalr.js:2160 [2021-06-16T08:08:21.817Z] Debug: Sending handshake request.
signalr.js:2160 [2021-06-16T08:08:21.818Z] Trace: (LongPolling transport) sending data. String data of length 32.
signalr.js:2160 [2021-06-16T08:08:21.964Z] Trace: (LongPolling transport) request complete. Response status: 200.
signalr.js:2156 [2021-06-16T08:08:21.965Z] Information: Using HubProtocol 'json'.
signalr.js:2160 [2021-06-16T08:08:21.973Z] Trace: (LongPolling transport) data received. String data of length 3.
signalr.js:2160 [2021-06-16T08:08:21.973Z] Debug: Server handshake complete.
signalr.js:2160 [2021-06-16T08:08:21.973Z] Trace: (LongPolling transport) polling: http://192.168.0.148:5001/signal-r/devices?id=cUN1ZArHIZhEi8pQGTK2yw&_=1623830901973.
signalr.js:2160 [2021-06-16T08:08:21.974Z] Debug: HubConnection connected successfully.
ConnectedDevices:297 signal-r connection established successfully.

【问题讨论】：

标签： javascript asp.net-core websocket authorization signalr

【解决方案1】：

您可能没有从查询字符串中获取访问令牌并将其传递给 auth。请参阅https://docs.microsoft.com/aspnet/core/signalr/authn-and-authz?view=aspnetcore-5.0#built-in-jwt-authentication 了解如何执行此操作。

LongPolling 工作的原因是因为它使用默认情况下与 JWT 中间件一起工作的令牌标头，不幸的是浏览器不允许您设置标头，因此需要使用查询字符串，并且需要一些额外的代码来使 JWT 中间件工作。

【讨论】：