Einbindung und Konfiguration des Widgets
Füge zunächst unser JavaScript ein, um anschließend das Widget in dein Formular zu integrieren.
<script src="https://cdn.power-captcha.com/v1/power-captcha-1.2.8.min.js" type="text/javascript" defer></script>
Das JavaScript kann sowohl im <head>-Element als auch am Ende der Seite (vor dem </body>-Element) eingefügt werden.
Einbindung mit HTML
Füge innerhalb des zu schützenden Formulars folgendes <div>-Element hinzu und ersetze die Platzhalter in den Attributen data-pc-api-key und data-pc-client-uid. Innerhalb des <div>-Elements wird das POWER CAPTCHA-Widget dargestellt.
<form>
...
<div data-pc-api-key="<apiKey>"
data-pc-client-uid="<eindeutigeClientId>">
</div>
...
</form>
Platzhalter <apiKey> ersetzen
Der Platzhalter <apiKey> muss mit deinem API-Key ersetzt werden.
Platzhalter <eindeutigeClientId> ersetzen
Der Platzhalter <eindeutigeClientId> muss durch einen dynamischen Wert ersetzt werden, über den der Client eindeutig identifiziert werden kann.
Dies kann zum Beispiel die IP-Adresse des Clients sein. Wichtig ist, dass derselbe Wert auch bei der Verifizierung des Tokens übergeben wird.
Das Widget sollte anschließend in deinem Formular angezeigt werden.
Weitere Einstellungsmöglichkeiten
Neben den beiden Pflicht-Attributen data-pc-api-key und data-pc-client-uid gibt es weitere Attribute, um das Widget zu konfigurieren.
Die nachfolgende Tabelle zeigt welche Attribute es gibt und wie diese verwendet werden können.
| Attribut | Wert / Beschreibung |
|---|---|
data-pc-api-key | Dein API-Key (Pflicht-Attribut). |
data-pc-client-uid | Eindeutige Client-ID (z.B. IP-Adresse des Clients (Pflicht-Attribut)). |
data-pc-check-mode | Einstellung der Widget-Anzeige und des Prüfverhaltens (siehe Prüfmodus). Prüfmodus auto ist voreingestellt. |
data-pc-lang | Einstellung der Sprache (mögliche Werte de, en, da, nb, sv). Standardmäßig wird die Sprache des Browsers erkannt und verwendet. |
data-pc-debug | Einstellung des Debug-Modus (mögliche Werte true oder false), standardmäßig ist false ausgewählt. Bei eingeschaltetem Debug-Modus werden detaillierte Informationen in der Browser-Konsole ausgegeben. |
data-pc-user-input-field | CSS-Selektor zum Schutz eines zusätzlichen Eingabefeldes (z.B. Benutzername oder E-Mail-Adresse). Kann als Alternative zum Attribut data-pc-user am Eingabefeld genutzt werden (nur Enterprise-Tarif). |
data-pc-endpoint | Basis-URL des selbst gehosteten POWER CAPTCHA-Endpunkts (nur bei On-Premises Lösung). |
Prüfmodus / Widget verstecken
Standardmäßig wird das Widget immer eingeblendet und die Sicherheitsprüfung startet automatisch, sobald das Formular ausgefüllt wird (focus-Event). Wenn du ein Feld mit dem Attribut data-pc-user versiehst, startet die Prüfung erst, nachdem das Feld ausgefüllt wurde (change-Event auf den Eingabefeld).
Du hast jedoch die Möglichkeit die Anzeige und das Prüfverhalten individuell einzustellen. Dabei kannst du zwischen drei Prüfmodi wählen, um z.B. die automatische Sicherheitsprüfung abzuschalten oder das Widget nur anzuzeigen, wenn es notwendig ist. Du kannst den Prüfmodus über das Attribut data-pc-check-mode einstellen. Du kannst zwischen den Werten auto, hidden oder manu wählen. Dabei steht jeder Wert für einen bestimmten Prüfmodus:
Prüfmodi
| Prüfmodus | Beschreibung |
|---|---|
auto | Das Widget ist standardmäßig eingeblendet. Die Sicherheitsprüfung startet, sobald das Formular ausgefüllt wird oder nachdem das Feld (z.B. Benutzername oder E-Mail-Adresse) ausgefüllt wurde. Ein manueller Klick auf das Widget ist nur dann notwendig, wenn auch ein Captcha gelöst werden muss. |
hidden | Das Widget ist zunächst nicht eingeblendet. Die Sicherheitsprüfung startet, sobald das Formular ausgefüllt wird oder nachdem das Feld (z. B. Benutzername oder E-Mail-Adresse) ausgefüllt wurde. Falls die Prüfung ergibt, dass ein Captcha gelöst werden muss, wird das Widget angezeigt. |
manu | Das Widget ist immer eingeblendet. POWER CAPTCHA startet die Sicherheitsprüfung erst nach einem manuellen Klick auf das Widget. |
Beispiel
Den hidden-Modus kannst du zum Beispiel folgendermaßen aktivieren:
<form>
...
<div data-pc-api-key="<apiKey>"
data-pc-client-uid="<eindeutigeClientId>"
data-pc-check-mode="hidden">
</div>
...
</form>