Commit 8fa5e148 authored by Jannik Hüls's avatar Jannik Hüls

added frontend app body

parent 66cc8656
# The Frontend
Our intention is to create our very first application that uses Keycloak for authentication. We simply want to get an idea which steps are needed in order to get this done.
We use plain javascript as the framework is not important. However - feel free to use any framework you like.
The goal is to show the content of the access token we get after a successful authentication.
## Setup
> Configure a Keycloak client
> Add the Keycloak configuration to `js/script.js`
> Change the `index.html` to load the correct version of the `keycloak.js`
> Run the app.
```
python -m SimpleHTTPServer 8081
```
## Login into your application
> Create User.
> Do not show all the user data.
> Change the content of the access_token.
> How to determine which content is being sent to the application?
\ No newline at end of file
body {
font-family: sans-serif;
font-size: 15px;
}
button {
font-family: Helvetica;
font-size: 20px;
width: 200px;
background-color: #007891;
background-repeat: repeat-x;
padding:20px;
border: 2px solid #15584C;
color: #fff;
}
button:hover {
background-color: #00AED2;
cursor: pointer;
}
hr {
border: none;
background-color: #eee;
height: 10px;
}
.menu {
padding: 10px;
margin-bottom: 10px;
}
.content {
border: 1px solid #ccc;
padding: 10px;
}
#token-content {
padding: 5px;
white-space: pre;
text-transform: none;
text-align: left;
}
.wrapper {
text-align:center;
}
table {
width: 100%;
text-align:left;
}
td {
padding: 5px;
}
td.label {
font-weight: bold;
width: 250px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plain JS</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="/auth/js/keycloak.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrapper" id="profile">
<div class="menu">
<button name="logoutBtn" onclick="keycloak.logout()">Logout</button>
<button name="actionBtn" onclick="performUserAction()">User</button>
<button name="actionBtn" onclick="performAdminAction()">Admin</button>
</div>
<div class="content">
<div id="profile-content" class="message">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="label">First name</td>
<td><span id="firstName"></span></td>
</tr>
<tr class="even">
<td class="label">Last name</td>
<td><span id="lastName"></span></td>
</tr>
<tr>
<td class="label">Username</td>
<td><span id="username"></span></td>
</tr>
<tr class="even">
<td class="label">Email</td>
<td><span id="email"></span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="wrapper" id="token">
<div class="content">
<div id="token-content" class="message"></div>
</div>
</div>
</body>
</html>
var keycloak = new Keycloak({
url: '',
realm: '',
clientId: ''
});
window.onload = function () {
keycloak.init({onLoad: 'login-required'})
.success(function () {
if (keycloak.authenticated) {
showUserdata();
}
document.body.style.display = 'block';
});
};
function showUserdata() {
if (keycloak.tokenParsed['given_name']) {
document.getElementById('firstName').innerHTML = keycloak.tokenParsed['given_name'];
}
if (keycloak.tokenParsed['family_name']) {
document.getElementById('lastName').innerHTML = keycloak.tokenParsed['family_name'];
}
if (keycloak.tokenParsed['preferred_username']) {
document.getElementById('username').innerHTML = keycloak.tokenParsed['preferred_username'];
}
if (keycloak.tokenParsed['email']) {
document.getElementById('email').innerHTML = keycloak.tokenParsed['email'];
}
document.getElementById('token-content').innerHTML = JSON.stringify(keycloak.tokenParsed, null, ' ');
}
function performUserAction() {
performAction("user")
}
function performAdminAction() {
performAction("admin");
}
function performAction(path) {
var url = 'http://localhost:8082/'+path;
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.setRequestHeader('Accept', 'application/json');
req.setRequestHeader('Authorization', 'Bearer ' + keycloak.token);
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
alert('Success. Data is ' + req.responseText);
} else if (req.status == 403) {
alert('Forbidden');
} else {
alert('Error is ' + req.status);
}
}
}
req.send();
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment