11<!--
2- HTML5 client, updated according to:
3- https://www.keycloak.org/docs/24.0.4/securing_apps
2+ HTML5 client with Keycloak Javascript adapter (updated to 26.x fashion)
3+ https://www.keycloak.org/securing-apps/javascript-adapter
4+ https://www.keycloak.org/docs/latest/upgrading/index.html#keycloak-js
45 -->
56
6- < html >
7+ < html lang =" en " >
78< head >
8- < script src ="http://localhost:%%PORT%% /js/keycloak.js "> </ script >
9- < title > Keycloak test page </ title >
9+ < script src ="/js/keycloak.js "> </ script >
10+ < title > Keycloak test client </ title >
1011</ head >
1112< body >
1213
3738</ div >
3839
3940< h2 > Result</ h2 >
40- < pre style ="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap; " id ="output "> </ pre >
41+ < pre style ="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap; "
42+ id ="output "> </ pre >
4143
4244< h2 > Events</ h2 >
43- < pre style ="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap; " id ="events "> </ pre >
45+ < pre style ="background-color: #ddd; border: 1px solid #ccc; padding: 10px; word-wrap: break-word; white-space: pre-wrap; "
46+ id ="events "> </ pre >
4447
4548
4649< script >
50+ let keycloak ;
51+
52+ window . onload = async function ( ) {
53+ keycloak = new Keycloak ( {
54+ url : 'http://localhost:%%PORT%%' ,
55+ realm : 'test' ,
56+ clientId : 'my-test-client'
57+ } ) ;
58+
59+ // Flow can be changed to 'implicit' or 'hybrid', but then client must enable implicit flow in admin console too
60+ const initOptions = {
61+ responseMode : 'fragment' ,
62+ flow : 'standard'
63+ } ;
64+
65+ try {
66+ const authenticated = await keycloak . init ( initOptions ) ;
67+ output ( 'Init Success (' + ( authenticated ? 'Authenticated' : 'Not Authenticated' ) + ')' ) ;
68+ setupKeycloakEventHandlers ( ) ;
69+ } catch ( error ) {
70+ output ( 'Init Error' ) ;
71+ }
72+ } ;
73+
4774 function loadUsers ( ) {
4875 console . log ( "About to load users..." )
4976 const url = 'http://127.0.0.1:6002/users' ;
@@ -108,13 +135,13 @@ <h2>Events</h2>
108135 }
109136
110137 function refreshToken ( minValidity ) {
111- keycloak . updateToken ( minValidity ) . then ( function ( refreshed ) {
138+ keycloak . updateToken ( minValidity ) . then ( function ( refreshed ) {
112139 if ( refreshed ) {
113140 output ( keycloak . tokenParsed ) ;
114141 } else {
115142 output ( 'Token not refreshed, valid for ' + Math . round ( keycloak . tokenParsed . exp + keycloak . timeSkew - new Date ( ) . getTime ( ) / 1000 ) + ' seconds' ) ;
116143 }
117- } ) . catch ( function ( ) {
144+ } ) . catch ( function ( ) {
118145 output ( 'Failed to refresh token' ) ;
119146 } ) ;
120147 }
@@ -148,61 +175,45 @@ <h2>Events</h2>
148175 document . getElementById ( 'events' ) . innerHTML = new Date ( ) . toLocaleString ( ) + "\t" + event + "\n" + e ;
149176 }
150177
151- // We initialize here to handle dynamic port (vs in json file)
152- let keycloak = new Keycloak ( {
153- url : 'http://localhost:%%PORT%%' ,
154- realm : 'test' ,
155- clientId : 'my-test-client'
156- } ) ;
157-
158-
159- keycloak . onAuthSuccess = function ( ) {
160- event ( 'Auth Success' ) ;
161- } ;
162-
163- keycloak . onAuthError = function ( errorData ) {
164- event ( "Auth Error: " + JSON . stringify ( errorData ) ) ;
165- } ;
166-
167- keycloak . onAuthRefreshSuccess = function ( ) {
168- event ( 'Auth Refresh Success' ) ;
169- } ;
170-
171- keycloak . onAuthRefreshError = function ( ) {
172- event ( 'Auth Refresh Error' ) ;
173- } ;
174-
175- keycloak . onAuthLogout = function ( ) {
176- event ( 'Auth Logout' ) ;
177- } ;
178-
179- keycloak . onTokenExpired = function ( ) {
180- event ( 'Access token expired' ) ;
181- } ;
182-
183- keycloak . onActionUpdate = function ( status ) {
184- switch ( status ) {
185- case 'success' :
186- event ( 'Action completed successfully' ) ; break ;
187- case 'cancelled' :
188- event ( 'Action cancelled by user' ) ; break ;
189- case 'error' :
190- event ( 'Action failed' ) ; break ;
191- }
192- } ;
193-
194- // Flow can be changed to 'implicit' or 'hybrid', but then client must enable implicit flow in admin console too
195- const initOptions = {
196- responseMode : 'fragment' ,
197- flow : 'standard'
198- } ;
199-
200- keycloak . init ( initOptions ) . then ( function ( authenticated ) {
201- output ( 'Init Success (' + ( authenticated ? 'Authenticated' : 'Not Authenticated' ) + ')' ) ;
202- } ) . catch ( function ( ) {
203- output ( 'Init Error' ) ;
204- } ) ;
205-
178+ function setupKeycloakEventHandlers ( ) {
179+ keycloak . onAuthSuccess = function ( ) {
180+ event ( 'Auth Success' ) ;
181+ } ;
182+
183+ keycloak . onAuthError = function ( errorData ) {
184+ event ( "Auth Error: " + JSON . stringify ( errorData ) ) ;
185+ } ;
186+
187+ keycloak . onAuthRefreshSuccess = function ( ) {
188+ event ( 'Auth Refresh Success' ) ;
189+ } ;
190+
191+ keycloak . onAuthRefreshError = function ( ) {
192+ event ( 'Auth Refresh Error' ) ;
193+ } ;
194+
195+ keycloak . onAuthLogout = function ( ) {
196+ event ( 'Auth Logout' ) ;
197+ } ;
198+
199+ keycloak . onTokenExpired = function ( ) {
200+ event ( 'Access token expired' ) ;
201+ } ;
202+
203+ keycloak . onActionUpdate = function ( status ) {
204+ switch ( status ) {
205+ case 'success' :
206+ event ( 'Action completed successfully' ) ;
207+ break ;
208+ case 'cancelled' :
209+ event ( 'Action cancelled by user' ) ;
210+ break ;
211+ case 'error' :
212+ event ( 'Action failed' ) ;
213+ break ;
214+ }
215+ } ;
216+ }
206217</ script >
207218</ body >
208219</ html >
0 commit comments