Integrationen
Keycloak

CaptchaFox für Keycloak

Installation

  1. Laden Sie die neueste Version (opens in a new tab) vom GitHub Repository herunter.
  2. Kopieren Sie die heruntergeladene keycloak-captchafox.jar in das providers Verzeichnis der Keycloak Installation.

Konfiguration

Führen Sie die folgenden Schritte aus, um den installierten Provider zu aktivieren.

Keycloak Admin Console

Klicken Sie in Ihrem Realm im linken Menü auf Authentifizierung und gehen Sie auf die Registerkarte Flows.

Step 1

Duplizieren Sie hier den Registrierungs-Flow, geben Sie ihm einen Namen und öffnen Sie ihn.

Step 2

Step 3

Entfernen Sie anschließend den Recaptcha-Schritt aus dem Formular.

Step 4

Fügen Sie nun den Ausführungsschritt von CaptchaFox zum Registrierungsformular hinzu.

Step 5 Step 6

Setzen Sie in der Dropdown-Liste neben dem Namen die Anforderung auf Erforderlich, um CaptchaFox später im Formular anzuzeigen.

Step 7

Klicken Sie anschließend auf das Zahnrad-Symbol, um die Schritt-Einstellungen zu öffnen. Legen Sie dort einen Alias fest und geben Sie Ihren Site Key und Secret Key aus Ihrem CaptchaFox Admin Portal ein.

Step 8

Der letzte Schritt in der Keycloak Admin Console besteht darin, den Registrierungs-Flow mit dem neu erstellten zu verbinden.

Step 9

Step 10

Template anpassen

Um das CaptchaFox-Widget in Ihrem HTML-Formular anzuzeigen, müssen Sie auch die Registrierungsvorlage ändern. Sie finden die Dateien in Ihrer Keycloak-Installation unter themes/base/login/ oder in Ihrem eigenen Theme. Wenn Sie die Benutzerprofil-Vorschau (-Dkeycloak.profile=preview) verwenden, müssen Sie die Datei register-user-profile.ftl bearbeiten, ansonsten die Datei register.ftl.

Ersetzen Sie in der Datei den Recaptcha-Codeblock durch den folgenden:

<#if captchaFoxRequired??>
    <div class="form-group">
        <div class="${properties.kcInputWrapperClass!}">
            <div class="captchafox" data-mode="${captchaFoxMode!'inline'}" data-sitekey="${captchaFoxSiteKey}"></div>
        </div>
    </div>
</#if>

Step 11

Ergebnis

Dies ist ein Beispiel dafür, wie das Formular nach Abschluss der Konfiguration aussieht:

Vorschau

(Optional) Nachrichten anpassen

Das Plugin verwendet derzeit die gleichen Meldungen wie die Recaptcha-Implementierung. Sie können sie ändern, indem Sie die entsprechende Nachrichtendatei öffnen (z. B. theme/base/login/messages/messages_de.properties) und die Texte aktualisieren.

recaptchaFailed=Captcha ist ungültig
recaptchaNotConfigured=Captcha ist erforderlich, aber nicht konfiguriert
WordPressCS-Cart