Benutzerdefinierten Captcha-Dienst in Customer Insights - Journeys-Formulare integrieren

Artikel
01/30/2024

Customer Insights - Journeys-Formulare ermöglichen es Ihnen, benutzerdefinierten Captcha-Bot-Schutz zu verwenden, um Formularübermittlungen zu validieren. Dieser Artikel enthält ein Beispiel für die Integration von Google reCAPTCHA. Der Flow ist für andere Captcha-Dienste ähnlich.

Anmerkung

In der aktuellen App-Version kann nur eine Captcha-Implementierung aktiv sein. Wenn Sie Ihren eigenen Captcha-Anbieter (wie unten beschrieben) verwenden, funktionieren vorhandene Formulare, die das sofort einsatzbereite Captcha verwenden, nicht mehr. Eine benutzerdefinierte Captcha-Implementierung erfordert mindestens Grundkenntnisse im Schreiben und Debuggen von Dataverse-Plugins.

Der Prozess besteht aus diesen Schritten:

Fügen Sie reCAPTCHA zum Formular hinzu.
Fügen Sie den Captcha-Textwert zur Formularübermittlung hinzu, sobald das Formular übermittelt wurde.
Erstellen Sie ein Plug-In im CRM, das das Captcha validiert.

Schritt-für-Schritt-Beispiel: Google reCAPTCHA integrieren

1. Fügen Sie reCAPTCHA zum Formular hinzu

Erstellen Sie ein Formular im Customer Insights - Journeys-Formular-Editor.
Fügen Sie ein data-validate-submission="true"-Attribut dem <form>-Element hinzu, wodurch eine benutzerdefinierte Prüfung bei der Formularübermittlung ermöglicht wird:
Fügen Sie ein <div id="g-recaptcha"> im Formular als Platzhalter für reCAPTCHA hinzu. Diese div-ID wird später als Referenz verwendet. Es wird empfohlen, den Platzhalter zwischen dem letzten Feld und der Senden-Schaltfläche zu platzieren.
Veröffentlichen Sie das Formular und betten Sie es in Ihre Website ein.
Bearbeiten Sie die Seite, auf der das Formular eingebettet wurde. Fügen Sie das von Google bereitgestellte Skript in den Seitenkopf ein. Dieses Skript lädt das reCAPTCHA mit dem onLoad-Rückrufparameter. Dieser Rückruf wird aufgerufen, sobald das Captcha geladen ist.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Fügen Sie die onLoadCallback-Funktion hinzu:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Ersetzen Sie den {sitekey}-Platzhalter durch den von Google bereitgestellten Platzhalter. Diese Rückruf-Funktion rendert das reCAPTCHA innerhalb des Platzhalters <div id="g-recaptcha">, den Sie zuvor erstellt haben.
Registrieren Sie die onloadCallback-Funktion, die vom Formularladeprogramm aufgerufen werden soll:

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

2. Fügen Sie den Captcha-Textwert zur Formularübermittlung hinzu

Nach dem Absenden des Formulars wird der g-recaptcha-response-Parameter automatisch zur Formularübermittlung hinzugefügt. In den nächsten Schritten erstellen Sie ein Plug-In, das diesen Wert verbirgt, sobald er der ValidationOnlyFields-Liste im vom Plug-In-Code zurückgegebenen Antwortobjekt hinzugefügt wird.

Der Antwortparameter G-recaptcha wird hinzugefügt.

3. Erstellen Sie ein Plug-In

3.1 Erstellen Sie ein Visual Studio-Projekt für das Plug-In

Öffnen Sie Visual Studio und erstellen Sie ein neues Klassenbibliotheksprojekt mithilfe von .NET Framework 4.6.2.
Wählen Sie im Lösungsexplorer NuGet-Pakete verwalten aus und installieren Sie Microsoft.CrmSdk.CoreAssemblies.

3.2 Erstellen Sie die Plug-In-Klasse

Benennen Sie Class1.cs in CustomValidationPlugin.cs um.
Lassen Sie die CustomValidationPlugin-Klasse von der IPlugin-Schnittstelle erben und fügen Sie die Methode zum Ausführen hinzu.
```
public class CustomValidationPlugin : IPlugin
{
   public void Execute(IServiceProvider serviceProvider)
   {

   }
}
```

Fügen Sie der Methode zum Ausführen den folgenden Code hinzu, um den Kontext und den Ablaufverfolgungsdienst abzurufen.

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));
}

