So Installierst du POWER CAPTCHA

Integration mit WordPress oder JavaScript

POWER CAPTCHA INSTALLATION

Wie installiere ich POWER CAPTCHA?

Um POWER CAPTCHA zu verwenden, muss deine Website keine besonderen Voraussetzungen erfüllen. Die Anwendung ist mit allen Systemen kompatibel, die mit externen Schnittstellen kommunizieren können. Sie ist standardmäßig eine Cloud-Lösung, d.h. wir hosten die Anwendung auf unseren Servern. Wenn du POWER CAPTCHA in deine Website einbindest, interagiert deine Website mit der KI auf unserem Server, und wir können deine Website schützen. Um die Anwendung zu installieren, musst du dir zunächst eine Lizenz sichern. Mit deiner Lizenz, erhältst du automatisch einen API-Schlüssel, um unsere Schnittstellen anzusprechen. Du kannst POWER CAPTCHA anschließend auf verschiedene Arten in deine Website integrieren: Wenn du WordPress nutzt, lade dir einfach unser WordPress-Plugin herunter und folge unserer Installationsanleitung. Du benötigst hierfür keine Programmierkenntnisse. Weiterhin kannst du POWER CAPTCHA über JavaScript auf deiner Website/Applikation einbinden und das Token auf dem Server z.B. mit PHP oder Java verifizieren. Hierfür kannst du ebenfalls unsere Vorlagen nutzen.

Mit dem Erwerb einer Lizenz erhältst du automatisch einen Kunden-Account auf unserer Website. Wenn du POWER CAPTCHA für deinen Bedarf konfigurieren möchtest (Professional- und Enterprise-Versionen), kannst du in deinen Account-Einstellungen die gewünschten Einstellungen vornehmen. Alternativ kannst du auch mit unseren Voreinstellungen starten.

Im Folgenden findest du unsere Schritt-für-Schritt-Anleitungen zur Installation mit WordPress und JavaScript sowie Anleitungen zur Token-Verifizierung mit PHP oder über die Verifiy-Schnittstelle. Diese kannst du direkt verwenden und für deinen Bedarf anpassen.

Du möchtest wissen, wie genau deine Website mit unserem Server kommuniziert? Erfahre mehr in unserem kostenfreien Whitepaper!

INSTALLATION WORDPRESS-PLUGIN FÜR POWER CAPTCHA

So kannst du das WordPress-Plugin installieren

Um das WordPress-Plugin zu installieren, lade dir zunächst das Plugin als ZIP-Datei in unserem Kunden-Bereich herunter. Gehe anschließend in den Administrations-Bereich / Dashboard von WordPress und klicke auf den Menüpunkt Plugins > Installieren. Klicke dort oben auf den Button „Plugin hochladen“ und wähle das ZIP-Archiv aus, welches du zuvor von unserer Website heruntergeladen hast. Im Anschluss klickst du auf „Jetzt installieren“. Nach dem Upload und der Installation öffnet sich eine Seite, über die du unser POWER CAPTCHA-Plugin aktivieren kannst.

Konfiguration des Plugins

Nach der Aktivierung kannst du das Plugin konfigurieren. Dafür gehst du im Administrations-Bereich von WordPress auf Einstellungen > POWER CAPTCHA und trägst dort unter „General settings“ deinen API- und Secret-Key in die entsprechenden Felder ein. Beide Keys erhältst du im Kunden-Bereich unserer Website. Unter „Integration settings“ kannst du auswählen, für welches Plugin oder für welchen Seitenbereich du POWER CAPTCHA aktivieren möchtest.

