Intégrer un service de captcha personnalisé aux formulaires Customer Insights - Journeys

Article
01/31/2024

Les formulaires Customer Insights - Journeys vous permettent d’utiliser une protection bot captcha personnalisée pour valider les soumissions de formulaires. Cet article donne un exemple d’intégration de Google reCAPTCHA. Le flux est similaire pour les autres services captcha.

Note

Dans la version actuelle de l’application, une seule implémentation captcha peut être active. Si vous utilisez votre propre fournisseur de captcha (comme indiqué ci-dessous), les formulaires existants qui utilisent le captcha prêt à l’emploi cesseront de fonctionner. Une implémentation captcha personnalisée nécessite au moins des connaissances de base en écriture et en débogage de plug-ins Dataverse.

Le processus comprend les étapes suivantes :

Ajouter une colonne au formulaire.
Ajoutez la valeur de texte captcha à la soumission du formulaire une fois le formulaire soumis.
Créez un plug-in dans le CRM qui valide le captcha.

Exemple pas à pas : intégrer Google reCAPTCHA

1. Ajouter reCAPTCHA au formulaire

Créez un formulaire dans l’éditeur de formulaires Customer Insights - Journeys.
Ajoutez un attribut data-validate-submission="true" à l’élément <form> , qui permet une validation personnalisée lors de la soumission du formulaire :
Ajoutez un <div id="g-recaptcha"> dans le formulaire comme espace réservé pour reCAPTCHA. Cet ID div est utilisé comme référence ultérieurement. Il est recommandé de placer l’espace réservé entre le dernier champ et le bouton d’envoi.
Publiez le formulaire et intégrez-le à votre site web.
Modifiez la page où le formulaire a été intégré. Ajoutez le script fourni par Google dans l’en-tête de la page. Ce script charge le reCAPTCHA avec le paramètre de rappel onLoad. Ce rappel est appelé dès que le captcha est chargé.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Ajouter la fonction onLoadCallback :
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Remplacez l’espace réservé {sitekey} par celui fourni par Google. Cette fonction de rappel affiche le reCAPTCHA dans l’espace réservé <div id="g-recaptcha"> que vous avez créé précédemment.
Enregistrez la fonction onloadCallback qui sera appelée par le chargeur de formulaire :

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

2. Ajoutez la valeur de texte captcha à la soumission du formulaire

Une fois le formulaire soumis, le paramètre g-recaptcha-response est automatiquement ajouté à la soumission du formulaire. Dans les étapes suivantes, vous allez créer un plug-in qui masque cette valeur, car elle sera ajoutée à la liste ValidationOnlyFields dans l’objet de réponse renvoyé par le code du plug-in.

Le paramètre G-recaptcha-response est ajouté.

3. Créer un plug-in

3.1 Créer un projet Visual Studio pour le plug-in

Ouvrir Visual Studio et créer un projet de bibliothèque de classes (.NET Framework) à l’aide de .NET Framework 4.6.2.
Dans l’Explorateur de solutions, sélectionnez Gérer les packages NuGet et installez Microsoft.CrmSdk.CoreAssemblies.

3.2 Créer la classe du plug-in

Renommer Class1.cs en CustomValidationPlugin.cs.

Faites hériter la classe CustomValidationPlugin de l’interface IPlugin et ajoutez la méthode Execute.

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

   }
}

Ajoutez le code suivant dans la méthode d’exécution pour récupérer le contexte et le service de traçage.

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

Ajoutez ce code pour récupérer la chaîne du paramètre de soumission du formulaire. Il s’agit d’une chaîne codée JSON représentant les champs que l’utilisateur a soumis dans le formulaire. Ce processus récupère cette chaîne et la désérialise à l’aide d’une méthode d’assistance Deserialize et de la classe FormSubmissionRequest qui est définie ultérieurement. Cela vérifie que le tableau Champs contient une clé pour g-recaptcha-response. Si la clé reCAPTCHA n’est pas trouvée, elle renvoie la validation en ignorant car le formulaire en cours de traitement ne contient pas d’élément Google recaptcha.
```
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;
}
```

Ajoutez le code suivant pour renvoyer si g-recaptcha-token la valeur est nulle ou vide.

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

Ajoutez le code suivant pour valider le jeton captcha Google par rapport aux API Google.

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

Tout d’abord, l’URL est définie, puis une instance de HttpClient est créée. Un FormUrlEncodedContent objet est créé contenant le recaptchaToken récupéré lors des étapes précédentes et la clé secrète fournie par Google. Ensuite, une POST requête est envoyée et le code d’état est vérifié, s’il échoue, il est renvoyé. En cas de succès, il désérialise la réponse à l’aide de la méthode d’assistance Deserialize et GRecaptchaResponse qui est définie ultérieurement. Il crée ensuite un nouvel ValidateFormSubmissionResponse objet, le sérialise et le définit comme valeur du paramètre de sortie msdynmkt_validationresponse, qui est le seul service Microsoft qu’il utilise pour accepter ou rejeter la soumission. L’ajout de la g-recaptcha-response chaîne à la ValidationOnlyFields liste masque ce champ de la soumission du formulaire dans l’interface utilisateur.

Ajoutez le code suivant pour définir les méthodes d’assistance Serialize et Deserialize.

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

Ajoutez le code suivant pour définir les classes nécessaires pour sérialiser/désérialiser les objets de chaînes JSON.

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 Signer et générer le plug-in

Cliquez avec le bouton de votre souris et sélectionnez de les Propriétairesdans Explorateur de solutions.
Sélectionnez l’onglet Signature et cochez Signer l’assembly.
Sélectionnez <New...>.
Entrez un nom de fichier de clé et désélectionnez Protéger mon fichier de clé avec un mot de passe.
Générez le projet.
Vous trouverez trouver l’assembly du plug-in CustomValidationPlugin.dll dans \bin\Debug.

3.4 Inscrire un plug-in

Ouvrir PluginRegistration.exe.
Cliquez sur Créer une connexion.
Choisissez Office 365.
Sélectionnez Connexion.
Cliquez sur Enregistrer, puis sur Enregistrer un assembly.
Sélectionnez le bouton (...) à l’étape 1 et sélectionnez la dll créée aux étapes précédentes.
Sélectionnez Inscrire un plug-in sélectionné.

3.4 Enregistrer une étape

Sélectionnez CustomValidationPlugin dans la liste des assemblys enregistrés.
Sélectionnez Inscrire une nouvelle étape.
Saisissez msdynmkt_validateformsubmission dans le champ de texte Message.
Assurez-vous que le Mode d’exécution est défini sur Synchronous.
Assurez-vous que Ordre d’exécution est défini sur 10.
Vérifiez Phase d’exécution dans le pipeline d’événement est définie comme Opération postérieure
Sélectionnez Inscrire une nouvelle étape.

Conclusion

Quand un formulaire avec l’attribut data-validate-submission est envoyé, votre plug-in personnalisé s’exécute et valide la réponse reCAPTCHA avec les services Google. Le plug-in personnalisé s’exécutera après le plug-in de validation Microsoft par défaut. S’il n’y a pas de champs captcha Microsoft dans le formulaire, le plug-in Microsoft définit IsValid:false et la soumission échoue à moins que vous ne l’écrasiez avec IsValid:true.

Flux de validation.

Share via