georgwittberger / spasso-example

Example project to demonstrate browser-based OpenID Connect authentication with Keycloak and Spring Boot resource server

Single Page Application Single Sign On Example

This repository provides an example project to demonstrate a browser-based OpenID Connect authentication process involving a single page application, an external identity provider and a secured resource server. The single page application performs the authorization code flow directly in the browser and retrieves the token from the identity provider. Then it uses the access token to make an authorized request to the API of the resource server which verifies the token using the JWK set provided by the OpenID Connect server.

Used Technologies

In this example project we use the following technologies:

• Spring Boot + Spring MVC + Spring Security for the resource server

• Vue.js + Vue CLI for the single page application

• Keycloak as identity provider and OpenID Connect server

Prerequisites

• Java Development Kit 10 (with environment variable JAVA_HOME set to installation directory)

• Node.js 8.10.x (or higher), NPM 5.6.0 (or higher)

• Keycloak 4.0.0

• Free local ports: 4200, 8080, 8081

Getting Started

Keycloak Setup

1. Start Keycloak on local port 8080 and open the administration console

2. Add a new realm and select the import file spasso-realm.json from this repository

3. Create a new user within the realm for testing

Running the Resource Server

1. Open a terminal in project directory spasso-resource-server

2. Run the command: mvnw spring-boot:run

Running the Single Page Application

1. Open a terminal in project directory spasso-browser-app

2. Run the command: npm install

3. Run the command: npm start

Try the Example

1. Open the single page application in the browser: http://localhost:4200

2. Note that there is no personal message since you are not authenticated.

3. Click the login button. You are redirected to the Keycloak server for login.

4. Authenticate with the user created in the realm.

5. You are redirected back to the single page application.

6. Note that you get a personal message (fetched from the resource server) with your username now.

License

MIT