KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

keycloak-login-recaptcha

★ 80 Open GitHub ↗

By default Keycloak only supports ReCaptcha for Regsitration, not login. so we created a simple module for activating recaptcha for login

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# keycloak-login-recaptcha

By default Keycloak (up to 12) only supports ReCaptcha for Registration, not login. so we created a simple module for activating recaptcha for login

# How to use
* first run `mvn clean install`. it will produce `target/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 inside `base` 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 modified `login.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 is `X-Frame-Options` which is set to `ALLOW-FROM https://www.google.com` in 
      the file. The other important setting is `Content-Security-Policy` which is set to `frame-src 'self' https://www.google.com; frame-ancestors 'self'; object-src 'none';`.
* Go to `localhost:8080` and login with `admin` username and `admin` password.
* Make sure You're in `Playground` realm. Go to `Authentication` section in left side menu. Go to `Flows` tab.
* Pick `Browser With Recaptcha` flow in the drop down
* Under `Recaptcha Username Password Form` row click `Actions` and then `Config`
* Put the `sitekey` and `secret` obtained from `https://www.google.com/recaptcha/admin` into the config
* Go back to `Authentication` side menu, go to `Bindings` tab and change `browser flow` to `browser with recaptcha`
* Go to `Users` side menu, click `Add user`. create a user and make it enabled, and set it's credential properly.
* Go back to `Users`, click `View all users` and on that specifiec user you have created in prev step, click `impersonate`.
* Then `Sign Out` and then `Sign In`. If you have done everything precisely, then you'll be able to see the recaptcha form.

# Explaination

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>
```

keycloak-login-recaptcha

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README