This repository provides an angular and maven project for managing a foo’s information.
✨ Getting Started | 🚀 Download |
---|
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:
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
- 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)
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:
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.
-
Open the Keycloak Admin Console
-
Hover the mouse over the dropdown in the top-left corner where it says
Master
, then click onAdd realm
-
Fill in the form with the following values:
- Name:
myrealm
- Name:
-
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:
-
Open the Keycloak Admin Console
-
Click
Clients
(left-hand menu)- Click
Create
(top-right corner of table)
- Click
-
Fill in the form with the following values:
-
Client ID:
backend-client
-
Client Protocol: openid-connect
-
-
Click
Save
The client will need a bearer-only access type. To do this:
-
Click
Settings
(top of the page) -
Fill in the form with the following values:
- Access Type:
bearer-only
- Access Type:
-
Click
Save
Now let's create the client for the frontend:
-
Open the Keycloak Admin Console
-
Click
Clients
(left-hand menu)- Click
Create
(top-right corner of table)
- Click
-
Fill in the form with the following values:
-
Client ID:
frontend-client
-
Client Protocol: openid-connect
-
-
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:
-
Click
Settings
(top of the page) -
Fill in the form with the following values:
-
Valid Redirect URIs:
http://localhost:4200/*
-
Web Origins:
*
-
-
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
.
Initially there are no roles in a client, so let’s create one:
-
Click
Clients
(left-hand menu)- Click
backend-client
(Client ID column of table)
- Click
-
Click
Roles
(top of the page) -
Click
Add Role
(top-right corner of table) -
Fill in the form with the following values:
-
Role Name:
ROLE_USER
-
Web Origins:
*
-
-
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:
-
Open the Keycloak Admin Console
-
Click
Roles
(left-hand menu)- Click
Add Role
(top-right corner of table)
- Click
-
Fill in the form with the following values:
- Role Name:
realm-admin
- Role Name:
-
Click
Save
The realm-admin
role will need Composite Roles
enabled, as we want to associate backend-client
roles to it. To do this:
-
Click
Details
(top of the page) -
Click
ON
next toComposite Roles
- Select
backend-client
next toClient Roles
- Select
-
Add in the
Associated Roles
the following roles:ROLE_ADMIN
-
Open the Keycloak Admin Console
-
Click
Roles
(left-hand menu)- Click
Add Role
(top-right corner of table)
- Click
-
Fill in the form with the following values:
- Role Name:
realm-user
- Role Name:
-
Click
Save
The realm-user
role will need Composite Roles
enabled, as we want to associate backend-client
roles to it. To do this:
-
Click
Details
(top of the page) -
Click
ON
next toComposite Roles
- Select
backend-client
next toClient Roles
- Select
-
Add in the
Associated Roles
the following roles:ROLE_USER
Initially there are no users in a new realm, so let’s create one:
-
Open the Keycloak Admin Console
-
Click
Users
(left-hand menu)- Click
Add user
(top-right corner of table)
- Click
-
Fill in the form with the following values:
-
Username:
myuser
-
First Name: Your first name
-
Last Name: Your last name
-
-
Click
Save
The user will need an initial password set to be able to login. To do this:
-
Click
Credentials
(top of the page) -
Fill in the
Set Password
form with a password -
Click
ON
next toTemporary
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.
-
Open the Keycloak Account Console
-
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.
-
Open the Keycloak Admin Console
-
Click
Users
(left-hand menu)- Click
admin
(ID column of table)
- Click
-
Click
Role Mappings
(top of the page) -
In
Realm Roles
add the following Available Roles:realm-admin
realm-user
-
Open the Keycloak Admin Console
-
Click
Users
(left-hand menu)- Click
user
(ID column of table)
- Click
-
Click
Role Mappings
(top of the page) -
In
Realm Roles
add the following Available Roles:realm-user