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

Artikel
01/31/2024

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.

Notitie

In de huidige versie van de app kan er slechts één captcha-implementatie actief zijn. Als u uw eigen captcha-provider gebruikt (zoals hieronder beschreven), werken bestaande formulieren die gebruikmaken van de kant-en-klare captcha 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:

reCAPTCHA toevoegen aan het formulier.
Voeg de captcha-tekstwaarde toe aan de formulierinzending zodra het formulier is ingezonden.
Maak een invoegtoepassing in de CRM die de captcha valideert.

Stapsgewijs voorbeeld: Google reCAPTCHA integreren

1. Voeg reCAPTCHA toe aan het formulier

Maak een formulier in de formuliereneditor van Customer Insights - Journeys.
Voeg een data-validate-submission="true" kenmerk toe aan het <form> element, waardoor aangepaste validatie mogelijk wordt gemaakt bij inzending van het formulier:
Voeg een <div id="g-recaptcha"> toe aan het formulier als plaatsaanduiding voor reCAPTCHA. Deze div-id wordt later als referentie gebruikt. Het wordt aanbevolen om de plaatsaanduiding tussen het laatste veld en de verzendknop te plaatsen.
Publiceer het formulier en sluit het formulier in op uw website.
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>
```
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.
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. Maak een invoegtoepassing

3.1 Maak een Visual Studio-project voor de invoegtoepassing

Open Visual Studio en maak een nieuw klassebibliotheekproject met .NET Framework 4.6.2.
Selecteer in Solution Explorer Beheren NuGet Pakketten en installeer Microsoft.CrmSdk.CoreAssemblies.

3.2 Maak de klasse voor de invoegtoepassing

Wijzig de naam van Class1.cs in CustomValidationPlugin.cs.

Laat de klasse CustomValidationPlugin overnemen van de IPlugin-interface en voeg de Execute-methode toe.

public class CustomValidationPlugin : IPlugin
{
   public void Execute(IServiceProvider serviceProvider)
   {

   }
}

Voeg de volgende code toe aan de uitvoermethode om context en traceringsservice op te halen.

public void Execute(IServiceProvider serviceProvider)
{
   // get tracing service
   ITracingService tracingService =
   (ITracingService)serviceProvider.GetService(typeof(ITracingService));

   // get plugin execution context
   IPluginExecutionContext context = (IPluginExecutionContext)
   serviceProvider.GetService(typeof(IPluginExecutionContext));
}

Voeg deze code toe om de parametertekenreeks voor inzending van formulieren op te halen. Het is een JSON-gecodeerde tekenreeks die de velden vertegenwoordigt die de gebruiker in het formulier heeft ingediend. Dit proces haalt deze tekenreeks op en deserialiseert deze met een hulpmethode voor deserialiseren en een FormSubmissionRequest-klasse die later wordt gedefinieerd. Hiermee wordt gecontroleerd of de matrix Velden een sleutel bevat voor g-recaptcha-respons. Als de reCAPTCHA-sleutel niet wordt gevonden, wordt validatie overgeslagen geretourneerd omdat het formulier dat wordt verwerkt geen Google recaptcha-element bevat.
```
var requestString = (string)context.InputParameters["msdynmkt_formsubmissionrequest"];
var requestObject = Deserialize<FormSubmissionRequest>(requestString);
if (!requestObject.Fields.TryGetValue("g-recaptcha-response", out string recaptchaToken))
{
   tracingService.Trace("g-recaptcha-response was not present in form submission");
   return;
}
```

Voeg de volgende code toe om te retourneren als g-recaptcha-token-waarde null of leeg is.

if (String.IsNullOrEmpty(recaptchaToken))
{
   tracingService.Trace($"g-recaptcha-response value not found");
   return;
}

Voeg de volgende code toe om het Google captcha-token te valideren met de Google API's.
```
string url = "https://www.google.com/recaptcha/api/siteverify";
using (HttpClient client = new HttpClient())
{
   var content = new FormUrlEncodedContent(new Dictionary<string, string>
   {
      {"secret", "your_secret_key"},
      {"response", recaptchaToken}
   });

   try
   {
      var response = client.PostAsync(url, content).Result;
      if (!response.IsSuccessStatusCode)
      {
         tracingService.Trace($"Request Failed: ({response.StatusCode}){response.Content}");
         return;
      }

      var responseString = response.Content.ReadAsStringAsync().Result;

      gRecaptchaResponse = Deserialize<GRecaptchaResponse>(responseString);

      var resp = new ValidateFormSubmissionResponse()
      {
         IsValid = isValid,
         ValidationOnlyFields = new List<string>() { "g-recaptcha-response" }
      };
      context.OutputParameters["msdynmkt_validationresponse"] = Serialize(resp);
    }
    catch (Exception e)
    {
       tracingService.Trace($"{e.Message}");
    }
}
```
Eerst wordt de URL gedefinieerd, vervolgens wordt een exemplaar van HttpClient gemaakt. Een FormUrlEncodedContent-object wordt gemaakt met daarin de recaptchaToken die in eerdere stappen is opgehaald en de geheime sleutel die door Google wordt verstrekt. Vervolgens wordt er een POST-aanvraag verzonden en wordt de statuscode gecontroleerd. Als deze niet succesvol is, wordt deze geretourneerd. Als dit is gelukt, deserialiseert dit het antwoord met behulp van de hulpmethode Deserialiseren en GRecaptchaResponse wat later wordt gedefinieerd. Vervolgens maakt dit een nieuw ValidateFormSubmissionResponse -object aan, serialiseert dit en stelt het in als de waarde van de uitvoerparameter msdynmkt_validationresponse, de enige Microsoft-service die wordt gebruikt om de inzending te accepteren of af te wijzen. Het toevoegen van de g-recaptcha-response-tekenreeks aan de lijst ValidationOnlyFields verbergt dit veld voor formulierinzending in de gebruikersinterface.

Voeg de volgende code toe om de hulpmethoden Serialiseren en Deserialiseren te definiëren.

private T Deserialize<T>(string jsonString)
{
   serializer = new DataContractJsonSerializer(typeof(T));
   T result;
   using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)))
   {
      result = (T)serializer.ReadObject(stream);
   }
   return result;
}

private string Serialize<T>(T obj)
{
    string result;
    serializer = new DataContractJsonSerializer(typeof(T));
    using (MemoryStream memoryStream = new MemoryStream())
    {
       serializer.WriteObject(memoryStream, obj);
       result = Encoding.Default.GetString(memoryStream.ToArray());
    }
    return result;
}

Voeg de volgende code toe om de klassen te definiëren die nodig zijn om JSON-tekenreeksobjecten te serialiseren/deserialiseren.

public class FormSubmissionRequest
 {
     public Dictionary<string, string> Fields { get; set; }
 }

 public class GRecaptchaResponse
 {
     public bool success { get; set; }
 }

 public class ValidateFormSubmissionResponse
 {
     public bool IsValid { get; set; }
     public List<string> ValidationOnlyFields { get; set; }
 }

3.3 Onderteken en bouw de invoegtoepassing

Klik met de rechtermuisknop op het project en selecteer Eigenschappen in de Solution Explorer.
Selecteer het tabblad Ondertekenen en vink het selectievakje voor De assembly ondertekenen aan.
Selecteer <New...>.
Voer een sleutelbestandsnaam in en deselecteer Mijn sleutelbestand met een wachtwoord beschermen.
Bouw het project.
U kunt de invoegtoepassingsassembly CustomValidationPlugin.dll vinden in \bin\Debug.

3.4 Registreer de invoegtoepassing

PluginRegistration.exe openen.
Selecteer Nieuwe verbinding maken.
Kies Office 365.
Selecteer Aanmelden.
Selecteer Registreren en vervolgens Nieuwe assembly registreren.
Selecteer de knop (...) in stap 1 en selecteer de dll die in de vorige stappen is gebouwd.
Selecteer Geselecteerde invoegtoepassing registreren.

3.4 Registreer stap

Selecteer CustomValidationPlugin in de lijst met de geregistreerde assembly′s.
Selecteer Nieuwe stap registreren.
Voer msdynmkt_validateformsubmission in het tekstveld Bericht in.
Zorg ervoor dat Uitvoermodus is ingesteld op Synchroon.
Zorg dat Uitvoeringsvolgorde is ingesteld op 10.
Zorg ervoor dat Fase van uitvoering gebeurtenis-pipeline is ingesteld op Nabewerking.
Selecteer Nieuwe stap registreren.

Conclusie

Wanneer een formulier met het kenmerk data-validate-submission wordt ingezonden, wordt uw aangepaste invoegtoepassing uitgevoerd en wordt de reCAPTCHA-respons met Google-services gevalideerd. De aangepaste invoegtoepassing wordt uitgevoerd na de standaard invoegtoepassing voor validatie van Microsoft. Als er geen Microsoft captcha-velden in het formulier zijn, wordt de Microsoft-invoegtoepassing IsValid:false ingesteld en mislukt de indiening tenzij u deze overschrijft met IsValid:true.

Validatiestroom.

Delen via