The tutorial is Part 1 of the series: Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack. In this part, we show you Overview and Architecture of the System (from Angular frontend to SpringBoot backend). You will see the combination of big components and what you need to do for the security part (authentication & authorization) of full-stack web development.
– Part 2: Build Spring Boot Backend
– Part 3: Build Angular Frontend
Contents
JSON Web Token
JSON Web Token (JWT) defines a compact and self-contained way for securely transmitting information between parties as a JSON object.
Scenarios where JSON Web Tokens are useful:
- Authorization: the most common scenario for using JWT. Single Sign On is a feature that widely uses JWT
- Information Exchange: Because JWTs can be signed, JSON Web Tokens are a good way of securely transmitting information between parties.
JSON Web Tokens consist of 3 parts:
- Header
- Payload
- Signature
-> JWT
looks like Header-Base64-String.Payload-Base64-String.Signature-Base64-String
Header consists of two parts:
- token type.
- hashing algorithm.
-> Example:
{ "alg": "HS256", "typ": "JWT" } |
Payload contains the claims. Claims are statements about an entity and additional information.
There are 3 types of claims ->
Registered claims
-> These are a set of predefined claims:iss
(issuer),exp
(expiration time),sub
(subject)Public claims
Private claims
Example ->
{ "sub": "thomasgkz", "iat": 1537603195, "exp": 1537689595 } |
Signature -> To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.
Example ->
HMACSHA512( base64UrlEncode(header) + "." + base64UrlEncode(payload), your-256-bit-secret ) |
Combine all together, we get 3 Base64-URL strings separated by dots,
-> Example:
eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ0aG9tYXNna3oiLCJpYXQiOjE1Mzc2MDMxOTUsImV4cCI6MTUzNzY4OTU5NX0.m2YMjTYmOnfR7nnVNxqCzWbQ2FhKRe1eiizxnC2TF4eAoEzKlwo7PheVkKcxj08ST3vB-ZOIhiORvYVfSgzcog |
When accessing a protected route or resource, the user agent should send the JWT
, typically in the Authorization header using the Bearer schema.
-> Example:
Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ0aG9tYXNna3oiLCJpYXQiOjE1Mzc2MDMxOTUsImV4cCI6MTUzNzY4OTU5NX0.m2YMjTYmOnfR7nnVNxqCzWbQ2FhKRe1eiizxnC2TF4eAoEzKlwo7PheVkKcxj08ST3vB-ZOIhiORvYVfSgzcog |
Angular Spring Boot JWT Authentication example
Goal
We will build an application, from frontend (Angular) to backend (Spring Boot), which allows users to register, login account. This application is secured with JWT (JSON Web Token) authentication and Spring Security. Then, depending on the role of current User (user, pm or admin), this system accepts what he can access:
The diagram below show how our system handles User Registration and User Login processes:
Demo
Full Stack Architecture
Spring Boot back-end with Spring Security
This is diagram for Spring Security/JWT classes that are separated into 3 layers:
– HTTP
– Spring Security
– REST API
– SecurityContextHolder
provides access to the SecurityContext
.
– SecurityContext
holds the Authentication
and possibly request-specific security information.
– Authentication
represents the principal which includes GrantedAuthority
that reflects the application-wide permissions granted to a principal.
– UserDetails
contains necessary information to build an Authentication
object from DAOs or other source of security data.
– UserDetailsService
helps to create a UserDetails
from a String-based username and is usually used by AuthenticationProvider
.
– JwtAuthTokenFilter
(extends OncePerRequestFilter
) pre-processes HTTP request, from Token, create Authentication
and populate it to SecurityContext
.
– JwtProvider
validates, parses token String or generates token String from UserDetails
.
– UsernamePasswordAuthenticationToken
gets username/password from login Request and combines into an instance of Authentication
interface.
– AuthenticationManager
uses DaoAuthenticationProvider
(with help of UserDetailsService
& PasswordEncoder) to validate instance of UsernamePasswordAuthenticationToken
, then returns a fully populated Authentication
instance on successful authentication.
– SecurityContext
is established by calling SecurityContextHolder.getContext().setAuthentication(…)
with returned authentication
object above.
– AuthenticationEntryPoint
handles AuthenticationException
.
– Access to Restful API is protected by HTTPSecurity and authorized with Method Security Expressions.
For more details, please visit: Spring Security – JWT Authentication Architecture | Spring Boot
Angular front-end with Interceptor
– app.component
is the parent component that contains routerLink
and router-outlet
for routing. It also has an authority
variable as the condition for displaying items on navigation bar.
– user.component
, pm.component
, admin.component
correspond to Angular Components for User Board, PM Board, Admin Board. Each Board uses user.service
to access authority data.
– register.component
contains User Registration form, submission of the form will call auth.service
.
– login.component
contains User Login form, submission of the form will call auth.service
and token-storage.service
.
– user.service
gets access to authority data from Server using Angular HttpClient
($http
service).
– auth.service
handles authentication and signup actions with Server using Angular HttpClient
($http
service).
– every HTTP request by $http
service will be inspected and transformed before being sent to the Server by auth-interceptor
(implements HttpInterceptor
).
– auth-interceptor
check and get Token from token-storage.service
to add the Token to Authorization Header of the HTTP Requests.
– token-storage.service
manages Token inside Browser’s sessionStorage
.
For more details about:
- Interceptor: Angular 6 Http Interceptor – with Node.js RestAPIs
- Routing: Angular 6 Routing/Navigation – with Angular Router Service
- Form Validation: Angular 6 Form Validation example – Template-driven Forms
- Angular 6 HttpClient example: Angular 6 HttpClient – Get/Post/Put/Delete requests + SpringBoot RestAPIs + Bootstrap 4
Last updated on May 30, 2020.
Angular source code sir please?
We will release as soon as possible (part 3), please keep following this series 🙂
Great Work, i find this veery helpfull. Thank’s a lot
God bless your family, your friends, your dog if you have one and especially YOU. Best articles ever read! Thank you very much!
Source code please
Hi,
You can find in the next parts of this series:
– Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack – Part 2: Build Backend
– Angular Spring Boot JWT Authentication example | Angular 6 + Spring Security + MySQL Full Stack – Part 3: Build Frontend
Regards,
grokonez.
Thanks a lot.
where can i find the source code. Thank you
source code please…
Hi, you can find source code in the part 2 and part 3 of this series.