How to install POWER CAPTCHA

Integration with WordPress, TYPO3 or JavaScript

POWER CAPTCHA INSTALLATION

How to install POWER CAPTCHA?

POWER CAPTCHA - Captcha WordPress-Plugin und JavaScript installieren, Token verifizieren

To use POWER CAPTCHA, your website does not need to meet any special requirements. The application is compatible with all systems that can communicate with external interfaces. By default, it is a cloud solution, which means that we host the application on our servers. If you integrate POWER CAPTCHA into your website, your website interacts with the AI on our server, and we can protect your website. To install the application, you must first secure a license. With your license, you will automatically receive an API key to access our interfaces. You can then integrate POWER CAPTCHA into your website / application in various ways: If you use WordPress or TYPO3, simply download our plugin or extension and follow our installation guides. You do not need any programming skills. You can also integrate POWER CAPTCHA via JavaScript and verify the token on the server using PHP or Java, for example. You can also use our templates for this.

POWER CAPTCHA - Captcha WordPress-Plugin und JavaScript installieren, Token verifizieren
Installation guides and configuration

You can download the POWER CAPTCHA extension for your TYPO3 installation directly from TYPO3. Alternatively, you can also find the extension and a quick guide to integration in the GitHub Repository. Our integration is compatible with TYPO3 versions 11.5 LTS and 12.4 LTS and protects forms that you create with the “Form” or “Powermail” extensions. Through the integration, we provide a new field that you simply add to your forms.

At the bottom of this page you will find step-by-step instructions for installation with WordPress and JavaScript as well as for token verification with PHP or via the Verifiy interface. You can use these directly or adapt them to your needs.

When you purchase a license, you automatically get a customer account on our website. If you want to configure POWER CAPTCHA (Professional and Enterprise versions), you can make the desired settings in your account settings. Alternatively, you can start with our default settings. You can find some configuration examples on the Functions page.

System description

Want to know how exactly your website communicates with our server? Learn more in our free whitepaper!

POWER CAPTCHA WORDPRESS PLUGIN INSTALLATION

How to install the WordPress plugin

To install the WordPress plugin, first download the plugin as a ZIP file in our customer area. Then go to the administration area / dashboard of WordPress and click on the menu item Plugins > Install. Click on the button “Upload Plugin” and select the ZIP archive you have downloaded from our website. Then click on “Install now”. After the upload and installation, a page will open where you can activate our POWER CAPTCHA plugin.

Plugin configuration

After you have activated the plugin, you can configure it. To do this, go to Settings > POWER CAPTCHA in the administration area of WordPress and enter your API and Secret key in the corresponding fields under “General settings”. You can get both keys in the customer area of our website. Under “Integration settings” you can select for which plugin or page area you want to activate POWER CAPTCHA.

The item “Enterprise settings” is only relevant if you use an Enterprise license and operate a local POWER CAPTCHA instance (instead of using the application as a cloud solution (standard)). In this case you have the option to enter the URLs to your locally hosted instance and to your local JavaScript. Then all requests will go to your own instance instead of our server. If you don’t run your own instance, all fields under “Enterpise settings” need to remain empty. When all settings are edited, click on “Save changes”. POWER CAPTCHA now protects the plugins / areas you have selected.

You can already protect these WordPress plugins with POWER CAPTCHA:
  • WPForms (plugin)
  • WordPress: WordPress registration, login
  • Plugins: WooCommerce, Elementor Pro Forms
We are currently working on supporting the following plugins / areas:
  • WordPress: Comments
  • Plugins: Contact Form 7, Ninja Forms, CoBlocks Form, Formidable Forms, Ultimate Member, Fluent Forms

Status: June 2024, subject to change.

POWER CAPTCHA INTEGRATION WITH HTML AND PHP

POWER CAPTCHA frontend integration with HTML

To integrate POWER CAPTCHA in the frontend with HTML, first include our JavaScript in the <head> element:

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

Add a div element to the form you want to protect; the widget is displayed within this element. The div element must contain at least the attributes data-pc-sitekey=”yourSiteKey” and data-pc-client-uid=”uniqueClientId”. The unique client ID can be based on the client’s IP address, for example. It is important that the client can be uniquely identified via the ID and that the same client ID is passed for token verification. Example:

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

				
			

If you have an Enterprise license, you can add the data-pc-user attribute to the input field with the user name / email address for additional protection. Example:

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

