<section>
<title>Pure Client Javascript Adapter</title>
<para>
The Keycloak Server comes with a Javascript library you can use to secure pure HTML/Javascript applications. It
works in the same way as other application adapters accept that your browser is driving the OAuth redirect protocol
rather than the server.
</para>
<para>
The
disadvantage of using this approach is that you end up having a non-confidential, public client. This can be mitigated
by registering valid redirect URLs. You are still vulnerable if somebody hijacks the IP/DNS name of your pure
HTML/Javascript application though.
</para> startAsync
<para>
To use this adapter, you first must load and initialize the keycloak javascript library into your application.
<programlisting><![CDATA[
<head>
<title>Customer View Page</title>
<script src="/auth/js/keycloak.js"></script>
<script>
var keycloak = Keycloak({
clientId: 'application-name',
clientSecret: '1234234-234234-234234-234234',
realm: 'demo',
onload: 'login-required'
});
keycloak.init();
</script>
</head>
]]></programlisting>
</para>
<para>
The above code will initialize the adapter and redirect you to your realm's login screen. You must fill in the
appropriate <literal>clientId</literal>, <literal>clientSecret</literal>, and <literal>realm</literal> options
based on how you created your application in your realm through the admin console. The <literal>init()</literal>
method can also take a success and error callback function as parameters.
</para>
<para>
After you login, your application will be able to make REST calls using bearer token authentication. Here's
an example pulled from the <literal>customer-portal-js</literal> example that comes with the distribution.
<programlisting><![CDATA[
<script>
var loadData = function () {
document.getElementById('username').innerText = keycloak.username;
var url = 'http://localhost:8080/database/customers';
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) {
var users = JSON.parse(req.responseText);
var html = '';
for (var i = 0; i < users.length; i++) {
html += '<p>' + users[i] + '</p>';
}
document.getElementById('customers').innerHTML = html;
console.log('finished loading data');
}
}
}
req.send();
};
var loadFailure = function () {
document.getElementById('customers').innerHTML = '<b>Failed to load data. Check console log</b>';
};
var reloadData = function () {
keycloak.onValidAccessToken(loadData, loadFailure);
}
</script>
<button onclick="reloadData()">Submit</button>
]]></programlisting>
</para>
<para>
The <literal>loadData()</literal> method builds an HTTP request setting the <literal>Authorization</literal>
header to a bearer token. The <literal>keycloak.token</literal> points to the access token the browser obtained
when it logged you in. The <literal>loadFailure()</literal> method is invoked on a failure. The <literal>reloadData()</literal>
function calls <literal>keycloak.onValidAccessToken()</literal> passing in the <literal>loadData()</literal> and
<literal>loadFailure()</literal> callbacks. The <literal>keycloak.onValidAcessToken()</literal> method checks to
see if the access token hasn't expired. If it hasn't, and your oauth login returned a refresh token, this method
will refresh the access token. Finally, if successful, it will invoke the success callback, which in this case
is the <literal>loadData()</literal> method.
</para>
</section>