DEV Community

kawasaki031677
kawasaki031677

Posted on Edited on

Getting Started with Keycloak - Building a Simple Login Page with Docker

#keycloak #authentication #docker #tutorial

Introduction

Recently, it seems Keycloak is being used quite frequently. (According to my colleague)
I hadn't tried it yet myself, so I decided to give it a simple try to see what it's all about.

Getting Started with Keycloak

1. Pull the Docker image and start Keycloak

docker run --rm -p 8080:8080 \
  -e KEYCLOAK_ADMIN=admin \
  -e KEYCLOAK_ADMIN_PASSWORD=admin \
  quay.io/keycloak/keycloak:24.0.3 \
  start-dev
Enter fullscreen mode Exit fullscreen mode

2. Access the admin console

Once Keycloak is running, access the admin console at the following URL:

http://localhost:8080
Enter fullscreen mode Exit fullscreen mode

Keycloak login page

You'll see the Keycloak login page.

3. Log in to the admin console

Enter the username (admin) and password (admin) to log in to the admin console. The login was successful!

Admin console after login

4. Create a test user

Navigate to the left menu and go to Users → Add user to create a new user. In this example, I created a user named "test".

Create test user

5. Create a test client

Navigate to Clients → Create client in the left menu and enter the following information:

  • Client ID: my-html-client
  • Home URL / Valid redirect URIs / Web origins: http://localhost:8000

(We'll place the HTML file we create later at this URL)

Create test client

6. Create a simple login page

Create a simple HTML file (index.html) to test the login functionality:

<!DOCTYPE html>
<html>
<head>
  <title>Keycloak Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/keycloak-js@24.0.3/dist/keycloak.min.js"></script>
</head>
<body>
  <h1>Keycloak Test Page</h1>
  <button onclick="login()">Login</button>
  <pre id="output"></pre>

  <script>
    const keycloak = new Keycloak({
      url: 'http://localhost:8080/',
      realm: 'master',
      clientId: 'my-html-client',
    });

    function login() {
      keycloak.init({ onLoad: 'login-required' }).then(authenticated => {
        document.getElementById('output').textContent =
          authenticated ? 'Authenticated\n' + JSON.stringify(keycloak.tokenParsed, null, 2) : 'Not Authenticated';
      });
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

7. Start a simple web server

Navigate to the folder where you placed the index.html file and run the following command to start a simple Python web server:

python -m http.server 8000
Enter fullscreen mode Exit fullscreen mode

8. Access the login page

Open your browser and navigate to the following URL to see the test page:

http://localhost:8000
Enter fullscreen mode Exit fullscreen mode

Login page displaying

The page displays successfully with the login button visible.

9. Test the login functionality

Click the Login button and you'll be redirected to the Keycloak authentication screen. After entering your credentials (username: test, password: password), you'll be successfully authenticated!

Authenticated successfully

Summary

Since configuration can be done through a GUI, it left a beginner-friendly impression on me. I was able to verify the authentication flow in a short time, so it seems very useful for future development. Next time, I plan to explore the more detailed configuration settings and advanced features.

Top comments (0)