Fügen Sie diesen Code hinzu, um die Parameterzeichenfolge für die Formularübermittlung abzurufen. Es ist eine JSON-codierte Zeichenfolge, die die Felder darstellt, die der Benutzer im Formular übermittelt hat. Bei diesem Prozess wird diese Zeichenfolge abgerufen und sie wird mithilfe einer Deserialisierungs-Hilfsmethode und einer FormSubmissionRequest-Klasse deserialisiert, die später definiert werden. Dadurch wird überprüft, ob das Felder-Array einen Schlüssel für die g-recaptcha-Antwort enthält. Wenn der reCAPTCHA-Schlüssel nicht gefunden wird, wird die Prüfung übersprungen, da das verarbeitete Formular kein Google-recaptcha-Element enthielt.
```
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;
}
```

Fügen Sie den folgenden Code hinzu, der zurückgegeben werden soll, wenn der g-recaptcha-token-Wert null oder leer ist.

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

Fügen Sie den folgenden Code hinzu, um das Google-Captcha-Token anhand von Google-APIs zu prüfen.
```
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}");
    }
}
```
Zuerst wird die URL definiert, dann wird eine Instanz von HttpClient erstellt. Ein FormUrlEncodedContent-Objekt wird erstellt, das den recaptchaToken, der in vorherigen Schritten abgerufen wurde, und den geheimen Schlüssel enthält, der von Google bereitgestellt wird. Dann wird eine POST-Anforderung gesendet und der Statuscode wird überprüft. Ist dies nicht erfolgreich, wird sie zurückgegeben. Bei erfolgreicher Prüfung wird die Antwort mit der Deserialisierungs-Hilfsmethode und der später definierten GRecaptchaResponse deserialisiert. Anschließend wird ein neues ValidateFormSubmissionResponse-Objekt erstellt, serialisiert und es wird als Wert des Ausgabeparameters msdynmkt_validationresponse festgelegt. Dabei handelt es sich um den einzigen Microsoft-Dienst, den es verwendet, um die Übermittlung anzunehmen oder abzulehnen. Durch Hinzufügen der g-recaptcha-response-Zeichenfolge zur ValidationOnlyFields-Liste wird dieses Feld bei der Formularübermittlung in der Benutzeroberfläche ausgeblendet.

Fügen Sie den folgenden Code hinzu, um die Serialisierungs- und Deserialisierungs-Hilfsmethoden zu definieren.

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;
}

Fügen Sie den folgenden Code hinzu, um die Klassen zu definieren, die zum Serialisieren/Deserialisieren von JSON-Zeichenfolgenobjekten erforderlich sind.

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 Signieren Sie das Plug-In und erstellen Sie es

Klicken Sie mit der rechten Maustaste auf das Projekt und wählen Sie Eigenschaften im Lösungs-Explorer aus.
Wählen Sie die Registerkarte Signieren aus und aktivieren Sie dann das Kontrollkästchen Assembly signieren.
Wählen Sie <New...> aus.
Geben Sie einen Schlüsseldateinamen ein und heben Sie die Auswahl für Meine Schlüsseldatei mit einem Kennwort schützen auf.
Erstellen Sie das Projekt.
Sie finden die Plug-In-Assembly CustomValidationPlugin.dll in \bin\Debug.

3.4 Registrieren Sie das Plug-In

Öffnen Sie PluginRegistration.exe.
Wählen Sie Neue Verbindung erstellen aus.
Wählen Sie Office 365 aus.
Wählen Sie Anmeldung aus.
Wählen Sie Registrieren und dann Neue Assembly registrieren aus.
Wählen Sie in Schritt 1 die Schaltfläche (...) und dann die in den vorherigen Schritten erstellte DLL aus.
Wählen Sie Ausgewähltes Plug-In registrieren aus.

3.4 Registrieren Sie den Schritt

Wählen Sie CustomValidationPlugin aus der Liste der registrierten Assemblys aus.
Wählen Sie Neuen Schritt registrieren aus.
Geben Sie msdynmkt_validateformsubmission in das Nachrichtentextfeld ein.
Stellen Sie sicher, dass Ausführungsmodus auf Synchron eingestellt ist.
Stellen Sie sicher, dass die Ausführungsreihenfolge auf 10 eingestellt ist.
Stellen Sie sicher, dass Ereignis-Pipeline-Phase der Ausführung auf Nach Vorgang eingestellt ist.
Wählen Sie Neuen Schritt registrieren aus.

Schlussfolgerung

Wenn ein Formular mit dem Attribut data-validate-submission übermittelt wird, wird Ihr benutzerdefiniertes Plug-In ausgeführt und die reCAPTCHA-Antwort wird mit Google-Diensten überprüft. Das benutzerdefinierte Plug-In wird nach dem Standardprüfungs-Plug-In von Microsoft ausgeführt. Wenn das Formular keine Microsoft-Captcha-Felder enthält, legt das Microsoft-Plug-In IsValid:false fest und die Übermittlung schlägt fehl, es sei denn, Sie überschreiben es mit IsValid:true.

Prüfungs-Flow.

Freigeben über