在从 Angular 对 SignalR 集线器的调用中包含身份验证标头（带有访问令牌）

Question

On the back end, I have an ASP.Net Core 2.2 Web API. In it I have a SignalR Core hub. On the front we have an Angular 5 application. We are using Auth0 as our authentication server.

When the front-end calls any API endpoints, it sends along with the query an authentication header which contains an access token. As all the API endpoints have the [Authorize] decorator, this is required.

The front-end developer is now working on a chat system for the client app, using SignalR, but he doesn't know how to do the same with the calls to the SignalR hub. Ie to include the authentication header (with an access token) when he invokes the SignalR hub methods in Angular.

My question is, is it possible to do this? I understand SignalR uses Web Sockets when possible. So is it possible to include an authorization header with a web socket, in the same way one does with regular HTTP calls to the API? If it's possible, a sample would be very much appreciated!

Currently he has a simple test code setup in Angular:

this.hubConnection
  .start()
  .then(() => console.log('Connection started!'))
  .catch(err => console.log('Error while establishing connection :('));

this.hubConnection.on('ReceiveMessage', (userId: string, message: string) => {
    const text = `${userId}: ${message}`;
    this.messages.push(text);
  });

this.hubConnection
  .invoke('SendMessage', 'john', 'hello world')
  .catch(err => console.error(err));

}

Answer 1

将传输类型更改为长轮询，访问令牌将添加到 HTTP 标头上

Answer 2

// Connect, using the token we got.
this.connection = new signalR.HubConnectionBuilder()
   .withUrl("/hubs/chat", { accessTokenFactory: () => this.loginToken })
.build();