Clientseitiges Rendering

Zuerst müssen Sie die Procaptcha JavaScript-Ressource irgendwo in Ihrer HTML-Seite einbinden. Das <script> muss über HTTPS geladen werden und kann überall auf der Seite platziert werden. Innerhalb des <head>-Tags oder unmittelbar nach dem .procaptcha-Container sind beide in Ordnung.

<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
<script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>

Nun können Sie das Procaptcha Widget entweder implizit oder explizit rendern.

Implizites Rendering

Fügen Sie einen leeren DOM-Container hinzu, in den das Procaptcha Widget automatisch eingefügt wird. Der Container ist typischerweise ein <div> (kann aber jedes Element sein) und muss die Klasse procaptcha und ein data-sitekey-Attribut haben, das auf Ihren öffentlichen sitekey gesetzt ist.

<body>
    <div class="procaptcha" data-sitekey="your_site_key"></div>
</body>

Normalerweise möchten Sie den leeren .procaptcha-Container in ein HTML-Formular einfügen. Wenn ein CAPTCHA erfolgreich gelöst wird, wird automatisch eine versteckte JSON-Payload zu Ihrem Formular hinzugefügt, die Sie dann per POST an Ihren Server zur Verifizierung senden können. Sie können sie serverseitig mit dem POST-Parameter procaptcha-response abrufen.

Hier ist ein vollständiges Beispiel, bei dem Procaptcha verwendet wird, um ein Anmeldeformular vor automatisiertem Missbrauch zu schützen. Wenn das Formular übermittelt wird, wird das procaptcha-response-Token zusammen mit den E-Mail- und Passwort-POST-Daten eingefügt, nachdem das CAPTCHA gelöst wurde.

Beispiel für implizites Rendering

<html>
    <head>
        <title>Procaptcha Demo</title>
        <script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
        <script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
    </head>
    <body>
        <form action="" method="POST">
            <input type="text" name="email" placeholder="Email" />
            <input type="password" name="password" placeholder="Password" />
            <div class="procaptcha" data-sitekey="your_site_key"></div>
            <br />
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

Explizites Rendering

Wenn Sie das Widget lieber selbst rendern möchten, können Sie die Procaptcha.render()-Methode verwenden. Die Procaptcha.render()-Methode muss aufgerufen werden, nachdem das procaptcha.bundle.js-Skript geladen wurde.

Beispiel für explizites Rendering

Das Skript wird im Head des Dokuments geladen und erhält die ID procaptcha-script. Ein Container wird mit der ID procaptcha-container erstellt, in dem das Widget gerendert wird.

<html>
    <head>
        <script
            type="module"
            id="procaptcha-script"
            src="https://js.prosopo.io/js/procaptcha.bundle.js"
            async
            defer
        ></script>
        <script nomodule src="https://js.prosopo.io/js/procaptcha.bundle.iife.js" async defer></script>
    </head>
    <body>
        <div id="procaptcha-container"></div>
    </body>
</html>

Ein onload-Event wird dem Script-Tag hinzugefügt, um die Render-Funktion aufzurufen, wenn das Skript geladen wurde.

// A function that will call the render Procaptcha function when the procaptcha script has loaded
document.getElementById('procaptcha-script').addEventListener('load', function () {
    // Define a callback function to be called when the CAPTCHA is verified
    function onCaptchaVerified(output) {
        console.log('Captcha verified, output: ' + JSON.stringify(output))
    }

    // Get the Element using elementId
    const captchaContainer = document.getElementById('procaptcha-container')
    // Render the CAPTCHA explicitly on a container with id "procaptcha-container"
    window.procaptcha.render(captchaContainer, {
        siteKey: 'YOUR_SITE_KEY',
        theme: 'dark',
        callback: onCaptchaVerified,
    })
})

Procaptcha-Optionen

Die Procaptcha.render()-Funktion nimmt ein Optionsobjekt als zweites Argument. Das Optionsobjekt kann die folgenden Felder enthalten:

Key	Type	Beschreibung	Erforderlich
siteKey	string	Der sitekey Ihrer Anwendung / Website. Dies ist erforderlich.	✓
callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA verifiziert wurde.	✗
theme	string	Das Theme des CAPTCHA-Widgets. Der Standard ist `light`. Die andere Option ist `dark`.	✗
chalexpired-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Herausforderung abläuft.	✗
error-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn ein Fehler auftritt.	✗
close-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA geschlossen wird.	✗
open-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA geöffnet wird.	✗
expired-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Lösung abläuft.	✗
failed-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn die CAPTCHA-Herausforderung fehlschlägt.	✗
reset-callback	string or function	Der Name der Window-Funktion oder eine Funktion, die aufgerufen wird, wenn das CAPTCHA zurückgesetzt wird.	✗
language	string	Die Sprache des CAPTCHA-Widgets. Der Standard ist `en`. Alle Sprachen finden Sie hier.	✗

Datenattribute

Die gleichen Optionen können der impliziten Rendering-Methode übergeben werden, indem sie als Datenattribute zum .procaptcha-Container hinzugefügt werden. Um beispielsweise das Theme auf dark zu setzen, würden Sie data-theme="dark" zum .procaptcha-Container hinzufügen.

<div class="procaptcha" data-sitekey="your_site_key" data-theme="dark"></div>

Um einen Callback mit einem Daten-Tag zu setzen, würden Sie data-callback="yourCallbackFunction" zum .procaptcha-Container hinzufügen und die Callback-Funktion am Window-Objekt definieren.

<div class="procaptcha" data-sitekey="your_site_key" data-callback="yourCallbackFunction"></div>

CAPTCHA-Typ

Hier gibt es keinen CAPTCHA-Typ zu setzen. Welche Herausforderung ein Besucher erhält, ist eine Eigenschaft des Site Keys und wird im Prosopo Portal festgelegt; dem Widget wird beim Sitzungsstart mitgeteilt, welche es ausführen soll. Siehe CAPTCHA-Typen.

Framework-Integrationen

Verschiedene Frameworks wurden mit Procaptcha integriert. Die Dokumentation für jedes Framework finden Sie unten:

GitHub-Issue erstellen

Senden Sie uns Feedback