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

Keycloak has become quite popular lately. Following the example of a colleague, I decided to try it out and assess its capabilities. Here's how I got started with Keycloak and built a basic login page using Docker:

1. Begin by pulling the Keycloak Docker image and initiate the container with the command:

```

docker run --rm -p 8080:8080 \

-e KEYCLOAK_ADMIN=admin \

-e KEYCLOAK_ADMIN_PASSWORD=admin \

quay.io/keycloak/keycloak:24.0.3 start-dev

```

2. Access the Keycloak admin console by visiting the URL: http://localhost:8080. You'll be greeted with the Keycloak login page.

3. Log in to the admin console using the default username and password: admin/admin. Upon successful login, you'll have access to the Keycloak interface.

4. To create a test user, navigate to the left menu and select Users > Add user. Create a new user named "test" for testing purposes.

5. Next, create a test client by going to Clients > Create client in the admin console. Enter the following details:

- Client ID: my-html-client

- Home URL: / (where you'll host your HTML file)

- Valid redirect URIs: http://localhost:8000 (this is where your HTML page will reside)

- Web origins: http://localhost:8000

6. Now, create a simple login page using HTML. Create a file named "index.html" with the following code:

```html

<!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>

```

7. To view your login page, start a simple web server. Navigate to the folder containing your "index.html" file and run the command:

```

python -m http.server 8000

```

8. Open your web browser and visit http://localhost:8000. You'll see the Keycloak test page with a login button.

9. Click the "Login" button. You'll be redirected to the Keycloak authentication screen. Enter the credentials: username: test, password: password. Upon successful authentication, you'll be redirected back to the login page, indicating a successful login process.

Throughout the setup, Keycloak's configuration can be conveniently managed via the user-friendly GUI, making it approachable for beginners. The authentication flow was verified quickly, demonstrating its potential usefulness for future development projects. As you become more familiar with Keycloak, you can delve into more advanced configuration settings and explore its additional features.