Der Punkt „Enterprise settings“ ist nur relevant, falls du eine Enterprise-Lizenz hast und die Anwendung nicht als Cloud-Lösung nutzt (Standard), sondern eine lokale POWER CAPTCHA-Instanz betreibst. In diesem Fall hast du die Möglichkeit, die URLs zu deiner lokal gehosteten Instanz und zu deinem lokalen JavaScript einzugeben. Dann gehen alle Requests an deine eigene Instanz, statt an unseren Server. Falls du keine eigene Instanz betreibst, müssen alle Felder unter „Enterpise settings“ leer bleiben. Wenn alle Einstellungen bearbeitet sind, klicke auf „Änderung speichern“. Die gewählten Plugins / Bereiche sind nun mit POWER CAPTCHA geschützt.

Diese WordPress-Plugins kannst du bereits mit POWER CAPTCHA schützen:

WPForms (Plugin)
Wordpress: Wordpress Registrierung, Login
Plugins: WooCommerce, Elementor Pro Forms

Wir arbeiten zurzeit an der Unterstützung folgender Plugins / Bereiche:

Wordpress: Kommentar-Funktion
Plugins: Contact Form 7, Ninja Forms, CoBlocks Form, Formidable Forms, Ultimate Member, Fluent Forms

Stand: Juni 2023, Änderungen vorbehalten.

POWER CAPTCHA INTEGRATION MIT HTML UND PHP

POWER CAPTCHA Integration im Frontend mit HTML

Um POWER CAPTCHA im Frontend mit HTML zu integrieren, binde zunächst unser JavaScript im <head> Element ein:

				
					<script src="https://cdn.power-captcha.com/v1/power-captcha-1.1.0.min.js" type="text/javascript" defer></script>

Füge dem zu schützenden Formular das Attribut data-pc-sitekey=”deinSiteKey” und data-pc-client-uid=”eindeutigeClientId” hinzu. Die eindeutige Client-ID kann zum Beispiel auf der IP-Adresse des Clients basieren. Wichtig ist, dass der Client damit eindeutig identifiziert werden kann und derselbe Wert bei der Token-Verifizierung übergeben wird. Beispiel:

				
					<form method="post" action="submit.php" 
    data-pc-sitekey="5gVoymQWRcyRQyJUxEqSdodfsK9vJJJs"
    data-pc-client-uid="<?php echo hash('sha256', $_SERVER['REMOTE_ADDR']); ?>">
    ...
</form>

Falls du eine Enterprise-Lizenz hast, kannst du für zusätzlichen Schutz das Input-Feld mit dem Benutzernamen / der E-Mail-Adresse mit dem Attribut data-pc-user versehen. Beispiel:

				
					<input name="username" type="text" data-pc-user />

Ein Login-Formular, welches mit POWER CAPTCHA geschützt ist, könnte beispielsweise so aussehen:

				
					<form method="post" action="submit.php" 
    data-pc-sitekey="5gVoymQWRcyRQyJUxEqSdodfsK9vJJJs"
    data-pc-client-uid="<?php echo hash('sha256', $_SERVER['REMOTE_ADDR']); ?>"
    >
    <label for="username">Username:</label><br />
    <input type="text" id="username" name="username" data-pc-user /><br />
    <label for="password">Password:</label><br />
    <input type="password" id="password" name="password" />
    <input type="submit" value="submit" />
</form>

Beim Absenden des Formulars (submit) wird der Request von unserer POWER CAPTCHA-API überprüft, und dem Formular wird ein Feld mit einem Token hinzugefügt. Im Anschluss musst du das Token im Backend prüfen /verifizieren.

Auswahl und Positionierung des Badges

Standardmäßig wird ein Badge (Logo) von POWER CAPTCHA am geschützen Formular angezeigt. Es gibt drei unterschiedliche Badge-Typen, die über ein das Attribut data-pc-badge-type gesteuert werden können. Das Attribut kannst du mit Zahlen von 0 bis 3 belegen. Dabei steht jede Zahl steht für einen bestimmten Badge-Typ:

Badge-Typ	Beschreibung
data-pc-badge-type="0"	Badge wird ausgeblendet
data-pc-badge-type="1"	Kleines Badge
data-pc-badge-type="2"	Breites Badge
data-pc-badge-type="3"	"floating" Badge am linken Bildschirmrand

