This repository provides an angular and maven project for managing a foo’s information.

Follow the below instructions to get started with Guess the Number Game source code:

• Make sure you have all Requirements
• Setup Keykloak
• Download Source Code
• Open Project in your favourite Java IDE and Enjoy!

Make sure you have the below requirements before starting:

• OpenJDK 11 (LTS)
• IntelliJ IDEA
• Angular 13
• Keycloak 16.1.0

You can get access to the source code by using one of the following ways:

• ✨ Download Source Code
• 🔥 Clone the repository locally:

git clone https://github.com/germanfica/keycloak-angular-spring-boot.git

• angular-oauth2-oidc

• Spring Boot Starter Security
• Spring Boot Starter Web
• Project Lombok
• Keycloak Spring Boot Default Starter
• Keycloak Admin REST Client

• mvn clean
• mvn clean install

Open src/main/resources/application.properties

server.port=8080

# keycloak
keycloak.realm = myrealm
keycloak.auth-server-url = http://localhost:8180/auth
keycloak.ssl-required = external
keycloak.resource = backend-client
keycloak.use-resource-role-mappings = true
keycloak.bearer-only = true

# keycloak master realm
app.master.realm = master
app.master.username = admin
app.master.password = admin
app.master.clientId = admin-cli

Open src/environments/environment.ts

export const environment = {
  production: false,
  foo_api: 'http://localhost:8080/foo/',
  user_api: 'http://localhost:8080/user/',
  authResourceServerConfig: {
    allowedUrls: [
      'http://localhost:8080/foo'
    ],
    sendAccessToken: true
  },
  authConfig: {
    issuer: 'http://localhost:8180/auth/realms/myrealm',
    redirectUri: window.location.origin,
    clientId: 'frontend-client',
    responseType: 'code',
    scope: 'openid profile email offline_access',
    showDebugInformation: true,
  }
};

The http://localhost:8080/foo URL corresponds to the backend FooController in our Spring Boot project.

Import the OAuthModule to src/app/app.module.ts

OAuthModule.forRoot({
  resourceServer: environment.authResourceServerConfig
})

Name: myrealm

Client ID: backend-client
Access Type: bearer-only

Client ID: frontend-client
Valid Redirect URIs: http://localhost:4200/*
Web Origins: *

Client ID: backend-client
Roles: ROLE_USER, ROLE_MODERATOR, ROLE_ADMIN

Role Name: realm-admin
Composite Roles:
  Client: backend-client
    Associated Roles: ROLE_ADMIN

Role Name: realm-user
Composite Roles:
  Client: backend-client
    Associated Roles: ROLE_USER

Username: admin
Email: admin@localhost
Realm Roles: realm-admin, realm-user

Username: user
Email: admin@localhost
Realm Roles: realm-user

Get started with Keycloak. A useful getting started guide can be found in the official documentation. But I strongly recommend you to follow the instructions below, as there are additional things we will need to do for this project.

Or alternatively, you can also watch this YouTube video Autenticación Keycloak + Angular 10 + Spring-Boot full-stack: Parte 2.

Update default Keycloak port (Alternative 1 - Recommended)

Adjusting the port used by Keycloak (Alternative 2)

Start Keycloak

Create an admin user

Login to the admin console

Create a realm

Create a backend client

Create a frontend client

Naming Security Roles

Create client roles

Create realm roles

Create a user

Login to account console

Assign roles to a user

The default port is 8080. Go to standalone/configuration/standalone.xml in the Keycloak installation folder and look for jboss.http.port property. We want to change the default port to 8180.

From this:

<socket-binding name="http" port="${jboss.http.port:8080}"/>

To this:

<socket-binding name="http" port="${jboss.http.port:8180}"/>

You can check the following articles:

• #1 Adjusting the port used by Keycloak.
• #2 Adjusting the port used by Keycloak.

Start Keycloak server by supplying a value for the jboss.socket.binding.port-offset system property. This value is added to the base value of every port opened by the Keycloak server. In this example, 100 is the value.

On Linux run:

$ cd bin
$ ./standalone.sh -Djboss.socket.binding.port-offset=100

On Windows run:

> ...\bin\standalone.bat -Djboss.socket.binding.port-offset=100

And finally Confirm that the Keycloak server is running. Go to http://localhost:8180/auth/admin/ . If the admin console opens, you are ready to continue this guide.

From a terminal open the directory keycloak-16.1.0, then to start Keycloak run the following command.

On Linux run:

bin/standalone.sh

On Windows run:

bin/standalone.bat

Keycloak does not come with a default admin user, which means before you can start using Keycloak you need to create an admin user.

