KEYCLOAK-365 Add IDToken properties to JS SDK

examples/demo-template/customer-app-js/src/main/webapp/customers/view.html

@@ -1,25 +1,52 @@
 <html>
 <head>
     <title>Customer View Page</title>
-    <script src="/auth/js/keycloak.js"></script>
+    <script src="http://localhost:8081/auth/js/keycloak.js"></script>
 </head>
 <body bgcolor="#E3F6CE">
 
 <p>Goto: <a href="#" onclick="keycloak.logout()">logout</a></p>
-User <b id="username"></b> made this request.
+User <b id="subject"></b> made this request.
+<p><b>User details (from <span id="profileType"></span>)</b></p>
+<p>Username: <span id="username"></span></p>
+<p>Email: <span id="email"></span></p>
+<p>Full Name: <span id="name"></span></p>
+<p>First: <span id="givenName"></span></p>
+<p>Last: <span id="familyName"></span></p>
+
 <h2>Customer Listing</h2>
 <div id="customers"></div>
 
 <script>
     var keycloak = Keycloak({
         clientId: 'customer-portal',
-        clientSecret: 'password',
         realm: 'demo',
         onload: 'login-required'
     });
 
     var loadData = function () {
-        document.getElementById('username').innerText = keycloak.username;
+        document.getElementById('subject').innerText = keycloak.subject;
+
+        console.debug(keycloak.idToken);
+        if (keycloak.idToken) {
+            document.getElementById('profileType').innerText = 'IDToken';
+            document.getElementById('username').innerText = keycloak.idToken.preferred_username;
+            document.getElementById('email').innerText = keycloak.idToken.email;
+            document.getElementById('name').innerText = keycloak.idToken.name;
+            document.getElementById('givenName').innerText = keycloak.idToken.given_name;
+            document.getElementById('familyName').innerText = keycloak.idToken.family_name;
+        } else {
+            keycloak.loadUserProfile(function() {
+                document.getElementById('profileType').innerText = 'Account Service';
+                document.getElementById('username').innerText = keycloak.profile.username;
+                document.getElementById('email').innerText = keycloak.profile.email;
+                document.getElementById('name').innerText = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
+                document.getElementById('givenName').innerText = keycloak.profile.firstName;
+                document.getElementById('familyName').innerText = keycloak.profile.lastName;
+            }, function() {
+                document.getElementById('profileType').innerText = 'Failed to retrieve user details. Please enable claims or account role';
+            });
+        }
 
         var url = 'http://localhost:8080/database/customers';
 
@@ -50,12 +77,11 @@ User <b id="username"></b> made this request.
 
     };
 
-
-
     var reloadData = function () {
         keycloak.onValidAccessToken(loadData, loadFailure);
     }
-    keycloak.init(loadData);
+
+    keycloak.init(loadData, loadFailure);
 
 </script>