Keycloak Javascript 未能初始化

Question

我正在尝试将Keycloak与JavaScript一起使用，这些是我遵循的步骤。

>

我在KeyCloak管理面板中创建了一个客户端。链接到图像

我将 .json 文件复制到我的 apache 文件夹中。

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

我转到我的索引.html并添加这两行来调用脚本。

 <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>

这就是我在myLogic中所拥有的.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)

我尝试下载文件密钥斗篷.js并将其直接放在我的根文件夹中，但发生了同样的问题。这些是我尝试打开页面时收到的消息

Answer 1

我对第 1 点感到困惑，keycloak 会自动从 Apache 文件夹中的 json 文件加载配置吗？让我们假设不，我认为你的问题出在哪里，你没有将配置参数传递给 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); });
}

另一个重要的事情是keycloak-js库版本（在package.json中）必须与keycloak服务器版本匹配。有时不同的版本可以相互配合，但最佳做法始终是 keycloak-js 版本与 keycloak 服务器版本匹配。

你也可以看看这里：https://github.com/m-s7/react-core/blob/devel/src/services/keycloak-service.ts 这是我使用工作 keycloak-js 实现的存储库。