To do this open http://localhost:8180/auth, then fill in the form with your preferred username and password.

Go to the Keycloak Admin Console and login with the username and password you created earlier.

A realm in Keycloak is the equivalent of a tenant. It allows creating isolated groups of applications and users. By default there is a single realm in Keycloak called master. This is dedicated to manage Keycloak and should not be used for your own applications.

Let’s create our first realm.

1. Open the Keycloak Admin Console

2. Hover the mouse over the dropdown in the top-left corner where it says Master, then click on Add realm

3. Fill in the form with the following values:

   • Name: myrealm

4. Click Create

We will need 2 (two) clients, one for the backend and one for the frontend in our realm, so let’s create them:

1. Open the Keycloak Admin Console

2. Click Clients (left-hand menu)

   • Click Create (top-right corner of table)

3. Fill in the form with the following values:

   • Client ID: backend-client

   • Client Protocol: openid-connect

4. Click Save

The client will need a bearer-only access type. To do this:

1. Click Settings (top of the page)

2. Fill in the form with the following values:

   • Access Type: bearer-only

3. Click Save

Now let's create the client for the frontend:

1. Open the Keycloak Admin Console

2. Click Clients (left-hand menu)

   • Click Create (top-right corner of table)

3. Fill in the form with the following values:

   • Client ID: frontend-client

   • Client Protocol: openid-connect

4. Click Save

The client will need a Valid URI pattern in order to be able to redirect to after a successful login or logout. To do this:

1. Click Settings (top of the page)

2. Fill in the form with the following values:

   • Valid Redirect URIs: http://localhost:4200/*

   • Web Origins: *

3. Click Save

Spring Security, when using role-based authentication, requires that role names start with ROLE_. For example, an administrator role must be declared in Keycloak as ROLE_ADMIN or similar, not simply ADMIN.

• Naming Security Roles

Initially there are no roles in a client, so let’s create one:

1. Click Clients (left-hand menu)

   • Click backend-client (Client ID column of table)

2. Click Roles (top of the page)

3. Click Add Role (top-right corner of table)

4. Fill in the form with the following values:

   • Role Name: ROLE_USER

   • Web Origins: *

5. Click Save

Repeat the above steps but now with the following role names:

• ROLE_MODERATOR
• ROLE_ADMIN

We will now need two roles for our realm. So let's create them:

1. Open the Keycloak Admin Console

2. Click Roles (left-hand menu)

   • Click Add Role (top-right corner of table)

3. Fill in the form with the following values:

   • Role Name: realm-admin

4. Click Save

The realm-admin role will need Composite Roles enabled, as we want to associate backend-client roles to it. To do this:

1. Click Details (top of the page)

2. Click ON next to Composite Roles

   • Select backend-client next to Client Roles

3. Add in the Associated Roles the following roles:

   • ROLE_ADMIN

1. Open the Keycloak Admin Console

2. Click Roles (left-hand menu)

   • Click Add Role (top-right corner of table)

3. Fill in the form with the following values:

   • Role Name: realm-user

4. Click Save

The realm-user role will need Composite Roles enabled, as we want to associate backend-client roles to it. To do this:

1. Click Details (top of the page)

2. Click ON next to Composite Roles

   • Select backend-client next to Client Roles

3. Add in the Associated Roles the following roles:

   • ROLE_USER

Initially there are no users in a new realm, so let’s create one:

1. Open the Keycloak Admin Console

2. Click Users (left-hand menu)

   • Click Add user (top-right corner of table)

3. Fill in the form with the following values:

   • Username: myuser

   • First Name: Your first name

   • Last Name: Your last name

4. Click Save

The user will need an initial password set to be able to login. To do this:

1. Click Credentials (top of the page)

2. Fill in the Set Password form with a password

3. Click ON next to Temporary to prevent having to update password on first login

Repeat the above steps but now with the following user names:

• admin
• user

Let’s now try to login to the account console to verify the user is configured correctly.

1. Open the Keycloak Account Console

2. Login with myuser and the password you created earlier

You should now be logged-in to the account console where users can manage their accounts.

1. Open the Keycloak Admin Console

2. Click Users (left-hand menu)

   • Click admin (ID column of table)

3. Click Role Mappings (top of the page)

4. In Realm Roles add the following Available Roles:

   • realm-admin
   • realm-user

1. Open the Keycloak Admin Console

2. Click Users (left-hand menu)

   • Click user (ID column of table)

3. Click Role Mappings (top of the page)

4. In Realm Roles add the following Available Roles:

   • realm-user

• German Fica
• cavanosa