267 lines
7.5 KiB
HTML
267 lines
7.5 KiB
HTML
|
<!--
|
||
|
|
~ Copyright 2016 Red Hat, Inc. and/or its affiliates
|
||
|
|
~ and other contributors as indicated by the @author tags.
|
||
|
|
~
|
||
|
|
~ Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
~ you may not use this file except in compliance with the License.
|
||
|
|
~ You may obtain a copy of the License at
|
||
|
|
~
|
||
|
|
~ http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
~
|
||
|
|
~ Unless required by applicable law or agreed to in writing, software
|
||
|
|
~ distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
~ See the License for the specific language governing permissions and
|
||
|
|
~ limitations under the License.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="./keycloak.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
<button onclick="keycloak.login()">Login</button>
|
||
|
|
<button onclick="keycloak.login({ action: 'UPDATE_PASSWORD' })">
|
||
|
|
Update Password
|
||
|
|
</button>
|
||
|
|
<button onclick="keycloak.logout()">Logout</button>
|
||
|
|
<button onclick="keycloak.register()">Register</button>
|
||
|
|
<button onclick="keycloak.accountManagement()">Account</button>
|
||
|
|
<button onclick="refreshToken(9999)">Refresh Token</button>
|
||
|
|
<button onclick="refreshToken(30)">
|
||
|
|
Refresh Token (if <30s validity)
|
||
|
|
</button>
|
||
|
|
<button onclick="loadProfile()">Get Profile</button>
|
||
|
|
<button onclick="updateProfile()">Update profile</button>
|
||
|
|
<button onclick="loadUserInfo()">Get User Info</button>
|
||
|
|
<button onclick="output(keycloak.tokenParsed)">Show Token</button>
|
||
|
|
<button onclick="output(keycloak.refreshTokenParsed)">
|
||
|
|
Show Refresh Token
|
||
|
|
</button>
|
||
|
|
<button onclick="output(keycloak.idTokenParsed)">Show ID Token</button>
|
||
|
|
<button onclick="showExpires()">Show Expires</button>
|
||
|
|
<button onclick="output(keycloak)">Show Details</button>
|
||
|
|
<button onclick="output(keycloak.createLoginUrl())">
|
||
|
|
Show Login URL
|
||
|
|
</button>
|
||
|
|
<button onclick="output(keycloak.createLogoutUrl())">
|
||
|
|
Show Logout URL
|
||
|
|
</button>
|
||
|
|
<button onclick="output(keycloak.createRegisterUrl())">
|
||
|
|
Show Register URL
|
||
|
|
</button>
|
||
|
|
<button onclick="output(keycloak.createAccountUrl())">
|
||
|
|
Show Account URL
|
||
|
|
</button>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function loadProfile() {
|
||
|
|
keycloak
|
||
|
|
.loadUserProfile()
|
||
|
|
.success(function (profile) {
|
||
|
|
output(profile);
|
||
|
|
})
|
||
|
|
.error(function () {
|
||
|
|
output("Failed to load profile");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateProfile() {
|
||
|
|
var url = keycloak.createAccountUrl().split("?")[0];
|
||
|
|
var req = new XMLHttpRequest();
|
||
|
|
req.open("POST", url, true);
|
||
|
|
req.setRequestHeader("Accept", "application/json");
|
||
|
|
req.setRequestHeader("Content-Type", "application/json");
|
||
|
|
req.setRequestHeader("Authorization", "bearer " + keycloak.token);
|
||
|
|
|
||
|
|
req.onreadystatechange = function () {
|
||
|
|
if (req.readyState == 4) {
|
||
|
|
if (req.status == 200) {
|
||
|
|
output("Success");
|
||
|
|
} else {
|
||
|
|
output("Failed");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
req.send(
|
||
|
|
'{"email":"myemail@foo.bar","firstName":"test","lastName":"bar"}'
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadUserInfo() {
|
||
|
|
keycloak
|
||
|
|
.loadUserInfo()
|
||
|
|
.success(function (userInfo) {
|
||
|
|
output(userInfo);
|
||
|
|
})
|
||
|
|
.error(function () {
|
||
|
|
output("Failed to load user info");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function refreshToken(minValidity) {
|
||
|
|
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 () {
|
||
|
|
output("Failed to refresh token");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function showExpires() {
|
||
|
|
if (!keycloak.tokenParsed) {
|
||
|
|
output("Not authenticated");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var o =
|
||
|
|
"Token Expires:\t\t" +
|
||
|
|
new Date(
|
||
|
|
(keycloak.tokenParsed.exp + keycloak.timeSkew) * 1000
|
||
|
|
).toLocaleString() +
|
||
|
|
"\n";
|
||
|
|
o +=
|
||
|
|
"Token Expires in:\t" +
|
||
|
|
Math.round(
|
||
|
|
keycloak.tokenParsed.exp +
|
||
|
|
keycloak.timeSkew -
|
||
|
|
new Date().getTime() / 1000
|
||
|
|
) +
|
||
|
|
" seconds\n";
|
||
|
|
|
||
|
|
if (keycloak.refreshTokenParsed) {
|
||
|
|
o +=
|
||
|
|
"Refresh Token Expires:\t" +
|
||
|
|
new Date(
|
||
|
|
(keycloak.refreshTokenParsed.exp + keycloak.timeSkew) * 1000
|
||
|
|
).toLocaleString() +
|
||
|
|
"\n";
|
||
|
|
o +=
|
||
|
|
"Refresh Expires in:\t" +
|
||
|
|
Math.round(
|
||
|
|
keycloak.refreshTokenParsed.exp +
|
||
|
|
keycloak.timeSkew -
|
||
|
|
new Date().getTime() / 1000
|
||
|
|
) +
|
||
|
|
" seconds";
|
||
|
|
}
|
||
|
|
|
||
|
|
output(o);
|
||
|
|
}
|
||
|
|
|
||
|
|
function output(data) {
|
||
|
|
if (typeof data === "object") {
|
||
|
|
data = JSON.stringify(data, null, " ");
|
||
|
|
}
|
||
|
|
document.getElementById("output").innerHTML = data;
|
||
|
|
}
|
||
|
|
|
||
|
|
function event(event) {
|
||
|
|
var e = document.getElementById("events").innerHTML;
|
||
|
|
document.getElementById("events").innerHTML =
|
||
|
|
new Date().toLocaleString() + "\t" + event + "\n" + e;
|
||
|
|
}
|
||
|
|
|
||
|
|
var keycloak = Keycloak();
|
||
|
|
|
||
|
|
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
|
||
|
|
var initOptions = {
|
||
|
|
responseMode: "fragment",
|
||
|
|
flow: "standard",
|
||
|
|
};
|
||
|
|
|
||
|
|
keycloak
|
||
|
|
.init(initOptions)
|
||
|
|
.then(function (authenticated) {
|
||
|
|
output(
|
||
|
|
"Init Success (" +
|
||
|
|
(authenticated ? "Authenticated" : "Not Authenticated") +
|
||
|
|
")"
|
||
|
|
);
|
||
|
|
})
|
||
|
|
.catch(function () {
|
||
|
|
output("Init Error");
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|