2.2. JavaScript 适配器

Red Hat Single Sign-On 附带一个客户端 JavaScript 库，可用于保护 HTML5/JavaScript 应用程序。JavaScript 适配器为 Cordova 应用内置支持。

该程序库可以直接从位于 /auth/js/keycloak.js 的红帽单点登录服务器检索，并作为 ZIP 归档发布。

最佳实践是从 Red Hat Single Sign-On 服务器直接加载 JavaScript 适配器，因为升级服务器时会自动更新它。如果您将适配器复制到 web 应用程序，请确保仅在升级服务器后升级适配器。

需要注意的一点是，客户端必须是一个公共客户端，因为无法将客户端凭证存储在客户端的应用程序中。这可确保您为客户端配置的重定向 URI 正确且尽可能具体。

要使用 JavaScript 适配器，您必须首先在 Red Hat Single Sign-On Admin 控制台中为您的应用程序创建客户端。确保为 Access Type 选择了 public。

您还需要配置 Valid Redirect URI 和 Web Origins。具体来说，因为无法这样做，可能会导致安全漏洞。

在创建了客户端后，点 Installation 选项卡为 Format 选项 选择 Keycloak OIDC JSON，然后点击 Download。下载的 keycloak.json 文件应当托管在 Web 服务器上与 HTML 页面相同的位置。

另外，您可以跳过配置文件并手动配置适配器。

以下示例演示了如何初始化 JavaScript 适配器：

<html>
<head>
    <script src="keycloak.js"></script>
    <script>
        function initKeycloak() {
            var keycloak = new Keycloak();
            keycloak.init().then(function(authenticated) {
                alert(authenticated ? 'authenticated' : 'not authenticated');
            }).catch(function() {
                alert('failed to initialize');
            });
        }
    </script>
</head>
<body onload="initKeycloak()">
    <!-- your page content goes here -->
</body>
</html>

<html>
<head>
    <script src="keycloak.js"></script>
    <script>
        function initKeycloak() {
            var keycloak = new Keycloak();
            keycloak.init().then(function(authenticated) {
                alert(authenticated ? 'authenticated' : 'not authenticated');
            }).catch(function() {
                alert('failed to initialize');
            });
        }
    </script>
</head>
<body onload="initKeycloak()">
    <!-- your page content goes here -->
</body>
</html>

Copy to Clipboard

Toggle word wrap

如果 keycloak.json 文件位于不同的位置，您可以指定它：

var keycloak = new Keycloak('http://localhost:8080/myapp/keycloak.json');

var keycloak = new Keycloak('http://localhost:8080/myapp/keycloak.json');

Copy to Clipboard

Toggle word wrap

或者，您也可以在带有所需配置的 JavaScript 对象中传递：

var keycloak = new Keycloak({
    url: 'http://keycloak-server/auth',
    realm: 'myrealm',
    clientId: 'myapp'
});

var keycloak = new Keycloak({
    url: 'http://keycloak-server/auth',
    realm: 'myrealm',
    clientId: 'myapp'
});

Copy to Clipboard

Toggle word wrap

默认情况下，为了进行身份验证，您需要调用 登录功能。但是，有两个选项可用于使适配器自动进行身份验证。您可以将 login-required 或 check-sso 传递给 init 功能。如果用户登录到 Red Hat Single Sign-On，或者未显示登录页面，则 login-required 将验证客户端。只有用户已登录后，check-sso 才会验证客户端，如果用户未在登录，则将重新重定向到应用程序，并保持未经身份验证的身份验证。

您可以配置 silent check-sso 选项。启用此功能后，您的浏览器不会完全重定向到 Red Hat Single Sign-On 服务器并返回应用程序，但此操作将在隐藏的 iframe 中执行，因此仅在应用初始化后，浏览器才会被浏览器初始化并解析。这在 SPAs （页面应用程序）中特别有用。

要启用 silent check-sso，您必须在 init 方法中提供 silentCheckSsoRedirectUri 属性。此 URI 需要在应用程序中是有效的端点（当然，必须将其配置为 Red Hat Single Sign-On 管理控制台中客户端的有效重定向）：

keycloak.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
})

keycloak.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
})

Copy to Clipboard

Toggle word wrap

成功检查验证状态并从 Red Hat Single Sign-On 服务器检索令牌后，在 iframe 中载入 silent check-sso redirect uri 的页面。它没有将收到的令牌发送到主应用程序以外的其他任务，应该只类似如下：

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

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

Copy to Clipboard

Toggle word wrap

请注意，在指定位置的此页面必须由应用程序本身提供，且不是 JavaScript 适配器的一部分！

警告

银级 检查功能 在某些现代化浏览器中受到限制。请参阅《带跟踪保护》章节的现代浏览器。

要启用 login-required 设置 onLoad to login-required 并传递给 init 方法：

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

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

Copy to Clipboard

Toggle word wrap

在验证了用户后，通过在 授权 标头中包括 bearer 令牌，为应用进行红帽单点登录保护的 RESTful 服务请求。例如：

var loadData = function () {
    document.getElementById('username').innerText = keycloak.subject;

    var url = 'http://localhost:8080/restful-service';

    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) {
                alert('Success');
            } else if (req.status == 403) {
                alert('Forbidden');
            }
        }
    }

    req.send();
};

var loadData = function () {
    document.getElementById('username').innerText = keycloak.subject;

    var url = 'http://localhost:8080/restful-service';

    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) {
                alert('Success');
            } else if (req.status == 403) {
                alert('Forbidden');
            }
        }
    }

    req.send();
};

Copy to Clipboard

Toggle word wrap

请记住，要记住的一点是，访问令牌默认具有较短的过期时间，因此您可能需要在发送请求前刷新访问令牌。您可以通过 updateToken 方法进行此操作。更新Token 方法返回一个承诺，仅当令牌成功刷新时才会轻松地调用该服务，并在用户没有时显示错误。例如：

keycloak.updateToken(30).then(function() {
    loadData();
}).catch(function() {
    alert('Failed to refresh token');
});

keycloak.updateToken(30).then(function() {
    loadData();
}).catch(function() {
    alert('Failed to refresh token');
});

Copy to Clipboard

Toggle word wrap

2.2.1. 会话状态 iframe
复制链接

默认情况下，JavaScript 适配器会创建一个隐藏的 iframe，用于检测是否有 Single-Sign Out。这不需要任何网络流量，而是通过查看特殊状态 Cookie 来检索状态。通过设置传递给 init 方法的选项中的 checkLoginIframe: false 可禁用这个功能。

您不应该依赖直接查找此 Cookie。其格式可能会改变，它也与红帽单点登录服务器的 URL 相关联，而不是您的应用程序。

警告

会话状态 iframe 功能在某些现代化浏览器中受到限制。请参阅包含跟踪保护章节的现代浏览器。

返回顶部

2.2. JavaScript 适配器

2.2.1. 会话状态 iframe
复制链接

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

2.2. JavaScript 适配器

2.2.1. 会话状态 iframe复制链接链接已复制到粘贴板!

学习

尝试、购买和销售

社区

关于红帽文档

让开源更具包容性

關於紅帽

Theme

Red Hat legal and privacy links

Red Hat legal and privacy links

2.2.1. 会话状态 iframe
复制链接