I'm using Firebase auth to control access to my app and it's been working great and was easy to implement. Now that I'm bringing real testers on, I've got a question.
When a user registers, I'm forcing email verification and that all works fine. I've even found how to somewhat customize the email that user receives asking them to verify their address. However, when the user clicks that link, they get a very generic message:
Your email has been verified
You can now sign in with your new account
Is there any way to customize this? I don't want to do anything particularly fancy - just a more helpful message and maybe a link to return to the app.
Thoughts?
If you mean the web page that they get to when they click the link, there is no way to customize the existing page. But you can create your own page, and host it (for example on Firebase Hosting). For full documentation on this process, see the documentation on creating a custom email action handler.
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've managed to implement this through the rest API of Keycloak. To realize this, you need to extend Keycloak yourself with a SPI. To do this create your own Java project and extend org.keycloak.services.resource.RealmResourceProvider and org.keycloak.services.resource.RealmResourceProviderFactory. You can find more information in the official docs (https://www.keycloak.org/docs/latest/server_development/#_extensions), github examples and other stack overflow posts how to do this.
Once you got this up and running you can implement it like this:
#GET
#Path("your-end-point-to-fetch-the-qr")
#Produces({MediaType.APPLICATION_JSON})
public YourDtoWithSecretAndQr get2FASetup(#PathParam("username") final String username) {
final RealmModel realm = this.session.getContext().getRealm();
final UserModel user = this.session.users().getUserByUsername(username, realm);
final String totpSecret = HmacOTP.generateSecret(20);
final String totpSecretQrCode = TotpUtils.qrCode(totpSecret, realm, user);
return new YourDtoWithSecretAndQr(totpSecret, totpSecretQrCode);
}
#POST
#Path("your-end-point-to-setup-2fa")
#Consumes("application/json")
public void setup2FA(#PathParam("username") final String username, final YourDtoWithData dto) {
final RealmModel realm = this.session.getContext().getRealm();
final UserModel user = this.session.users().getUserByUsername(username, realm);
final OTPCredentialModel otpCredentialModel = OTPCredentialModel.createFromPolicy(realm, dto.getSecret(), dto.getDeviceName());
CredentialHelper.createOTPCredential(this.session, realm, user, dto.getInitialCode(), otpCredentialModel);
}
The secret received with the GET must be send back with the POST. The initial code is the one from your 2FA app (e.g. Google Authenticator). The QR code is a string which can be displayed in an img with src 'data:image/png;base64,' + qrCodeString;
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 :-)
I am into a strange fix with my site.
Firstly, my site is password protected. So, when I visit, http://www.mysite.com it is greeted with a nice shiny login page. User puts in the credentials and goes in.
Now, I am hoping that for some special people, they don't have to login. For that I need to have some specific URL, say, http://www.mysite.com/bypass which takes me to the site without any login page.
Is it possible?
Many Thanks
It should be possible, but I wouldn't recommend it. A good option would be to just tell those special people to have their browser save the password.
To actually implement what you want - to log in without login credentials you'd have to do something like what "drush user-login" does. It creates a one-time link that allows anyone to become "logged in". It's the same functionality as the password reset link. You could probably detect the (type of) link and re-route it to the http://www.mysite.com/bypass address.
In the end it's best just not to do it.
So when you put the login button plugin on an app it seems to display the user's friends that are using said app. It displays this even to users that have NOT allowed the app access yet. For example, if you go to "Henry's Cooking App" but have never Logged into the app thru facebook, it will still show you your friends that are using the app.
What I'm trying to do is use this feature to grab an array of fb-userids from the plugin so I can do a query on my DB to show the POTENTIAL user a little more info. For example let's say you have 2 friends that already use "Henry's Cooking App": Joe and Karen. If I could get their userid I could then show you something like "Joe just cooked Veal Scallopini, and Karen is perfecting her Tonkatsu Curry".
I know you could do this easily IF you had the authentication token, but that is only obtained after the user logs in. I'm trying to leverage the fact that fb seems to think it's OK to show your friends that are using the app BEFORE you sign up for the app.
The only super hacky way I could think of to do it is the fact that I could pull the href attribute of elements matching $(".uiFacePileItem a") which gives a link to the user profile which I could then grab the username or UID from. This seems like it could break easily though, anyone have a better idea? Thanks!
The only super hacky way I could think of to do it is the fact that I could pull the href attribute of elements matching $(".uiFacePileItem a") which gives a link to the user profile which I could then grab the username or UID from.
You can’t do that, because the Facebook login dialogs are not running under your domain – so the Same Origin Policy prevents you from interacting with the DOM of these dialogs.
I'm trying to leverage the fact that fb seems to think it's OK to show your friends that are using the app BEFORE you sign up for the app.
Well, it’s certainly (more) OK if Facebook does that – because that doesn’t give any information away to third parties (meaning you as the app developer/provider) – only the user sees that.
It would not be OK if Facebook would let you access this info, at a point where I haven’t even decided to use your app yet – totally a case of „none of your business”.
After I decide to use your app, you may have access to certain information. Before that – No Way, José.
We're trying to use the Facebook Authenticated Referrals feature on our website.
Right now it works fine when one user (Alice) uses a Feed Dialog to post to her wall and another user (Bob) clicks on Alice's post. Bob sees an Auth Dialog before navigating to our website.
But our app doesn't (currently) use Feed Dialogs; we just have Like buttons everywhere. I was hoping/expecting that when Alice clicks the Like button in an article on our site, and Bob clicks on Alice's "Like" post, Bob would get an Auth Dialog.
Am I just misconfiguring my site/app somehow? Is it possible to get Authenticated Referrals from Likes at all?
I didn't realise this was potentially possible - I assumed it would work if the liked URLs were all http://apps.facebook.com/{YOUR NAMESPACE}/ URLs - if this isn't working it sounds like either a bug or a fairly reasonable feature request.
If the likes are to URLs outside of your Canvas URL I wouldn't really expect this to work, because the links are not definitely associated with your canvas app
«If you need access to more information, such as the user's email address, etc. you must request permissions for this information. If you can do this by adding the permissions you need to the scope attribute of the Login Button like below»
http://developers.facebook.com/docs/guides/web/
Check the link, I've waste enough time but still not understand, why should we ask grant permission for our application twice — in App Settings first and <div class="fb-login-button" data-scope="read_stram, offline_access"> here is the second one. Just check your data-scope attribute.
<fb:login-button> attribute is scope, you can read a bit about it by the link below.
http://developers.facebook.com/docs/reference/plugins/login/
In a Facebook bug, a FB engineer responded to say: "this is currently the design of authenticated referrals. It only happens with Open Graph app publishes."
So, at least for now, no authenticated referrals are possible for Facebook Like links.