Das Attribut data-pc-badge-target steuert die Positionierung des Badges. Es akzeptiert einen CSS-Selektor als Wert. Das Badge wird vor dem Element eingefügt, das durch den angegebenen CSS-Selektor gefunden wird. Andernfalls wird das Badge am Ende des Formulars positioniert. Nachfolgend ein Beispiel, wie du das “floating”-Badge auf Höhe des Submit-Buttons einbinden kannst:

				
					<form method="post" action="submit.php" 
    data-pc-sitekey="5gVoymQWRcyRQyJUxEqSdodfsK9vJJJs"
    data-pc-client-uid="<?php echo hash('sha256', $_SERVER['REMOTE_ADDR']); ?>"
    data-pc-badge-type="3"
    data-pc-badge-target="input[type='submit']"
    >
    ...
    <input type="submit" value="submit" />
</form>

Eigene Callback-Funktion

Falls das Formular per JavaScript weiterverarbeitet wird (z.B. Verwendung von AJAX) kann im Attribut data-pc-callback eine Callback-Funktion angegeben werden. Beispiel:

				
					<form id="customForm"
    data-pc-sitekey="5gVoymQWRcyRQyJUxEqSdodfsK9vJJJs"
    data-pc-client-uid="<?php echo hash('sha256', $_SERVER['REMOTE_ADDR']); ?>"
    data-pc-callback="customSubmit">
    ...
</form>

Die Callback-Funktion muss im JavaScript definiert sein und wird automatisch aufgerufen, nach dem der Request erfolgreich durch die POWER CAPTCHA-API überprüft wurde. Hier ist Beispiel-Code für eine Callback-Funktion, die das Formular per jQuery und AJAX absendet:

				
					const customForm = jQuery("#customForm");
const tokenField = jQuery(customForm).find("input[name='pc-token']");

function customSubmit(token) {
    jQuery.ajax({
        type: "POST",
        url: "ajaxSubmit.php",
        data: customForm.serialize()
    })
    .done((data) => {
        // success
        console.log({data});
    })
    .fail((error) {
        // error
        console.error(error);
    })
    .always(() => {
        // clear the token field in case a new submit should be allowed.
        tokenField.val("");
    });
}

Im Kontext des Callback-Beispiels muss das Token in “ajaxSubmit.php” überprüft / verifiziert werden (siehe unten).

PRÜFUNG DES TOKENS (PHP)

So kannst du das POWER CAPTCHA Token auf deinem Server verifizieren

Bevor du den Inhalt deines Formulars im Backend evaluierst bzw. abspeicherst, solltest du das POWER CAPTCHA Token verifizieren.

Dazu muss das Token aus dem Formular ($_POST[“pc-token”]) und dein Secret-Key an unsere Schnittstelle https://api.power-captcha.com/pcu/v1/verify als JSON übergeben werden, und im Header muss dein Sitekey im Feld X-API-Key vorhanden sein.

Die Schnittstelle gibt ein JSON zurück, im Feld „success“ steht, ob das Token erfolgreich verifiziert wurde. Im Anschluss kannst du dein Formular wie gewohnt evaluieren.

Hier ein Beispiel-Code, wie du ein Token mit PHP verifizieren kannst:

				
					<?php
