KeyCloak-Multi/2FA因子-OTP-QR码-自定义登录屏幕-Rest API

Question

我有我自己的登录页面，在那里用户输入用户名/密码。此用户名/密码用于通过Keycloak Rest API登录。

http://localhost:8080/auth/realms/demo/protocol/openid-connect/token

input - {username,password,grant_type,client_secret,client_id}

作为响应，我获得访问令牌。

类似于这里用例1中描述的流程

只想用keycloak作为一个数据库，为我做所有的操作，输入会是我的屏幕。我确实希望URL的重定向的同时登录，但应该是独立部署的。

Answer 1

我知道这是一个老问题，但我最近一直在研究类似的问题，所以我认为分享我的发现对其他可能正在研究这个问题并想知道可能性的人来说可能是有价值的。

TL；DR
您只能真正使用现有的Keycloak操作来执行此操作，或者在iframe中嵌入在https：//{Keycloak服务器URL}/auth/realms/{realm name}/account中找到的用户帐户管理页面。恐怕就是这样了。在我看来，目前最好的做法是直接将操作分配给帐户，或者使用凭据重置电子邮件来分配操作；如果需要，这两种方法都可以通过管理API完成：

发送包含指定操作的凭据重置电子邮件:
https://www.keycloak.org/docs-api/11.0/rest-api/index.html#_executeActionsemail

直接在帐户上设置操作（包括在主体中发送到endpoint的用户JSON的requiredActions部分中的操作）:
https://www.keycloak.org/docs-api/11.0/rest-api/index.html#_updateUser

背景是，作为一个项目的一部分，我一直在工作，我们想看看我们是否可以有一个集成的方式，让用户设置他们的初始密码和OTP设备时，一个新的帐户已经为他们创建，由于使用“凭据重置”功能从Keycloak向他们发送电子邮件的默认方法有以下限制：a）除非您覆盖主题，否则它不会提供到应用程序本身的链接；如果您有多个应用程序实例供不同用户使用，您无法知道为哪个实例提供链接，因此最终可能不得不包括一个列表；b）即使更改了主题，它也往往感觉不到应用程序的真正原生。不过，如果您明智的话，我建议您停止使用这个功能-请参阅上面的TL；DR部分了解详细信息。

因此，简而言之，没有APIendpoint用于接收QR码来设置OTP设备。然而，可以从两个地方检索二维码--当您作为一个已经为其帐户分配了“配置OTP”操作的用户登录时，在OTP设备设置屏幕上，以及在用户自己的帐户管理屏幕上。

Configure OTP action屏幕的第一个选项是非初学者。它只在您登录时显示，因此根据定义，用户必须通过Keycloak登录页面登录到Keycloak，才能触发页面显示。此时，您已经进入了一个Keycloak页面，而不是应用程序的一个页面，因此，除非您能够通过自定义主题对这些Keycloak页面进行非常有创意的更改，否则敲击该页面并不是一个真正的选择。

第二种选择更有趣，但远非理想。每个登录的用户都可以访问帐户管理页面，该页面可以在https：//{keycloak服务器URL}/auth/realms/{realm name}/account找到。这个页面允许你做的事情，如更改您的名字，密码等。它还允许你添加一个OTP设备，如果你没有一个，或删除任何现有的OTP设备与您的帐户。可以通过https：//{keycloak服务器URL}/auth/realms/{realm name}/account/totp直接访问帐户管理页面的OTP设备选项卡。

正如我提到的，没有一个API您可以访问以查看显示在此页面上的QR代码。访问它的唯一方法是通过对https：//{keycloak服务器URL}/auth/realms/{realm name}/account/totp的GET请求，它返回我已经提到的页面的HTML。好的，那么我们可以编程地刮二维码，然后把它放在我们自己的应用程序页面中吗？呃，不，不是真的。您可以看到，虽然许多Keycloak APIendpoint正确地允许您在授权头中向access和endpoint发送承载令牌（例如，access令牌），但此页面将不接受承载令牌作为身份验证/授权的手段。相反，它使用锁定到Keycloak URL的会话cookie。此cookie是在您通过Keycloak登录页面登录到应用程序时设置的，因此当您已经登录到该帐户管理页面时，该帐户管理页面可以使用它，并且由于帐户管理页面使用与原始Keycloak登录页面相同的服务器和域名，因此它可以访问该cookie并允许您进入。您的应用程序不能将此cookie发送到例如您自己的REST API，然后以编程方式调用帐户管理页面并刮取QR代码，因为出于良好的安全原因，您的应用程序无法访问它。这可能是你可以在Keycloak的某个地方更改的东西，但如果有的话，我强烈建议不要更改它。

所以如果我们不能从自己的服务器上刮取页面，我们能在前端做点什么吗？正如前面提到的，您的应用程序不能访问会话cookie，但是如果您在前端JavaScript中向帐户管理页面发出请求（例如使用fetch或axios)，那么该请求将随它一起发送cookie，这样就可以工作了吗？嗯，实际上，在这个场景中，由于CORS，您会收到一个错误消息。CORS是跨来源的资源共享，为了允许访问Keycloak页面，那么您必须打开服务器上的设置，以允许从您的网站地址访问它。我看过一些文章，如果你愿意，你可以如何在Keycloak上打开你的CORS设置，但我会非常紧张。我不太了解Keycloak的内部结构，也不太了解它是如何操作的，因此我无法评论这有多大的安全风险，但我肯定不会推荐它。这里有一些关于更改应用程序的Keycloak客户端的“Web Origins”设置的信息（Keycloak angular No'Access-Control-Allow-Origin'标头是存在的），但这会使应用程序面临一些严重的潜在滥用。还有一个主要问题是，即使你刮了二维码，设备实际上也不会添加到用户的账户中（即使它出现在authenticator应用程序中），直到你在二维码所在的页面中输入代码并单击Save。由于没有APIendpoint可用于完成此操作，因此我认为此选项也不可行。我已经尝试了是否可以使用https：//{keycloak server URL}/auth/realms/{realm name}/protocol/openid-connect/token的令牌检索endpoint，看看用您的用户名/password/otp代码发出请求是否会以某种方式“注册”您的设备并完成这个过程，但是尽管您可以通过这种方式获得令牌，而且它不会抱怨otp代码，但它实际上不会注意到代码，因为就其而言，用户的帐户没有注册设备。因此，我们必须使用帐户管理页面上的表单，以便完成这个注册过程。

最后一种可能的方法是....IFRAME.对不起，是的，这是垃圾，但你只剩下这些了。您可以在帐户管理页面上使用iframe点，因为用户已经登录，所以他们将能够看到应用程序页面上的内容。您可以使用相对定位、固定宽度和高度以及移除滚动条，以确保只显示QR码和一次性代码、设备名称和保存/取消按钮的字段。可悲的是，这似乎是目前唯一的选择，而且由于iframes通常是多么糟糕和不可靠--它们肯定不是您的应用程序所固有的，而且您需要重写您的Keycloak主题以使有问题的页面看起来更像您的应用程序--我建议您避开这一点，而是使用Keycloak操作和管理API的标准方法。

如果你已经做到了这一点，恭喜你，你在堆栈溢出中赢了：-）