Einbau-Beispiele - Doku

Alle Beispiele prüfen das versteckte Feld cdp-captcha-solution auf dem Server.
Ersetzen Sie YOUR_SITEKEY und halten Sie den API-Key aus Ihrem Quellcode heraus (Umgebungsvariable).

PHP

Der Client aus einer einzigen Datei liegt im Ordner connect/sdk von CDPCaptcha (connect/sdk/cdp-captcha-client.php).
Er arbeitet mit cURL oder allow_url_fopen und braucht sonst nichts.

PHP

<?php
require 'cdp-captcha-client.php'; // from the sdk folder of CDPCaptcha

cdp_captcha_configure([
    'endpoint' => 'https://cdpcaptcha.com/api/v1',
    'apikey'   => getenv('CDPCAPTCHA_APIKEY'),
    'sitekey'  => 'YOUR_SITEKEY',
]);

if (!cdp_captcha_verify($_POST['cdp-captcha-solution'] ?? '')) {
    http_response_code(400);
    exit('Robot check failed');
}
// genuine request: send the mail, save the record, …

Node.js

JavaScript

import fetch from 'node-fetch'; // Node 18+: global fetch works too

async function verifyCaptcha(response) {
  const r = await fetch('https://cdpcaptcha.com/api/v1/siteverify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', 'X-API-Key': process.env.CDPCAPTCHA_APIKEY },
    body: JSON.stringify({ response, sitekey: 'YOUR_SITEKEY' })
  });
  const json = await r.json();
  return json.success === true;
}

app.post('/contact', async (req, res) => {
  if (!(await verifyCaptcha(req.body['cdp-captcha-solution']))) {
    return res.status(400).send('Robot check failed');
  }
  // …
});

Python

import os, requests

def verify_captcha(response: str) -> bool:
    r = requests.post(
        'https://cdpcaptcha.com/api/v1/siteverify',
        json={'response': response, 'sitekey': 'YOUR_SITEKEY'},
        headers={'X-API-Key': os.environ['CDPCAPTCHA_APIKEY']},
        timeout=5,
    )
    return r.json().get('success') is True

# Flask
@app.post('/contact')
def contact():
    if not verify_captcha(request.form.get('cdp-captcha-solution', '')):
        abort(400)
    ...

cURL

Shell

curl -X POST 'https://cdpcaptcha.com/api/v1/siteverify' \
  -H 'X-API-Key: ck_YOUR_API_KEY' \
  -d 'response=VALUE_OF_cdp-captcha-solution' \
  -d 'sitekey=YOUR_SITEKEY'

Einfaches HTML-Formular (ohne Framework)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdpcaptcha.com/core/assets/css/cdp-captcha.css">
  <script src="https://cdpcaptcha.com/core/assets/js/cdp-captcha.js" defer></script>
</head>
<body>
  <form method="post" action="/contact">
    <label>E-mail <input name="email" type="email" required></label>
    <label>Message <textarea name="message" required></textarea></label>
    <div class="cdp-captcha" data-sitekey="YOUR_SITEKEY" data-start="focus"></div>
    <button type="submit">Send</button>
  </form>
</body>
</html>

React

JSX

import { useEffect, useRef } from 'react';

// Load https://cdpcaptcha.com/core/assets/js/cdp-captcha.js once in index.html (defer).
export function Captcha({ sitekey, onComplete }) {
  const ref = useRef(null);
  useEffect(() => {
    const widget = window.CDPCaptcha.createWidget({ element: ref.current, sitekey, startMode: 'focus' });
    widget.addEventListener('cdpcaptcha:widget.complete', (ev) => onComplete(ev.detail.response));
    return () => widget.destroy();
  }, [sitekey, onComplete]);
  return <div ref={ref} />;
}

Vue

<template>
  <div ref="mount"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
const props = defineProps({ sitekey: String });
const emit = defineEmits(['complete']);
const mount = ref(null);
let widget;
onMounted(() => {
  widget = window.CDPCaptcha.createWidget({ element: mount.value, sitekey: props.sitekey });
  widget.addEventListener('cdpcaptcha:widget.complete', (ev) => emit('complete', ev.detail.response));
});
onBeforeUnmount(() => widget && widget.destroy());
</script>