Authorization and Authentication with AngularJS + Jersey

Workflow

    • User provides credentials which are sent to the server for identification.
    • When the user is identified we perform the following task:
      1. A highly random, un-guessable string is generated.
      2. A JWT is generated with the User ID as subject and the random string as a claim.
      3. Store the JWT in cookie with HttpOnly, Secure flags (our session cookie).
      4. Store the random string in an another cookie with Secure flag only (xsrf cookie).

The Login resource :


All ajax requests should append the random string as the X-XSRF-Token Header. The server should reject any request that does not match between the supplied header and the claim of the session cookie.

The Jersey filter :


The AngularJS way...

The session cookie is hidden from javascript because of HttpOnly flag. Consequently, we need to make a request (i.e. /api/current) on route change event (AuthService.getUser()). If the session cookie has expired or does not exist the endpoint should return an error (401 - Unauthorized). The $http interceptor will do the rest if any errors.

Angular (v1) | run :


Angular (v1) | AuthService.getUser()


We check if user is logged in, otherwise we try to retrieve the xsrf cookie in order to make a request to the endpoint by passing the value to the header.

Comments

  1. Vlad BALAN (admin)5/03/2018 02:07:00 AM

    Hello, thanks a lot for the example, excellent. Source code available somewhere? :)

    ReplyDelete
    Replies
    1. Remy Penchenat5/03/2018 02:33:00 AM

      Hi,

      Thanks for your comment. Sorry but for privacy reason I cannot publish the code. In my tuto, you have all the clue to implement your authorization process easily.

      Thanks

      Delete

Post a Comment

Popular posts from this blog

Spring JPA : Using Specification with Projection

You may probably know that using Specification with Projection is not possible at this moment. I'll show you how you can easily bypass this problem using the JPA Criteria. 1. Create an extended repository We begin by creating an extending global repository as follow : You can find more information here . 2. Add our custom method In order to limit the fields returned for each item, the consumer of my API must provide the required fields this way: /orders?fields=productId,name,quantity . ( Best Practices ) Basically, I'm defining the SELECT clause with the returned fields (cf. getSelections() ): 😎Happy coding...
Read more

Chip input using Reactive Form

The Chips component documentation from the angular material website, describes how to use the MatChipInput directive with a chip-list for adding or removing chips. I'll show you how you can implement the same component using Reactive Form. The HTML template: The TS component file:   As you can see, we use the FormBuilder class to simplify the form creation. We define our requirements as a  FormArray within our FormGroup. The requirements will be accessed in our template with this expression inside the *ngFor of <mat-chip></mat-chip> : *ngFor="let requirement of form.get('requirements').controls; let i = index;" In the ChipComponent class, the requirements array is accessed by using this expression: this.form.get('requirements') as FormArray; Thanks
Read more