Migrate OIDCKeycloak example to Keycloak 26.x

pbernet · Oct 20, 2024 · a42e325 · a42e325
1 parent e90bb06
commit a42e325
Show file tree

Hide file tree

Showing 4 changed files with 1,911 additions and 68 deletions.
diff --git a/build.sbt b/build.sbt
@@ -15,7 +15,7 @@ val kafkaVersion = "3.7.0"
 val activemqVersion = "5.18.5" // We are stuck with 5.x
 val artemisVersion = "2.37.0"
 val testContainersVersion = "1.20.1"
-val keycloakVersion = "24.0.4"
+val keycloakVersion = "26.0.1"
 val sttpVersion = "3.9.0"
 val influxdbVersion = "7.1.0"
 val awsClientVersion = "2.25.32"
@@ -128,7 +128,7 @@ libraryDependencies ++= Seq(
   "com.crobox.clickhouse" %% "client" % "1.2.2",
 
   "org.opensearch" % "opensearch-testcontainers" % "2.0.1",
-  "com.github.dasniko" % "testcontainers-keycloak" % "3.3.1",
+  "com.github.dasniko" % "testcontainers-keycloak" % "3.5.1",
   "eu.rekawek.toxiproxy" % "toxiproxy-java" % "2.1.7",
   "org.testcontainers" % "junit-jupiter" % testContainersVersion % Test,
   "org.junit.jupiter" % "junit-jupiter-engine" % "5.9.2" % Test,

diff --git a/src/main/resources/KeycloakClient.html b/src/main/resources/KeycloakClient.html
@@ -1,12 +1,13 @@
 <!--
-  HTML5 client, updated according to:
-  https://www.keycloak.org/docs/24.0.4/securing_apps
+  HTML5 client with Keycloak Javascript adapter (updated to 26.x fashion)
+  https://www.keycloak.org/securing-apps/javascript-adapter
+  https://www.keycloak.org/docs/latest/upgrading/index.html#keycloak-js
   -->
 
-<html>
+<html lang="en">
 <head>
-    <script src="http://localhost:%%PORT%%/js/keycloak.js"></script>
-    <title>Keycloak test page</title>
+    <script src="/js/keycloak.js"></script>
+    <title>Keycloak test client</title>
 </head>
 <body>
 
@@ -37,13 +38,39 @@
 </div>
 
 <h2>Result</h2>
-<pre style="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap;" id="output"></pre>
+<pre style="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap;"
+     id="output"></pre>
 
 <h2>Events</h2>
-<pre style="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap;" id="events"></pre>
+<pre style="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap;"
+     id="events"></pre>
 
 
 <script>
+    let keycloak;
+
+    window.onload = async function () {
+        keycloak = new Keycloak({
+            url: 'http://localhost:%%PORT%%',
+            realm: 'test',
+            clientId: 'my-test-client'
+        });
+
+        // Flow can be changed to 'implicit' or 'hybrid', but then client must enable implicit flow in admin console too
+        const initOptions = {
+            responseMode: 'fragment',
+            flow: 'standard'
+        };
+
+        try {
+            const authenticated = await keycloak.init(initOptions);
+            output('Init Success (' + (authenticated ? 'Authenticated' : 'Not Authenticated') + ')');
+            setupKeycloakEventHandlers();
+        } catch (error) {
+            output('Init Error');
+        }
+    };
+
     function loadUsers() {
         console.log("About to load users...")
         const url = 'http://127.0.0.1:6002/users';
@@ -108,13 +135,13 @@ <h2>Events</h2>
     }
 
     function refreshToken(minValidity) {
-        keycloak.updateToken(minValidity).then(function(refreshed) {
+        keycloak.updateToken(minValidity).then(function (refreshed) {
             if (refreshed) {
                 output(keycloak.tokenParsed);
             } else {
                 output('Token not refreshed, valid for ' + Math.round(keycloak.tokenParsed.exp + keycloak.timeSkew - new Date().getTime() / 1000) + ' seconds');
             }
-        }).catch(function() {
+        }).catch(function () {
             output('Failed to refresh token');
         });
     }
@@ -148,61 +175,45 @@ <h2>Events</h2>
         document.getElementById('events').innerHTML = new Date().toLocaleString() + "\t" + event + "\n" + e;
     }
 
-    // We initialize here to handle dynamic port (vs in json file)
-    let keycloak = new Keycloak({
-        url: 'http://localhost:%%PORT%%',
-        realm: 'test',
-        clientId: 'my-test-client'
-    });
-
-
-    keycloak.onAuthSuccess = function () {
-        event('Auth Success');
-    };
-
-    keycloak.onAuthError = function (errorData) {
-        event("Auth Error: " + JSON.stringify(errorData) );
-    };
-
-    keycloak.onAuthRefreshSuccess = function () {
-        event('Auth Refresh Success');
-    };
-
-    keycloak.onAuthRefreshError = function () {
-        event('Auth Refresh Error');
-    };
-
-    keycloak.onAuthLogout = function () {
-        event('Auth Logout');
-    };
-
-    keycloak.onTokenExpired = function () {
-        event('Access token expired');
-    };
-
-    keycloak.onActionUpdate = function (status) {
-        switch (status) {
-            case 'success':
-                event('Action completed successfully'); break;
-            case 'cancelled':
-                event('Action cancelled by user'); break;
-            case 'error':
-                event('Action failed'); break;
-        }
-    };
-
-    // Flow can be changed to 'implicit' or 'hybrid', but then client must enable implicit flow in admin console too
-    const initOptions = {
-        responseMode: 'fragment',
-        flow: 'standard'
-    };
-
-    keycloak.init(initOptions).then(function(authenticated) {
-        output('Init Success (' + (authenticated ? 'Authenticated' : 'Not Authenticated') + ')');
-    }).catch(function() {
-        output('Init Error');
-    });
-
+    function setupKeycloakEventHandlers() {
+        keycloak.onAuthSuccess = function () {
+            event('Auth Success');
+        };
+
+        keycloak.onAuthError = function (errorData) {
+            event("Auth Error: " + JSON.stringify(errorData));
+        };
+
+        keycloak.onAuthRefreshSuccess = function () {
+            event('Auth Refresh Success');
+        };
+
+        keycloak.onAuthRefreshError = function () {
+            event('Auth Refresh Error');
+        };
+
+        keycloak.onAuthLogout = function () {
+            event('Auth Logout');
+        };
+
+        keycloak.onTokenExpired = function () {
+            event('Access token expired');
+        };
+
+        keycloak.onActionUpdate = function (status) {
+            switch (status) {
+                case 'success':
+                    event('Action completed successfully');
+                    break;
+                case 'cancelled':
+                    event('Action cancelled by user');
+                    break;
+                case 'error':
+                    event('Action failed');
+                    break;
+            }
+        };
+    }
 </script>
 </body>
 </html>