CODEWITHSUNDEEP
springsecurityangularhttp-authentication
Eric
Eric

Reputation: 515

angular2 authenticate to spring http basic auth with end user credentials

I have a bunch of REST web services powered by Spring Boot. These web services are protected by a basic http authentication.

I try to create an Angular2 front end, hosted on another server. I want the front end to interact with the spring boot back end, using credentials provided by the user in the front end.

Right now, the user can log in through the angular2 front end, but then, even with user authenticate, each call to the back end requires authentication, which is normal I guess.

So my question is: how can I tell angular2 to automatically add the authorization header with the user credentials only when the user is logged?

Thanks for your help

Upvotes: 0

Views: 3673

Answers (2)

dspies
dspies

Reputation: 1543

I would have a look at what Ben Nadel has done http://www.bennadel.com/blog/3047-creating-specialized-http-clients-in-angular-2-beta-8.htm (or the typescript version by Sam Storie https://blog.sstorie.com/adapting-ben-nadels-apigateway-to-pure-typescript/). I have not had a chance to use this in an app yet, but it seems very promising.

Also, if you have not already, I would take a look at Dave Syer's Spring Boot and AngularJS tutorials (https://spring.io/guides/tutorials/spring-security-and-angular-js/). They are written for Angular 1, but they are very useful.

Below is my "solution". It works, but I am not thrilled with it:

main.ts:

import { CsrfBaseRequestOptions } from './app/shared';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  HTTP_PROVIDERS,
  ...
  provide(RequestOptions, { useClass: CsrfBaseRequestOptions })
]);

XhrBaseRequestOptions:

@Injectable()
export class XhrBaseRequestOptions extends BaseRequestOptions {

  constructor() {
    super();

    this.headers.append('X-Requested-With', 'XMLHttpRequest');
  }

}

CsrfBaseRequestOptions:

import { Injectable } from '@angular/core';
import { XhrBaseRequestOptions } from './xhr-base-request-options';

@Injectable()
export class CsrfBaseRequestOptions extends XhrBaseRequestOptions {

  constructor() {
    super();

    let csrfToken = this.getCsrfToken('X-CSRF-TOKEN');
    if (csrfToken) {
      this.headers.append('X-CSRF-TOKEN', csrfToken);
    }
  }

  getCsrfToken(tokenName:string):string {
    let tokenNameEQ = tokenName + '=';
    let ck = document.cookie;
    let ca = ck.split(';');

    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(tokenNameEQ) === 0) return c.substring(tokenNameEQ.length, c.length);
    }
    return null;
  }

}

Upvotes: 1

TommyF
TommyF

Reputation: 7150

We have a similar situation and used a custom service to handle the auth-header.

The service has a Http injected and if a JWT is available in localstorage it adds the auth header to the get/post request

let authHeader = new Headers();
authHeader.append('Authorization', 'Bearer ' + jwt);

And then add it to the request via

this.http.get(url, { headers: authHeader });

Hope that helps...

Upvotes: 1

Related Questions