0

I am fairly new to Angular, JWT, oAuth, and CORS.

For various reasons, our hope is to separate our teams into 2 distinct roles (based on geographic location). We have 1 team focused on the service layer (Spring layer with RESTful API), while another team will focus on UI-only (possibly deployed from a separate server for a few other reasons).

I know cross domain communication is possible with CORS, so the UI should be able to communicate to a server that didn't host it... but I'm trying to figure out if we can launch a UI-only Angular application and pass in a JWT token at launch. All examples online have the UI sending a request with a user/pass in order to receive a token. Essentially, we want to have the Service team handle all the IdP/token/etc work, while the UI focuses on just the UI.

Very High Level Concept:

  1. The Server side uses a basic .jsp page to redirect the user to our authentication service(s), then authenticate the user.
  2. Once the user is authenticated, the service layer team would launch our separate User Interface (written using Angular) and pass the UI a token to establish the trust relationship.

My Question involves the high level workflow in which this could (should) occur. I assume I have 2 options, but not sure which would be recommended.

  1. Can/should an Angular application be launched ("UI-only") with a token passed in? Essentially, receive a token as a request parameter?
  2. Can/should an Angular application first launch, then make an immediate request for a token (maybe in an Angular lifecycle event)?
sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
ribo916
  • 3
  • 2
  • 1
    Is the token a requirement for the app start-up? If not I would have the token only be requested when necessary – yoonjesung Aug 22 '17 at 00:30

1 Answers1

0

Yeah that shouldn't be a problem. In the module that bootstraps the main angular app, you can specify custom providers that will let you do runtime configuration/input for your app. In the providers line of your main NgModule you can do stuff like:

providers: [ {provide: MyCustomInjectableClass, useValue: somePredefinedObjectHere }]

You'd just to have make sure that predefined object is imported into the Module file correctly every time the app is boostrapped.

Also, many people use Angular's Injection Token class for this:

https://angular.io/api/core/InjectionToken

Documentation is pretty scant, as with all things Angular 2 / 4, but if you search for 'Opaque Token' as well as 'Injection Token', you'll see how its done. They deprecated OpaqueToken and replaced with Injection Token, but they are essentially the same thing except the injection token is typed. There are some good resources here:

Angular 2 OpaqueToken vs Angular 4 InjectionToken

What is in Angular 2 Opaque Token and What's the Point?

And here's a rather complicated but real-world example of how Injection Tokens and the module providers metadata are used to provide various types of runtime config: https://github.com/angular/angular/blob/master/packages/platform-webworker/src/worker_render.ts#L97

diopside
  • 2,981
  • 11
  • 23