3.3. 使用适配器

以下示例演示了如何初始化适配器。确保将传递给 Keycloak 构造器的选项替换为您配置的客户端。

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak({
    url: "http://keycloak-server",
    realm: "my-realm",
    clientId: "my-app"
});

try {
    const authenticated = await keycloak.init();
    if (authenticated) {
        console.log('User is authenticated');
    } else {
        console.log('User is not authenticated');
    }
} catch (error) {
    console.error('Failed to initialize adapter:', error);
}

import Keycloak from 'keycloak-js';

const keycloak = new Keycloak({
    url: "http://keycloak-server",
    realm: "my-realm",
    clientId: "my-app"
});

try {
    const authenticated = await keycloak.init();
    if (authenticated) {
        console.log('User is authenticated');
    } else {
        console.log('User is not authenticated');
    }
} catch (error) {
    console.error('Failed to initialize adapter:', error);
}

Copy to Clipboard

Toggle word wrap

要进行身份验证，您可以调用 login 功能。有两个选项可使适配器自动验证。您可以将 login-required 或 check-sso 传递给 init （） 函数。

如果用户登录到 Red Hat build of Keycloak，或者如果用户没有登录，则 login-required 会验证客户端。
只有用户已经登录，check-sso 才会验证客户端。如果用户没有登录，浏览器将重定向到应用程序，并保持未经身份验证的操作。

您可以配置一个静默的 check-sso 选项。启用这个功能后，您的浏览器不会对红帽构建的 Keycloak 服务器执行完整重定向到您的应用程序，但此操作将在隐藏的 iframe 中执行。因此，您的应用程序资源只会由浏览器加载并解析，即当应用程序初始化时，在从 Red Hat build of Keycloak 到您的应用程序后不会再次加载并解析。当 SPAs （单页应用程序）时，这种方法特别有用。

要启用静默 check-sso，您可以在 init 方法中提供一个 silentCheckSsoRedirectUri 属性。确保此 URI 是应用程序中的有效端点，必须将其配置为红帽构建的 Keycloak 管理控制台中客户端的有效重定向：

await keycloak.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.html`
});

await keycloak.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.html`
});

Copy to Clipboard

Toggle word wrap

在成功检查身份验证状态并从红帽构建的 Keycloak 服务器检索令牌后，silent check-sso redirect uri 的页面会在 iframe 中加载。它没有其他任务，而不是将接收的令牌发送到主应用程序，并且只应类似如下：

<!doctype html>
<html>
<body>
    <script>
        parent.postMessage(location.href, location.origin);
    </script>
</body>
</html>

<!doctype html>
<html>
<body>
    <script>
        parent.postMessage(location.href, location.origin);
    </script>
</body>
</html>

Copy to Clipboard

Toggle word wrap

请记住，此页面必须由应用程序在 silentCheckSsoRedirectUri 中指定的位置提供，且不是 适配器的一部分。

警告

在某些现代浏览器中，静默的 check-sso 会有一些限制。请参阅带有跟踪保护部分的现代浏览器。

要在 Load 上启用 login-required 设置为 login-required，并传递给 init 方法：

await keycloak.init({
    onLoad: 'login-required'
});

await keycloak.init({
    onLoad: 'login-required'
});

Copy to Clipboard

Toggle word wrap

在验证了用户后，应用程序可以通过在 Authorization 标头中包含 bearer 令牌来向由红帽构建的 Keycloak 保护的 RESTful 服务发出请求。例如：

async function fetchUsers() {
    const response = await fetch('/api/users', {
        headers: {
            accept: 'application/json',
            authorization: `Bearer ${keycloak.token}`
        }
    });

    return response.json();
}

async function fetchUsers() {
    const response = await fetch('/api/users', {
        headers: {
            accept: 'application/json',
            authorization: `Bearer ${keycloak.token}`
        }
    });

    return response.json();
}

Copy to Clipboard

Toggle word wrap

需要注意的是，默认情况下访问令牌具有较短的生命周期过期，因此您可能需要在发送请求前刷新访问令牌。您可以通过调用 updateToken （） 方法刷新此令牌。此方法返回一个 Promise，这只有在令牌被成功刷新时才会轻松调用服务，并在用户没有刷新时向用户显示错误。例如：

try {
    await keycloak.updateToken(30);
} catch (error) {
    console.error('Failed to refresh token:', error);
}

const users = await fetchUsers();

try {
    await keycloak.updateToken(30);
} catch (error) {
    console.error('Failed to refresh token:', error);
}

const users = await fetchUsers();

Copy to Clipboard

Toggle word wrap

注意

访问和刷新令牌都存储在内存中，且不会保留在任何类型的存储中。因此，这些令牌应该永远不会被保留，以防止劫持攻击。

返回顶部

3.3. 使用适配器

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links