if(isset($_POST['pc-token']) && !empty($_POST['pc-token'])) {
    $curl = curl_init('https://api.power-captcha.com/pcu/v1/verify');
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($curl, CURLOPT_POST, TRUE);
    
    curl_setopt($curl, CURLOPT_HTTPHEADER, array(
        'X-API-Key: 5gVoymQWRcyRQyJUxEqSdodfsK9vJJJs', // your api key
        'Content-Type: application/json'
    ));
    
    curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode(array(
        'secret' => 'q5jBZojDfaQFzPGyhmAEFgz6C5j3NsjJ', // your secret key
        'token' => $_POST['pc-token'],
        'clientUid' => hash('sha256', $_SERVER['REMOTE_ADDR']), // unique client id (same value as in the data-client-uid attribute)
        'name' => $_POST['username'] // field which was marked by 'data-pc-user' (optional)
    )));
    
    $response = json_decode(curl_exec($curl));
    curl_close($curl);

    if($response->success) {
        echo "Token was successfully verified.";
        // add your form logic
    } else {
        echo "Error: Token verfification failed.";
    }
} else {
    echo "Error: Token was missing in POST request.";
}
?>

Dokumentation der API-Schnittstelle für das Backend

API-Schnittstelle zur Token-Verifizierung

Nachdem du dein Formular abgesendet hast, muss das Token in deinem Backend verifiziert werden. Dazu übergibst du das Token und einige zusätzliche Parameter per JSON an unsere Verifiy-Schnittstelle, damit wir prüfen können, ob das Captcha korrekt gelöst wurde oder die alternative E-Mail-Authentisierung ein positives Ergebnis hatte. Die Verifiy-Schnittstelle wird über die folgende URL aufgerufen: https://api.power-captcha.com/pcu/v1/verifiy

Im Header muss beim Aufruf der Wert X-API-Key mit deinem API-Key gesetzt sein, und im Request Body muss das Token und die zusätzlichen Parameter als JSON per POST an unsere Schnittstelle übertragen werden.

Beispiel JSON für den Request:

				
					{
    "secret": "{secret-key}",
    "token": "{token}",
    "clientUid": "{client-uid}",
    "name": "{username}"
}

Füge deinen Secret-Key im Parameter “secret” ein. Deinen Secret-Key findest du in deiner Konto-Verwaltung. Der Parameter “token” enthält das Token, welches über unser JavaScript generiert wurde. Das Token befindet sich im POST/GET-Feld “pc-token”. Der Parameter “clientUid” muss dieselbe eindeutige Client-ID enthalten, die bereits im Formular vergeben wurde. Darüber wird geprüft, ob das Token ursprünglich für diese Client-ID erstellt wurde. Falls du im Frontend ein Feld mit “data-pc-user” markiert hast, musst du den Wert dieses Feldes in dem Parameter “name” an unsere Verifiy-Schnittstelle übergeben, um einen Benutzernamen / E-Mail-Adresse zu schützen.

Beispiel Rückgabewert:

				
					{
     "success": true,
     "errors": []
}

Wenn das Feld “success” mit “true” belegt ist, dann war die Verifizierung erfolgreich (Token ist gültig), und du kannst mit der Evaluierung deines Formulars fortfahren. Ist das Feld “success” mit “false” belegt, dann ist das Token entweder ungültig oder der Request ist falsch aufgebaut. In diesem Fall sollte die Evaluierung des Formulars umgehend abgebrochen werden, da das Token nicht von POWER CAPTCHA verifiziert werden konnte. Wenn der Request falsch aufgebaut ist, wird im Feld “errors” eine Liste mit den folgenden Fehler-Codes zurückgegeben:

Fehler-Code	Beschreibung
missing_token	Beim Request wurde kein oder ein leeres Token mitgebeben.
missing_secret	Beim Request wurde kein Secret-Key mitgegeben.
invalid_secret	Der Secret-Key ist ungültig oder passt nicht zum API-Key.
invalid_token	Das Token ist ungültig.

POWER CAPTCHA DEMO

Jetzt Demo testen

Du möchtest POWER CAPTCHA live testen? Hier kannst du unsere Demo starten und die Anwendung auf deiner Website / App simulieren.

JETZT STARTEN

Starte jetzt mit POWER CAPTCHA

Du möchtest POWER CAPTCHA direkt verwenden? Dann hole dir hier eine Lizenz und folge unserer Schritt-für-Schritt-Anleitung.