Technology
Fullstack OAuth2 - Angular, Spring Boot & Keycloak
Added by sandeep sangwan
What You'll Learn
- How to configure Keycloak as an identity provider for OAuth2.
- How to implement an Angular web application that authenticates users via Keycloak and obtains access tokens.
- How to build a Spring Boot API that is secured with OAuth2 and authorizes access based on user roles.
Video Breakdown
This video demonstrates how to build a full-stack OAuth2 secured web application using Angular, Spring Boot, and Keycloak. It covers setting up Keycloak as an identity provider, creating an Angular web app for user authentication, and building a Spring Boot API secured with OAuth2 and role-based authorization.
Key Topics
Oauth2 Authentication
Keycloak Setup
Angular OIDC
Spring Security
JWT Authorization
Resource Server
Video Index
Keycloak Setup and Configuration
This module covers setting up Keycloak as an identity provider using Docker, configuring realms, cli...
This module covers setting up Keycloak as an identity provider using Docker, configuring realms, clients, users, and roles.
Docker Configuration for Keycloak
1:09 - 2:57
Explains the Dockerfile and Docker Compose configuration for running Keycloak with a PostgreSQL database.
Docker Compose
Postgresql Database
Environment Variables
Keycloak Admin Console and Realm Setup
2:50 - 3:44
Demonstrates how to access the Keycloak admin console and configure realms, clients, and user roles.
Admin Console
Realm Creation
Client Configuration
Configuring Clients and Users in Keycloak
3:44 - 5:01
Details the steps to create clients, configure redirect URLs, create realm roles, and assign roles to users.
Client Urls
Realm Roles
User Assignment
Angular Web App Implementation
This module focuses on building an Angular web application that integrates with Keycloak for user au...
This module focuses on building an Angular web application that integrates with Keycloak for user authentication using the angular-oauth2-oidc library.
Integrating Angular OIDC Library
5:09 - 6:19
Shows how to install the angular-oauth2-oidc library and bootstrap the Angular application to initialize the OAuth2 service.
Library Installation
Bootstrap Application
HTTP Client
Configuring OAuth2 Settings in Angular
6:19 - 7:58
Explains how to configure the OAuth2 settings, including issuer URL, token endpoint, redirect URL, client ID, and response type.
Issuer URL
Token Endpoint
Client ID
Initializing the OAuth2 Service and User Login
7:58 - 10:08
Demonstrates how to initialize the OAuth2 service, set up automatic token refresh, and trigger the user login flow.
Token Refresh
Login Flow
Discovery Document
Implementing Logout Functionality
11:29 - 12:30
Covers adding a logout button and implementing the logout functionality using the OIDC service.
Logout Button
Logout Function
Redirection
Spring Boot API Development and Security
This module covers creating a Spring Boot API, securing it with Spring Security and OAuth2, and conf...
This module covers creating a Spring Boot API, securing it with Spring Security and OAuth2, and configuring a custom JWT converter.
Creating a Spring Boot Project with Dependencies
12:37 - 13:10
Describes how to create a new Spring Boot project and add necessary dependencies like Spring Web, Spring Security, and OAuth2 Resource Server.
Spring Web
Spring Security
Oauth2 Resource Server
Custom JWT Class and Converter
13:10 - 14:30
Explains how to create a custom JWT class and a converter to extract relevant data from the JWT.
JWT Class
JWT Converter
Granted Authorities
Configuring the Security Filter Chain
15:21 - 15:50
Details how to configure the security filter chain to enable CORS, authorize HTTP requests, and use the custom JWT converter.
CORS
Authorize HTTP Requests
Security Filter
API Endpoint Implementation and Testing
This module focuses on implementing an API endpoint in Spring Boot, accessing user information from ...
This module focuses on implementing an API endpoint in Spring Boot, accessing user information from the security context, and testing the end-to-end OAuth2 flow.
Creating a REST Controller and API Endpoint
18:03 - 19:37
Demonstrates how to create a REST controller and define an API endpoint that returns a message.
REST Controller
API Endpoint
CORS Configuration
Accessing User Information from Security Context
19:31 - 20:12
Explains how to access the security context holder to retrieve user information from the custom JWT class.
Security Context Holder
Custom JWT
User Information
Implementing API Call in Angular and Testing
20:19 - 22:29
Shows how to implement an API call in the Angular web app, add the access token to the HTTP header, and test the end-to-end OAuth2 flow.
HTTP Client
Access Token Header
End-to-End Testing
Role-Based Authorization
This module covers how to implement role-based authorization to restrict access to API endpoints bas...
This module covers how to implement role-based authorization to restrict access to API endpoints based on user roles defined in Keycloak.
Extracting Granted Authorities from JWT
22:51 - 24:29
Explains how to extract granted authorities (user roles) from the JWT and add them to the list of authorities.
JWT Realm Access
Granted Authorities
Role Prefix
Enabling Method Security and Applying Authorization
24:57 - 25:33
Demonstrates how to enable method security in Spring Boot and use the `@PreAuthorize` annotation to restrict access to the hello endpoint based on user roles.
Enable Method Security
Preauthorize
Spring Expression
Testing Role-Based Authorization
25:33 - 26:31
Shows how to test the role-based authorization by logging in with a user that has the required role and then removing the role to verify that access is denied.
Positive Case
Negative Case
Forbidden Response
Questions This Video Answers
What is OAuth2 and why is it important?
OAuth2 is a state-of-the-art authentication and authorization mechanism that allows secure access to APIs. It's important for protecting web applications and APIs by verifying user identity and permissions.
How does Keycloak function as an identity provider?
Keycloak manages user identities and authentication. It provides login pages, issues access tokens, and verifies user credentials, allowing applications to delegate authentication to a central service.
What is the role of the Angular OIDC library?
The Angular OIDC library simplifies the OAuth2 login flow in Angular applications. It handles redirection to the identity provider, fetches access tokens, and refreshes them automatically.
How does Spring Security secure the API endpoints?
Spring Security provides a filter chain that intercepts incoming requests and verifies the access token. It also allows configuring authorization rules based on user roles, ensuring that only authorized users can access specific endpoints.
What is a JSON Web Token (JWT) and how is it used?
A JWT is a standard for securely transmitting information as a JSON object. In this context, it's used as an access token, containing user information and roles, which the API uses to authorize requests.
How can I restrict API access to users with specific roles?
By using Spring Security's `@PreAuthorize` annotation and configuring the security filter chain to extract user roles from the JWT, you can enforce role-based access control on API endpoints.