Delen via


Een aangepaste captcha-service integreren met Customer Insights - Journeys-formulieren

Met Customer Insights - Journeys-formulieren kunt u aangepaste captchabot-bescherming gebruiken om formulierinzendingen te valideren. Dit artikel geeft een voorbeeld van de integratie Google reCAPTCHA. De stroom is vergelijkbaar voor andere captchaservices. De stappen in dit artikel zijn van toepassing op marketing- en evenementregistratieformulieren.

Notitie

In de huidige versie van de app kan er slechts één captcha-implementatie actief zijn. Als u uw eigen captcha-provider gebruikt (zoals beschreven in de volgende paragrafen), werken bestaande formulieren die de kant-en-klare captcha gebruiken niet meer. Voor een aangepaste captcha-implementatie is minimaal basiskennis van het schrijven en debuggen van Dataverse-invoegtoepassingen vereist.

Het proces bestaat uit deze stappen:

  1. reCAPTCHA toevoegen aan het formulier.
  2. Voeg de captcha-tekstwaarde toe aan de formulierinzending zodra het formulier is ingezonden.
  3. Activeer de reCAPTCHA-plug-in en bewaar de persoonlijke sleutel veilig.

Stapsgewijs voorbeeld: Google reCAPTCHA integreren

1. Voeg reCAPTCHA toe aan het formulier

  1. Maak een formulier in de formuliereneditor van Customer Insights - Journeys.

  2. Voeg een data-validate-submission="true" kenmerk toe aan het <form> element, waardoor aangepaste validatie mogelijk wordt gemaakt bij inzending van het formulier: Kenmerk toevoegen aan het formulierelement.

  3. Voeg een <div id="g-recaptcha"> toe aan het formulier als plaatsaanduiding voor reCAPTCHA. Deze div-id wordt later als referentie gebruikt. Plaats de tijdelijke aanduiding tussen het laatste veld en de knop Verzenden. Voeg een plaatsaanduiding voor reCAPTCHA toe.

  4. Publiceer het formulier en sluit het formulier in op uw website.

  5. Bewerk de pagina waarop het formulier is ingesloten. Voeg het script van Google toe aan de paginakop. Dit script laadt de reCAPTCHA met de onLoad callback-parameter. Deze callback wordt aangeroepen zodra de captcha is geladen.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
    
  6. Voeg de functie onLoadCallback toe:

    function onloadCallback() {
        grecaptcha.render('g-recaptcha',
        { 
          sitekey: '{sitekey}',
        });
    }
    

    Vervang de {sitekey}-plaatsaanduiding door die van Google. Deze callback-functie geeft de reCAPTCHA weer in de plaatsaanduiding <div id="g-recaptcha"> die u eerder hebt gemaakt.

  7. Registreer de onloadCallback-functie die moet worden aangeroepen door de formulierlader:

document.addEventListener("d365mkt-afterformload", onloadCallback);

2. Voeg de captcha-tekstwaarde toe aan de formulierinzending

Zodra het formulier is ingezonden, wordt de g-recaptcha-response parameter automatisch toegevoegd aan de formulierinzending. In de volgende stappen bouwt u een invoegtoepassing die deze waarde verbergt, aangezien deze wordt toegevoegd aan de lijst ValidationOnlyFields in het responsobject dat wordt geretourneerd door de code van de invoegtoepassing.

G-recaptcha-responsparameter is toegevoegd.

3. Activeer de reCAPTCHA-plug-in

  1. Ga naar instellingen>Formulierinstellingen>reCAPTCHA.
  2. Voer de persoonlijke sleutel in. Uw persoonlijke sleutel wordt op een veilige locatie opgeslagen.
  3. Activeer de invoegtoepassing door de schakelaar Status om te zetten.

Voer de sleutel voor reCAPTCHA in.