Beispiel: Verwendung von reCAPTCHA

In diesem Beispiel wird ein Anwendungsfall erklärt, wie man ein Google reCAPTCHA in einem Formular einrichtet und es in einer Benutzerdefinierte Journey verwendet.

Hinweis: reCAPTCHA ist ein CAPTCHA-System, das Google gehört. Sie ermöglicht es Webhostern, zwischen menschlichem und automatischem Zugriff auf Websites zu unterscheiden.
Herkömmliche CAPTCHAs verwenden hauptsächlich textbasierte Aufgaben (Challenges), bei denen die Benutzer verzerrte oder verschlüsselte Zeichen entziffern müssen.
reCAPTCHA bietet einen fortschrittlicheren Ansatz mit bildbasierten Captchas, die Bilder aus der realen Welt verwenden und das Benutzerverhalten analysieren, um zwischen menschlichen Benutzern und Bots zu unterscheiden.

Setup

Für Integration eines Google reCAPTCHA in Selligent benötigen Sie ein Konto für den Zugriff auf die Google reCAPTCHA Admin-Konsole, um die API-Schlüssel zu generieren und abzurufen.

Generierung der Schlüssel

  1. Gehen Sie zu https://www.google.com/recaptcha/intro/v3.html

  2. Klicken Sie auf Admin-Konsole.

  3. Füllen Sie das Formular aus:

    • Fügen Sie eine Bezeichnung hinzu (z. B. Kundenname oder Projektname)
    • Wählen Sie den gewünschten reCAPTCHA-Typ:
      • reCAPTCHA v2: erfordert immer Benutzerinteraktion
      • reCAPTCHA v3: kann die Überprüfung ohne Benutzerinteraktion durchführen
    • Fügen Sie alle Domainnamen hinzu, unter denen das reCAPTCHA zu erreichen ist (paranadigital.selligent.com, paranasolution.selligent.com, ...)

  4. Nach dem Absenden des Formulars speichern Sie den gewählten reCAPTCHA-Typ, den Site-Schlüssel und den geheimen Schlüssel zur späteren Verwendung in Selligent.

Funktionsweise

Schritt 1: Hinzufügen einer reCAPTCHA-Anfrage zu einem Formular

Erstellen Sie eine Seite in Selligent, die ein Formular enthält.

  • Fügen Sie innerhalb des <form>-Tags dieses versteckte Feld hinzu:
Kopieren 
<!-- Recaptcha -->
                <input type="hidden" name="recaptchaResponse" id="recaptchaResponse">
            <!-- End Recaptcha -->
  • Fügen Sie dieses Skript am Anfang der HTML-Seite ein, um die API zu laden:
Kopieren 
<!-- Recaptcha -->
                <script src="https://www.google.com/recaptcha/api.js?render=[siteKey]"></script>
            <!-- Recaptcha -->

Fügen Sie dann eines der beiden folgenden Skripte hinzu, je nachdem, ob Sie reCAPTCHA v3 oder reCAPTCHA v2 verwenden:

  • Wenn Sie reCAPTCHA v3 verwenden, fügen Sie dieses Skript am Anfang der HTML-Seite ein (das API-Ladeskript sollte immer zuerst kommen):
Kopieren 
<!-- RecaptchaV3 – at the top of the page -->
                <script>
                grecaptcha.ready(function () {
                grecaptcha.execute('[siteKey]', { action: '[FormName]' }).then(function (token) {
                var recaptchaResponse = document.getElementById('recaptchaResponse');
                recaptchaResponse.value = token;
                });
                });
                </script>
            <!-- End RecaptchaV3 -->
  • Wenn Sie reCAPTCHA v2 verwenden, fügen Sie dieses Skript am Ende(*) der HTML-Seite ein (*wichtig für v2, damit die Seite geladen wird, bevor das Skript ausgeführt wird):
Kopieren 
<!-- RecaptchaV2 – at the bottom of the page -->
                <script>
                function updateResponse(){
                document.getElementById("recaptchaResponse").value =
                document.getElementById("g-recaptcha-response").value;
                }
                </script>
            <!-- End RecaptchaV2 -->

Hinweis: In den obigen Skripten:
- Ersetzen Sie den [siteKey] durch Ihren kopierten Site-Schlüssel von Google reCAPTCHA.
- Ersetzen Sie [Formname] durch den Namen Ihres Selligent Formulars.

Beispiel:

Speichern und veröffentlichen Sie Ihre Seite.

Schritt 2: Hinzufügen einer benutzerdefinierten Komponente zum Aufrufen der reCAPTCHA-API

Erstellen Sie im Kapitel Datenaustausch von Selligent eine benutzerdefinierte Komponente vom Typ Web.

Setup

Typ – Web

Eingabe

  • Anmeldung – keine
  • Passwort – keines
  • URL — https://www.google.com/recaptcha/api/siteverify
  • Methode – POST
  • Eingabeparameter:
    • Parameter 1: Name = Antwort, Typ = Text
    • Parameter 2: Name = geheimer Schlüssel, Typ = Text, Werte = Eingabe des Site-Schlüssels

Ausgabe

Name – Antwort

Speichern Sie Ihre benutzerdefinierte Komponentenkonfiguration.

Schritt 3: Eine reCAPTCHA-Journey erstellen

Erstellen Sie eine Benutzerdefinierte Journey.

Beginnen Sie mit einer Eingabekomponente.

Fügen Sie das in Schritt 1 erstellte Formular hinzu

Fügen Sie der Journey eine Seitenkomponente hinzu, verbinden Sie die Eingabekomponente mit der Seitenkomponente und verknüpfen Sie die Seitenkomponente mit der Seite, die Sie in Schritt 1 erstellt haben.

Fügen Sie die benutzerdefinierte Komponente hinzu, die Sie in Schritt 2 konfiguriert haben

Um die Antwort mit Google zu überprüfen, muss die in Schritt 2 erstellte benutzerdefinierte Komponente hinzugefügt werden.

Fügen Sie eine benutzerdefinierte Komponente in dem Bereich hinzu und wählen Sie in den Komponenteneigenschaften die Konfiguration der benutzerdefinierten Komponente aus Schritt 2.

Setzen Sie außerdem den Eingabeparameter Antwort auf die Antwort des Formulars: [% requestValue('recaptchaResponse') %]

Verbinden Sie die Seitenkomponente mit der benutzerdefinierten Komponente und verknüpfen Sie das „On Click Event“ mit der Aktionsschaltfläche Senden des Formulars.

Hinzufügen einer regelbasierten Split-Komponente (optional)

Wenn Sie verschiedene Aktionen auf der Grundlage der Google reCAPTCHA-Antwort benötigen, können Sie eine regelbasierte Split-Komponente hinzufügen.

  • Unterteilen basierend auf: Ausdruck
  • Ausdruck: [%jsonValue(componentValue('GOOGLERECAPTCHA.RESPONSE'),'success')%]
  • Wert: 1
  • Beschreibung: Erfolg

Mehr Aktionen ...

Je nach Erfolg oder Misserfolg können Sie Ihre Journey weiter ausbauen, indem Sie die Daten aus dem Formular speichern, eine Seite anzeigen lassen und so weiter.

Hinzufügen einer Antwortseite

Fügen Sie ganz am Ende der Journey eine Seitenkomponente hinzu und verknüpfen Sie diese mit einer Seite, auf der Sie dem Kontakt eine Nachricht anzeigen können.

Sie können abhängig von Erfolg oder kein Match mehrere Seiten verwenden.