Keycloak Javascript failed to inicialize

user_15236819 0
Viewed 356

I'm trying to use Keycloak with JavaScript and these are the steps that I followed.

  1. I create a client inside KeyCloak admin panel. Link to image

  2. I copy the .json file to my apache folder.

    {
      "realm": "master",
      "auth-server-url": "http://localhost:8080/auth",
      "ssl-required": "external",
      "resource": "test",
      "public-client": true,
      "confidential-port": 0
    }

  1. I go to my index.html and I add these two lines for calling the script.

     <script src="keycloak.js"></script>
 <script>
     function initKeycloak() {
         const keycloak = new Keycloak();
         keycloak.init().then(function(authenticated) {
             alert(authenticated ? 'authenticated' : 'not authenticated');
         }).catch(function() {
             alert('failed to initialize');
         });
     }
 </script>

  2. this is what i have in myLogical.js

var keycloak = new Keycloak();

function initKeycloak() {
    keycloak.init({onLoad: 'login-required'}).then(function() {
        constructTableRows(keycloak.idTokenParsed);
        pasteToken(keycloak.token);
    }).catch(function() {
        alert('failed to initialize');
    });
}

function constructTableRows(keycloakToken) {
    document.getElementById('row-username').innerHTML = keycloakToken.preferred_username;
    document.getElementById('row-firstName').innerHTML = keycloakToken.given_name;
    document.getElementById('row-lastName').innerHTML = keycloakToken.family_name;
    document.getElementById('row-name').innerHTML = keycloakToken.name;
    document.getElementById('row-email').innerHTML = keycloakToken.email;
}

function pasteToken(token){
    document.getElementById('ta-token').value = token;
    document.getElementById('ta-refreshToken').value = keycloak.refreshToken;
}

var refreshToken = function() {
    keycloak.updateToken(-1)

I tried to download the file keycloak.js and put it directly on my root folder but it happen the same problem. These is the message I got when I try to open the page

keycloak javascript
1 Answers

I'm confused about point 1, does keycloak automatically load configuration from json file in Apache folder? Let's assume that no, and I think that where your problem lies, you're not passing config param to keycloak constructor.

How to initialize keycloak:

const initKeycloak = async () => {
    //you can hardcode these values for now just to see if everything works
    const config = { url: 'http://localhost:8080/auth', realm: 'master', clientId: 'test'};

    const keycloak = new Keycloak(config);

    await keycloak
            .init({ onLoad: 'login-required' })
            .then(isAuthenticated => {
                //user is authenticated
             })
             .catch(error => { console.log('keycloak error', error); });
}

Another important thing is that keycloak-js library version (in package.json) must match keycloak server version. Sometimes different versions work with each other but it's always best practice that keycloak-js version matches keycloak server version.

You can also look here: https://github.com/m-s7/react-core/blob/devel/src/services/keycloak-service.ts this is my repo with working keycloak-js implementation.

user_18826630
Related