A login form protected with POWER CAPTCHA might look like this:

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

After the security check by the POWER CAPTCHA API, a field with a token is added to the form. Afterwards, check this token in the backend (see “Token verification”).

Configure the check mode / hidden widget

By default, the POWER CAPTCHA widget is always displayed and the security check starts automatically as soon as the form is filled out (focus event). If you add the attribute data-pc-user to a field, the check only starts after the field has been filled in.

However, you can configure the display and check behaviour individually. You can choose between three check modes, e.g. to switch off the automatic security check or only display the widget when it is necessary. You can configure the check mode using the data-pc-check-mode attribute. You can choose between the values ‘auto’, ‘hidden’ or ‘manu’. Each value stands for a specific check mode:

Check mode Description
auto
The widget is displayed by default. The security check starts as soon as the form is filled in or after the field (e.g. user name or e-mail address) has been filled in. A manual click on the widget is only necessary if a captcha also needs to be solved.
hidden
The widget is not initially displayed. The security check starts as soon as the form is filled in or after the field (e.g. user name or e-mail address) has been filled in. If the check returns that a captcha must be solved, the widget is displayed.
manu
The widget is always displayed. POWER CAPTCHA only starts the security check after a manual click on the widget.

Here is an example of showing how to hide the widget (check mode hidden):

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

TOKEN VERIFICATION (PHP)

How to verify the POWER CAPTCHA token on your server

Before you evaluate or save the content of your form in the backend, you should verify the POWER CAPTCHA token.

To do this, the token from the form ($_POST[“pc-token”]) and your secret key must be passed to our interface https://api.power-captcha.com/pcu/v1/verify as JSON, and in the header your sitekey must be present in the X-API-Key field.

The interface will return a JSON and the “success” field will say if the token was successfully verified. Afterwards you can evaluate your form as usual.

Here is a sample code how you can verify a token with PHP:

Here is a sample code how you can verify a token with PHP:

				
					<?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.";
}
?>
				
			

API DOCUMENTATION (BACKEND)

API interface for token verification

After you submit your form, the token needs to be verified in your backend. To do this, you pass the token and some additional parameters via JSON to our Verifiy interface so that we can check if the captcha was solved correctly or if the alternative email authentication had a positive result. The Verifiy interface is called via the following URL: https://api.power-captcha.com/pcu/v1/verifiy.

In the header, the X-API-Key value must be set with your API key when called, and in the request body, the token and additional parameters must be POSTed to our interface as JSON.

Example JSON for the request:
				
					{
    "secret": "{secret-key}",
    "token": "{token}",
    "clientUid": "{client-uid}",
    "name": "{username}"
}
				
			

Add your secret key in the parameter “secret”. You can find your secret key in your account. The parameter “token” contains the token which was generated by our JavaScript. The token can be found in the POST/GET field “pc-token”. The “clientUid” parameter must contain the same unique client ID that has been assigned in the form. It is used to check whether the token was originally created for this client ID. If you have marked a field with “data-pc-user” in the frontend, you have to pass the value of this field in the parameter “name” to our verifiy interface to protect a username / email address.

Example return value:
				
					{
     "success": true,
     "errors": []
}
				
			

If the “success” field is set to “true”, then the verification was successful (token is valid) and you can continue with the evaluation of your form. If the “success” field is set to “false”, then the token is either invalid or the request is structured incorrectly. In this case the evaluation of the form should be stopped immediately, because the token could not be verified by POWER CAPTCHA. If the request is structured incorrectly, a list with the following error codes appears in the “errors” field:

Error Code Description
missing_token
No token or an empty token was provided with the request.
missing_secret
No secret key was supplied with the request.
invalid_secret
The secret key is invalid or does not match the API key.
invalid_token
The token is invalid.
Test our POWER CAPTCHA demo

POWER CAPTCHA DEMO

Test now!

Test our POWER CAPTCHA demo

You would like to test POWER CAPTCHA? Try out our demo and simulate the application on your website / app with fictitious data.

START NOW

Get started with POWER CAPTCHA

Starte jetzt mit POWER CAPTCHA - einfach zu installieren und DSGVO-konform.

You want to use POWER CAPTCHA on your website? Then get your license here and follow our step-by-step instructions.

WordPress Cookie Notice by Real Cookie Banner