SignalR authorization, Angular, ASP.NET Core

Hello,

In my app I use IdentityServer4 for my web API. Now I want to use SignalR but I always get error 401. With my other http.get calls I have no problems.

[Authorize(AuthenticationSchemes = IdentityServerAuthenticationDefaults.AuthenticationScheme)]
public class ChatHub : Hub

In the Angular Service I initialize the hub as follows.

const tokenValue = '?token=' + this.authService.accessToken;
const hubUrl = `${this.configurations.baseUrl + '/hubs/chat?'}looney${tokenValue}`;
this.hubConnection = new signalR.HubConnectionBuilder().withUrl(hubUrl).configureLogging(signalR.LogLevel.Information).build();

For the other http.get I set the request headers as follows:

protected get requestHeaders(): { headers: HttpHeaders | { [header: string]: string | string[]; } } {
const headers = new HttpHeaders({
Authorization: 'Bearer ' + this.authService.accessToken,
'Content-Type': 'application/json',
Accept: 'application/json, text/plain, */*'
});
return { headers };
}

Can someone help me here??

Thanks in advance for any advice or tip

Well your hubconnection does not add the Bearer Token out of the box. A good way to handle all those scenarios is to add an Interceptor which will be hooked to all http actions adding the token. This way you would not need to add it within your get methods anymore eiter.

https://angular.io/api/common/http/HttpInterceptor

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthorizeService } from './authorize.service';
import { mergeMap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class AuthorizeInterceptor implements HttpInterceptor {
constructor(private authorize: AuthorizeService) { }
intercept(req: HttpRequest, next: HttpHandler): Observable> {
return this.authorize.getAccessToken()
.pipe(mergeMap(token => this.processRequestWithToken(token, req, next)));
}
// Checks if there is an access_token available in the authorize service
// and adds it to the request in case it's targeted at the same origin as the
// single page application.
private processRequestWithToken(token: string, req: HttpRequest, next: HttpHandler) {
if (!!token && this.isSameOriginUrl(req)) {
req = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`
}
});
}
return next.handle(req);
}
private isSameOriginUrl(req: any) {
// It's an absolute url with the same origin.
if (req.url.startsWith(`${window.location.origin}/`)) {
return true;
}
// It's a protocol relative url with the same origin.
// For example: //www.example.com/api/Products
if (req.url.startsWith(`//${window.location.host}/`)) {
return true;
}
// It's a relative url like /api/Products
if (/^\/[^\/].*/.test(req.url)) {
return true;
}
// It's an absolute or protocol relative url that
// doesn't have the same origin.
return false;
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Mario Scheeren6y ago
Well your hubconnection does not add the Bearer Token out of the box. A good way to handle all those scenarios is to add an Interceptor which will be hooked to all http actions adding the token. This way you would not need to add it within your get methods anymore eiter.

https://angular.io/api/common/http/HttpInterceptor
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthorizeService } from './authorize.service';
import { mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthorizeInterceptor implements HttpInterceptor {
  constructor(private authorize: AuthorizeService) { }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    return this.authorize.getAccessToken()
      .pipe(mergeMap(token => this.processRequestWithToken(token, req, next)));
  }

  // Checks if there is an access_token available in the authorize service
  // and adds it to the request in case it's targeted at the same origin as the
  // single page application.
  private processRequestWithToken(token: string, req: HttpRequest, next: HttpHandler) {
    if (!!token && this.isSameOriginUrl(req)) {
      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    return next.handle(req);
  }

  private isSameOriginUrl(req: any) {
    // It's an absolute url with the same origin.
    if (req.url.startsWith(`${window.location.origin}/`)) {
      return true;
    }

    // It's a protocol relative url with the same origin.
    // For example: //www.example.com/api/Products
    if (req.url.startsWith(`//${window.location.host}/`)) {
      return true;
    }

    // It's a relative url like /api/Products
    if (/^\/[^\/].*/.test(req.url)) {
      return true;
    }

    // It's an absolute or protocol relative url that
    // doesn't have the same origin.
    return false;
  }
}
0