By default Keycloak (up to 12) only supports ReCaptcha for Registration, not login. so we created a simple module for activating recaptcha for login
- first run
mvn clean install
. it will producetarget/recaptcha-login.jar
. - Then start keycloak with
docker-compose up
- the
target/recaptcha-login.jar
is mounted to/opt/jboss/keycloak/standalone/deployments/recaptcha-login.jar
, so it will be detected by JBoss automatically as a plugin. login.ftl
is the login template insidebase
theme for keycloak in/opt/jboss/keycloak/themes/base/login/login.ftl
. We decided to override it to add recaptcha related items into it directly. so we have a modifiedlogin.ftl
file inside project. which is mounted into the container.- we injected realm settings in to keycloaks' container by
playground-realm.json
. One of the most important realm settings isX-Frame-Options
which is set toALLOW-FROM https://www.google.com
in the file. The other important setting isContent-Security-Policy
which is set toframe-src 'self' https://www.google.com; frame-ancestors 'self'; object-src 'none';
.
- the
- Go to
localhost:8080
and login withadmin
username andadmin
password. - Make sure You're in
Playground
realm. Go toAuthentication
section in left side menu. Go toFlows
tab. - Pick
Browser With Recaptcha
flow in the drop down - Under
Recaptcha Username Password Form
row clickActions
and thenConfig
- Put the
sitekey
andsecret
obtained fromhttps://www.google.com/recaptcha/admin
into the config - Go back to
Authentication
side menu, go toBindings
tab and changebrowser flow
tobrowser with recaptcha
- Go to
Users
side menu, clickAdd user
. create a user and make it enabled, and set it's credential properly. - Go back to
Users
, clickView all users
and on that specifiec user you have created in prev step, clickimpersonate
. - Then
Sign Out
and thenSign In
. If you have done everything precisely, then you'll be able to see the recaptcha form.
Inside the login.ftl
, We have just added this part inside <form></form>
section.
So inside RecaptchaUsernamePasswordForm
we will set recaptchaRequired
to true
, and this part
of login.ftl
will be enabled for recaptcha based logins.
If using normal UsernamePasswordForm
then this part will not be enabled in the login form.
<#if recaptchaRequired??>
<div class="form-group">
<div class="${properties.kcInputWrapperClass!}">
<div class="g-recaptcha" data-size="compact" data-sitekey="${recaptchaSiteKey}"></div>
</div>
</div>
</#if>