Keycloak-Multi/2FA Factor-OTP-QR Code-自定义登录屏幕-Rest API [英] Keycloak - Multi/2FA Factor - OTP - QR Code - Custom Login Screen - Rest API
问题描述
我有我自己的登录页面，用户可以在其中输入用户名/密码. 此用户名/密码用于通过Keycloak Rest API登录.
http://localhost:8080/auth/realms/Demo /protocol/openid-connect/token
input - {username,password,grant_type,client_secret,client_id}
作为回应，我得到了access token.
现在，我希望启用身份验证器(Google Authenticator).我已经从后端启用了它.现在，如果用户希望通过我的应用程序登录，我的登录页面需要获取以下详细信息.
1.)不知何故，我需要包括出现在密钥斗篷登录页面上的QR码，用于发布用户名/密码验证，以便在用户输入用户名/密码后首次在我的登录屏幕上显示.因此，我们是否有任何API会返回Keycloak QR码图像作为响应.
2.)后续登录时，我将具有OTP字段，因此需要REST api来与用户名/密码一起传递OTP.
如果keycloak有任何帮助，请提供REST API帮助.通过Java集成.
用例1中所述的类似流程此处
只想使用keycloak作为数据库，为我做所有操作，输入将是我的屏幕.我确实希望在登录时重定向URL，但是应该独立部署.
我知道这是一个老问题，但是我最近一直在寻找类似的东西，因此认为分享我发现的内容可能具有潜在的价值对于其他可能正在研究这个问题并想知道可能性是什么的人.
TL; DR
您只能真正使用现有的Keycloak操作来执行此操作，或者将位于https://{keycloak服务器URL}/auth/realms/{realm name}/account中的用户帐户管理页面嵌入到iframe中.就是这样，我很害怕.我认为，目前最好只将操作直接分配给帐户，或使用凭据重置电子邮件来分配操作；如果需要，这两个步骤都可以通过Admin API完成:
发送凭据重置电子邮件，其中包含分配的操作:
https://www.keycloak.org/docs- api/11.0/rest-api/index.html#_executeactionsemail
直接在帐户上设置操作(将操作发送到正文中发送到端点的用户JSON的requiredActions部分中):
https://www.keycloak.org/docs- api/11.0/rest-api/index.html#_updateuser
背景是，作为我一直在从事的项目的一部分，我们希望了解在为他们创建新帐户后，是否可以为用户提供一种集成方式来设置其初始密码和OTP设备.使用凭据重置"从Keycloak向他们发送电子邮件的默认方法是:功能具有以下局限性:a)除非您覆盖主题，否则它不提供与应用程序本身的链接，并且如果您有针对不同用户的应用程序的多个实例，则无法知道为哪个实例提供链接，因此可能最终必须包含它们的列表，并且b)即使更改了主题，它通常也不真正感觉是应用程序真正的本机.不过，如果您明智的话，建议您停止使用此功能-请参阅上面的TL; DR部分以获取详细信息.
因此，简而言之，没有用于接收QR码以设置OTP设备的API端点.但是，有两个地方可以从中检索QR码-当您以具有配置OTP"的用户身份登录时，在OTP设备设置屏幕中可以找到QR码.分配给他们帐户的操作，以及用户自己的帐户管理屏幕.
配置OTP"操作屏幕的第一个选项是非启动器.它仅在您登录时显示，因此根据定义，用户必须通过Keycloak登录页面登录到Keycloak才能触发该页面的显示.此时，您已经在Keycloak页面上而不是应用程序页面之一上，因此，除非您可以通过自定义主题对这些Keycloak页面进行更改而变得很有创意，否则，进入此页面实际上不是一个选择. /p>
第二个选项更有趣，但远非理想.每个登录的用户都可以访问帐户管理页面，该页面可以在https://{keycloak服务器URL}/auth/realms/{realm name}/account中找到.此页面允许您执行诸如更改名称，密码等操作，并且还可以在没有OTP设备的情况下添加它，或删除与帐户关联的任何现有OTP设备.可以通过https://{keycloak服务器URL}/auth/realms/{领域名称}/account/totp直接访问帐户管理页面的OTP设备标签.
正如我提到的那样，您没有可以访问的API来查看此页面上显示的QR码.唯一可访问的方法是通过对https://{keycloak服务器URL}/auth/realms/{领域名称}/account/totp的GET请求，该请求返回我已经提到的页面的HTML.好的，那么我们可以通过编程方式刮除QR码，然后将其放在应用程序的自己的页面中吗?嗯，不，不是真的.您会看到，尽管许多Keycloak API端点正确允许您在授权标头中发送承载令牌(例如访问令牌)以进行访问和端点，但是此页面将不接受承载令牌作为身份验证/授权的方式.相反，它使用会话Cookie，该会话Cookie锁定在Keycloak URL上.当您通过Keycloak登录页面登录到应用程序时，会设置此cookie，因此，当您导航到该帐户(已登录)并且帐户管理页面使用相同的服务器和域名时，该cookie可用于该帐户管理页面作为原始Keycloak登录页面，它可以访问cookie并可以让您进入.此cookie无法由您的应用程序发送到例如您自己的REST API，然后以编程方式调用帐户管理页面并抓取QR代码，因为出于安全方面的考虑，您的应用程序无权访问该代码.您可以在Keycloak中的某个地方更改此内容，但是如果有，我强烈建议您不要更改它.
因此，如果我们无法从自己的服务器上抓取页面，那么我们可以在前端做些什么吗?好了，如上所述，您的应用程序无权访问会话cookie，但是如果您在前端JavaScript中向帐户管理页面提出请求(例如，使用fetch或axios)，则该请求将与该cookie一起发送cookie ，这样可以正常工作吗?嗯，实际上，由于CORS，在这种情况下，您会收到一条错误消息. CORS是跨源资源共享，并且为了允许访问Keycloak页面，您必须打开服务器上的设置才能允许从您的网站地址访问它.我看过一些文章，介绍了如何根据需要在Keycloak上打开CORS设置，但是对此我会感到非常紧张.我对Keycloak的内部知识并不了解，也不了解它如何操作来评论这有多少安全风险，但我当然不建议这样做.这里有一些信息( Keycloak angular No'访问控制-allow-Origin标头出现)，以更改"Web Origins"设置您的应用程序的Keycloak客户端，但这会使您的应用程序面临严重的潜在滥用.还有一个主要问题，即使您抓取了QR码，该设备实际上也不会添加到用户帐户中(即使它出现在身份验证器应用程序中)，直到您在QR码所在的页面中输入代码为止然后单击保存".由于没有可用于完成此操作的API端点，因此，我也不认为此选项是可行的.我已经尝试过是否可以在https://{keycloak服务器URL}/auth/realms/{realm name}/protocol/openid-connect/token中使用令牌检索端点，以查看是否向您的服务器发出请求用户名/密码/otp代码将以某种方式注册"到用户名/密码.您的设备并完成该过程，但是尽管您可以通过这种方式获得令牌，并且它不会抱怨otp代码，但实际上并不会注意到该代码，因为就用户而言，该帐户并没有没有向其注册设备.因此，我们必须使用帐户管理页面上的表格才能完成此注册过程.
因此，完成此操作的最终方法是... iframe.抱歉，是的，不过是您剩下的所有东西.您可以将iframe指向帐户管理页面，并且由于用户已登录，因此他们将能够从应用程序页面查看内容.您可以使用相对位置，固定的宽度和高度并移除滚动条，以确保仅显示QR码以及一次性代码，设备名称和保存/取消"按钮的字段.不幸的是，这似乎是目前唯一的选择，并且由于一般iframe的讨厌和不可靠-它们肯定不适合您的应用程序，因此您需要覆盖Keycloak主题才能获得有问题的页面看起来更像您的应用程序-我建议您避免使用此页面，并使用使用Keycloak操作和Admin API的标准方法代替.
如果您已经做到了这一点，那么恭喜您，您将在Stack Overflow上获胜:-)
I have my own Login page where user enters username/password. This username/password are used to login through Keycloak Rest API.
http://localhost:8080/auth/realms/Demo/protocol/openid-connect/token
input - {username,password,grant_type,client_secret,client_id}
And in response i get access token.
Now i wish to enable Authenticator (Google Authenticator). I have enabled it from backend. Now if user wishes to login thorugh my application, my login page i need to get below details.
1.) Somehow i need to include QR Code that appears on keycloak login page post username/password validation to show on my login screen for the first time login once user enter username/password. So do we have any API which return Keycloak QR code image in response.
2.) Subsequent login i will have OTP field, so need a REST api to pass OTP along with username/password.
Please help with REST API if keycloak has any. Integrating through Javascript.
Similar flow as described in use case 1 here
Just want to use keycloak as a database, doing all operation for me, input will be my screen. I do want redirection of URL's while login in and yet should be standalone deployed.
I know this is an old question, but I've recently been looking at something similar, and so thought it would be potentially valuable to share what I have found for others who may be looking into this and wondered what the possibilities are.
TL;DR
You can only really use the existing Keycloak actions to do this or embed the user account management page found at https://{keycloak server URL}/auth/realms/{realm name}/account in an iframe. That's it, I'm afraid. In my opinion it is currently best to just assign actions directly to accounts or use the Credential Reset emails to assign actions; both of these can be done via the Admin API if desired:
Send Credential Reset email containing assigned actions:
https://www.keycloak.org/docs-api/11.0/rest-api/index.html#_executeactionsemail
Set actions directly on the account (include the actions in the requiredActions portion of the user JSON that you send in the body to the endpoint):
https://www.keycloak.org/docs-api/11.0/rest-api/index.html#_updateuser
Background is that as part of a project that I have been working on we wanted to see if we could have an integrated way for users to set up their initial password and OTP device when a new account has been created for them, since the default method of sending them an email from Keycloak using the "Credential Reset" functionality has the limitations that a) it doesn't provide a link to the application itself unless you override the theme, and if you have multiple instances of the application for different users you have no way of knowing which instance to provide the link for, so may have to end up including a list of them, and b) it often doesn't feel truly native to the application, even with changes to the theme. If you're sensible though, I'd suggest you stop and just use this functionality - please see the TL;DR section above for details.
So, in short there is NO API endpoint for receiving a QR code to set up an OTP device. There are two places, however, where the QR code can be retrieved from - the OTP device setup screen when you log in as a user who has had a "Configure OTP" action assigned to their account, and the user's own account management screen.
The first option of the Configure OTP action screen is a non-starter. It only shows up when you log in, and so by definition the user has to log in to Keycloak via the Keycloak login page in order to trigger the page to be displayed. At this point you're already on a Keycloak page instead of one of your app's pages, and so unless you can get very creative with changes to these Keycloak pages via a custom theme, tapping into this page isn't really an option.
The second option is more interesting, but far from ideal. Every user who has logged in has access to an account management page that can be found at https://{keycloak server URL}/auth/realms/{realm name}/account. This page allows you to do things like change your name, password, etc. and it also allows you to add an OTP device if you don't already have one, or delete any existing OTP devices associated with your account. This OTP device tab of the account management page can be reached directly via https://{keycloak server URL}/auth/realms/{realm name}/account/totp.
As I mentioned, there isn't an API that you can access to view the QR code that shows up on this page. The only way it is accessible is via the GET request to https://{keycloak server URL}/auth/realms/{realm name}/account/totp, which returns the HTML for the page I've already mentioned. Okay great, so can we scrape the QR code programmatically and then put it in our own page on our application? Err, no, not really. You see, whilst a lot of the Keycloak API endpoints rightly allow you to send a bearer token (e.g. access token) in the authorization header to access and endpoint, this page will not accept a bearer token as a means of authentication/authorization. Instead it uses a session cookie that is locked down to the Keycloak URL. This cookie is set when you log in to your application via the Keycloak login page, and so is available to this account management page when you navigate to it, having already logged in, and since the account management page uses the same server and domain name as the original Keycloak login page, it has access to the cookie and can let you in. This cookie cannot be sent by your application to e.g. your own REST API to then programmatically call the account management page and scrape the QR code, because your application doesn't have access to it for good security reasons. This might be something you can change in Keycloak somewhere, but if there is I would strongly recommend against changing it.
So if we can't scrape the page from our own server, can we do something on the front-end? Well, as mentioned, your application doesn't have access to the session cookie but if you make a request (e.g. using fetch or axios) in your front-end JavaScript to the account management page then that request will send the cookie along with it, so that could work right? Umm, well actually you will get hit with an error message in this scenario due to CORS. CORS is Cross-Origin-Resource-Sharing and in order to allow the Keycloak page to be accessed then you would have to open up the settings on the server to allow it to be accessed from your website's address. I've seen some articles that look at how you can open up your CORS settings on Keycloak if you wish but I'd be very nervous about doing this. I don't know enough about the internals of Keycloak and how it operates to comment on how much of a security risk this is, but I certainly wouldn't recommend it. There some information here (Keycloak angular No 'Access-Control-Allow-Origin' header is present) on changing the "Web Origins" setting of your application's Keycloak client, but this opens up your application to some serious potential abuse. There is also the MAJOR issue that even if you scraped the QR code, the device isn't actually added to the user's account (even though it appears in the authenticator app) until you enter a code into the page that the QR code is on and click Save. Since there isn't an API endpoint that you can use to complete this operation, I therefore don't think that this option is viable either. I've tried out whether or not you can use the token retrieval endpoint at https://{keycloak server URL}/auth/realms/{realm name}/protocol/openid-connect/token to see if making a request with your username/password/otp code will somehow "register" your device and complete the process, but although you can get a token this way, and it doesn't complain about the otp code, it doesn't actually take any notice of the code because as far as it's concerned the user's account doesn't have a device registered with it. So we have to use the form on the account management page in order to complete this registration process.
So the final way of possibly doing this is.... an iframe. Sorry, yeah it's rubbish but that's all your left with. You can have the iframe point at your account management page, and because the user is logged in then they will be able to see the contents from your application's page. You can use relative positioning, fixed width and height and remove scroll bars to ensure that you ONLY show the QR code and the fields for the one time code, device name, and the Save/Cancel buttons. This, sadly, seems to be the only option at the moment, and due to how nasty and unreliable iframes can be in general - they certainly don't feel native to your application, and you'll need to override your Keycloak theme to get the page in question to look more like your app - I'd recommend steering clear of this and using the standard approach of using Keycloak actions and the Admin API instead.
If you've made it this far, congratulations, you win at Stack Overflow :-)
这篇关于Keycloak-Multi/2FA Factor-OTP-QR Code-自定义登录屏幕-Rest API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
