使用 Keycloak 时的静默身份验证 CORS 问题答案

【问题标题】：Silent authentication CORS problem when using Keycloak使用 Keycloak 时的静默身份验证 CORS 问题
【发布时间】：2020-05-10 20:46:05
【问题描述】：

我正在尝试使用以下调用在我的网站上执行静默身份验证：

fetch('http://localhost:8100/auth/realms/master/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=portal&redirect_uri=http%3A//localhost%3A8080/o/auth/oidc/callback&state=CJOREX0_bHtivjgNUYRkE3908LqdnUUvm2Jhxo5U8tg&nonce=MJj2eQkCtlwqIx0UbSFdWRsbll7fiBSUkRkbxzi2VFs&prompt=none', {
    method: 'GET',
    mode: 'cors'
})

我已为我的客户端配置了 Web 源，如下所示：

但我仍然收到 CORS 错误：

CORS 策略阻止了从源“http://localhost:8100/auth/realms/master/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=portal&redirect_uri=http%3A//localhost%3A8080/o/auth/oidc/callback&state=CJOREX0_bHtivjgNUYRkE3908LqdnUUvm2Jhxo5U8tg&nonce=MJj2eQkCtlwqIx0UbSFdWRsbll7fiBSUkRkbxzi2VFs&prompt=none”获取“http://localhost:8100/auth/realms/master/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=portal&redirect_uri=http%3A//localhost%3A8080/o/auth/oidc/callback&state=CJOREX0_bHtivjgNUYRkE3908LqdnUUvm2Jhxo5U8tg&nonce=MJj2eQkCtlwqIx0UbSFdWRsbll7fiBSUkRkbxzi2VFs&prompt=none”的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

知道我在这里缺少什么吗？

【问题讨论】：

响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？
@sideshowbarker，这不是关于状态码，而是关于缺少 Access-Control-Allow-Origin 标头，因此请求被浏览器本身阻止。
嗨，Alexander，您找到解决方案了吗？
嗨@jreid，我已经为你添加了答案。

标签： cors fetch openid-connect keycloak

【解决方案1】：

这里的整个方法都是错误的。我试图使用来自客户端的 Authorization Code 流程，这不是它应该如何工作的。授权代码流始终是关于服务器到服务器与客户端重定向的交互。

如果您想使用它，您需要在 iframe 或单独的页面中打开目标页面（对于静默身份验证，可以使用不可见的 iframe）。

如果您的目标是进行纯客户端身份验证，您宁愿考虑使用隐式（经典且简单，但出于安全原因目前不推荐使用）或 授权码与 PKCE 流。

有很多关于身份验证流程的资源，但如果您想快速了解它们，我建议您查看这篇简短的文章： https://dev.to/hem/oauth-2-0-flows-explained-in-gifs-2o7a

【讨论】：