向spa请求oidc访问令牌

Question

我正在尝试为react单页应用程序实现一个带有keycloak的oidc客户端。

react前端需要访问一个Java-API，这需要一个来自配置好的oidc服务器(在我的例子中是keycloak)的签名JWT。

我们希望避免在react-application中存储client-secret，因为这似乎是一个相当糟糕的实践(正如其名称所暗示的那样)。

在使用"隐式流程";时，我确实设法使它运行。但是，我无法将其升级为类似于本文中描述的"使用pkce"授权代码流"的内容。

我目前正在向/auth/realms/Test/protocol/openid-connect/auth发布请求，具有以下查询参数:

client_id = "client_id";
response_type = "code";
redirect_uri = "http://localhost/login.html";
scope = "openid";
nonce = "eGT0IRjpaz-USQSg2hoipYb3TEBAaSce";
code_challenge = "ZjFmNzM1YTBlMmMzZjk5MjMwNTk5NzE2Y2Q3M2MxZTdlYzhhYjVkYzRkN2YzN2EyYTBmYWJiNDUw";
code_challenge_method = "S256";

到目前为止，这是有效的，并且我在login.html站点上收到session_state和代码作为查询参数。

然而，这就是我开始困惑的地方:

1. 为什么有上千个查询参数，它们不应该在哈希中，这样响应就不会发送到服务器?
2. 如何继续?

据我所知，下一步是通过调用/token端点将这些值交换为实际令牌。

但是当我这样做的时候，keycloak在某些时候会开始抱怨缺少一个我不想提供的client_secret。

示例参数(表单url编码):

grant_type = authorization_code
code = <response from /auth>
redirect_uri = http://localhost/login.html
client_id = client_id
client_session = <response from /auth>

所以我的问题是:我哪里做错了?

看起来我要么使用了另一个流，没有意识到这一点，完全误解了流，要么我只是没有提供一个特定的参数，而keycloak抱怨另一个。

Answer 1

需要发送一个code_verifier字段来赎回令牌的授权码。请参阅我的博客文章的步骤4和8中的消息。

目标是使用一个库来为您完成此操作，就像在我的这个类中，我只需要调用signInRedirectCallback。

在查询字符串中返回授权码是标准的。它只能被使用一次，如果被拦截，攻击者不能使用它，因为他们没有代码验证器。

短期

您将为SPA正确实现PKCE基础知识，这应该可以让您启动并运行一段时间。

长期

SPA安全性比您可能意识到的要棘手，并且在2021年不再建议仅在浏览器中实现它。如果以后在访问令牌更新等领域遇到问题，请参阅这些安全性资源。