Estoy tratando de usar Keycloak con JavaScript, estos son los pasos que seguí.
Creo un cliente dentro del panel de administración de KeyCloak. ingrese la descripción de la imagen aquí 2. Copio el archivo .JSON en mi carpeta apache.
{ "reino": "maestro", "auth-server-url": "http://localhost:8080/auth", "ssl-required": "external", "resource": "test", "public- cliente": verdadero, "puerto-confidencial": 0 }
3.Voy a mi index.html y agrego estas dos líneas para llamar al script.
<html> <head> <link rel="stylesheet" href="assests/css/styles.css"> <script src="http://local:8080/auth/js/keycloak.js"></script> <script src="assests/js/myLogic.js"></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>esto es lo que tengo en myLogical.js
var keycloak = new Keycloak();
function initKeycloak() { keycloak.init({onLoad: 'login-required'}).then(function() { constructTableRows(keycloak.idTokenParsed); pasteToken(keycloak.token); }).catch(function() { alerta ('No se pudo inicializar'); }); }
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 refrescarToken = function() { keycloak.updateToken(-1)
Traté de descargar el archivo keycloak.js y lo puse directamente en mi carpeta raíz, pero ocurrió el mismo problema. Este es el mensaje que recibo cuando trato de abrir la página
Estoy confundido sobre el punto 1, ¿keycloak carga automáticamente la configuración del archivo json en la carpeta Apache? Supongamos que no, y creo que donde radica su problema, no está pasando config param al constructor keycloak.
Cómo inicializar 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); }); }Otra cosa importante es que la versión de la biblioteca keycloak-js (en package.json) debe coincidir con la versión del servidor keycloak. A veces, diferentes versiones funcionan entre sí, pero siempre es una buena práctica que la versión de keycloak-js coincida con la versión del servidor de keycloak.
También puede consultar aquí: https://github.com/m-s7/react-core/blob/devel/src/services/keycloak-service.ts este es mi repositorio con la implementación de keycloak-js en funcionamiento.