Integrare un servizio captcha personalizzato con moduli di Customer Insights - Journeys

Articolo
01/30/2024

I moduli di Customer Insights - Journeys ti consentono di utilizzare la protezione dai bot captcha personalizzata per convalidare gli invii dei moduli. Questo articolo fornisce un esempio di come integrare Google reCAPTCHA. Il flusso è simile per altri servizi captcha.

Nota

Nella versione dell'app attuale può essere attiva solo un'implementazione captcha. Se usi il tuo provider di captcha (come descritto di seguito), i moduli esistenti che utilizzano il captcha predefinito smetteranno di funzionare. Un'implementazione captcha personalizzata richiede almeno una conoscenza di base della scrittura e del debug dei plug-in dataverse.

Il processo è costituito dai seguenti passaggi:

Aggiungi reCAPTCHA al modulo.
Aggiungi il valore del testo captcha all'invio del modulo una volta che il modulo è stato inviato.
Crea un plug-in nel CRM che convalida il captcha.

Esempio dettagliato: integra Google reCAPTCHA

1. Aggiungi reCAPTCHA al modulo

Crea un modulo nell'editor di moduli di Customer Insights - Journeys.
Aggiungi un attributo data-validate-submission="true" all'elemento <form>, che abilita la convalida personalizzata sull'invio del modulo:
Aggiungi un <div id="g-recaptcha"> nel modulo come segnaposto per reCAPTCHA. Questo ID div viene utilizzato come riferimento in seguito. Ti consigliamo di inserire il segnaposto tra l'ultimo campo e il pulsante di invio.
Pubblica il modulo e incorporalo nel tuo sito web.
Modifica la pagina in cui è stato incorporato il modulo. Aggiungi lo script fornito da Google nell'intestazione della pagina. Questo script carica il reCAPTCHA con il parametro di richiamata onLoad. Questa richiamata viene effettuata non appena viene caricato il captcha.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Aggiungi la funzione onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Sostituisci il segnaposto {sitekey} con quello fornito da Google. Questa funzione di richiamata esegue il rendering di reCAPTCHA all'interno del segnaposto <div id="g-recaptcha"> che hai creato in precedenza.
Registra la funzione onloadCallback per essere chiamata dal caricatore del modulo:

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

2. Aggiungi il valore del testo captcha all'invio del modulo

Una volta inviato il modulo, il parametro g-recaptcha-response viene aggiunto automaticamente all'invio del modulo. Nei passaggi successivi, creerai un plug-in che nasconde questo valore, poiché verrà aggiunto all'elenco ValidationOnlyFields nell'oggetto risposta restituito dal codice del plug-in.

Viene aggiunto il parametro G-recaptcha-response.

3. Crea un plug-in

3.1 Crea un progetto Visual Studio per il plug-in

Apri Visual Studio e crea un nuovo progetto Libreria di classi usando .NET Framework 4.6.2.
In Esplora soluzioni seleziona Gestisci pacchetti NuGet e installa Microsoft.CrmSdk.CoreAssemblies.

3.2 Crea la classe del plug-in

Rinomina Class1.cs in CustomValidationPlugin.cs.

Fai ereditare la classe CustomValidationPlug-in dall'interfaccia IPlug-in e aggiungi il metodo Execute.

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

   }
}

Aggiungi il codice seguente nel metodo execute per recuperare il contesto e il servizio di traccia.

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

Aggiungi questo codice per recuperare la stringa del parametro di invio del modulo. È una stringa con codifica JSON che rappresenta i campi che l'utente ha inviato nel modulo. Questo processo recupera la stringa e la deserializza utilizzando un metodo helper Deserialize e una classe FormSubmissionRequest definita successivamente. Questo controlla che l'array Fields contenga una chiave per g-recaptcha-response. Se la chiave reCAPTCHA non viene trovata, restituisce l'omissione della convalida poiché il modulo in elaborazione non conteneva un elemento recaptcha di Google.
```
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;
}
```

Aggiungi il seguente codice per restituire se il valore g-recaptcha-token è nullo o vuoto.

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

Aggiungi il seguente codice per convalidare il token captcha di Google rispetto alle API di 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}");
    }
}

Innanzitutto, viene definito l'URL, quindi un'istanza di HttpClient viene creata. Un oggetto FormUrlEncodedContent viene creato contenente il recaptchaToken recuperato nei passaggi precedenti e la chiave segreta fornita da Google. Poi una richiesta POST viene inviata e viene verificato il codice di stato, se non va a buon fine viene restituito. In caso di successo, deserializza la risposta utilizzando il metodo helper Deserialize e GRecaptchaResponse definito in seguito. Quindi crea un nuovo oggetto ValidateFormSubmissionResponse, serializzalo e impostalo come valore del parametro di output msdynmkt_validationresponse, che è l'unico servizio Microsoft che utilizza per accettare o rifiutare l'invio. L'aggiunta della stringa g-recaptcha-response all'elenco ValidationOnlyFields nasconde questo campo dall'invio del modulo nell'interfaccia utente.

Aggiungi il codice seguente per definire i metodi helper Serialize e 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;
}

Aggiungi il codice seguente per definire le classi necessarie per gli oggetti stringhe JSON Serialize/Deserialize.

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 Firma e crea il plug-in

Fai clic con il tasto destro sul progetto e seleziona Proprietà in Esplora soluzioni.
Seleziona la scheda Firma e seleziona la casella di controllo Firma l'assembly.
Selezionare <New...>.
Inserisci un nome per il file chiave e deseleziona Proteggi il mio file chiave con una password.
Compilare il progetto.
Puoi trovare l'assembly del plug-in CustomValidationPlugin.dll in \bin\Debug.

3.4 Registra il plug-in

PluginRegistration.exe aperti.
Seleziona Crea nuova connessione.
Scegliere Office 365.
Selezionare Accedi.
Seleziona Registra e Registra nuovo assembly.
Seleziona il pulsante (...) nel passaggio 1 e seleziona la dll creata nei passaggi precedenti.
Seleziona Registra plug-in selezionato.

3.4 Registra il passaggio

Seleziona CustomValidationPlug-in dall'elenco degli assembly registrati.
Seleziona Registra nuovo passaggio.
Inserisci msdynmkt_validateformsubmission nel campo di testo del messaggio.
Assicurati che Modalità di esecuzione sia impostata su Sincrono.
Assicurati che Ordine di esecuzione sia impostato su 10.
Assicurati che Fase di esecuzione della pipeline eventi sia impostato su Post Operation.
Seleziona Registra nuovo passaggio.

Conclusione

Quando viene inviato un modulo con l'attributo data-validate-submission, il plug-in personalizzato viene eseguito e convalida la risposta reCAPTCHA con i servizi Google. Il plug-in personalizzato verrà eseguito dopo il plug-in di convalida Microsoft predefinito. Se non ci sono campi captcha Microsoft nel modulo, il plug-in Microsoft imposta IsValid:false e l'invio non riesce a meno che non lo si sostituisca con IsValid:true.

Flusso di convalida.