Integrați un serviciu captcha personalizat cu Customer Insights - Journeys formulare

Articol
06/04/2024

Customer Insights - Journeys formularele vă permit să utilizați protecția personalizată captcha bot pentru a valida trimiterile de formulare. Acest articol oferă un exemplu despre cum să integrați Google reCAPTCHA. Fluxul este similar pentru alte servicii captcha.

Notă

În versiunea actuală a aplicației, o singură implementare captcha poate fi activă. Dacă utilizați propriul furnizor de captcha (după cum este prezentat mai jos), formularele existente care folosesc captcha-ul disponibil nu vor mai funcționa. O implementare captcha personalizată necesită cel puțin cunoștințe de bază despre scrierea și depanarea pluginurilor dataverse.

Procesul constă din acești pași:

Adăugați reCAPTCHA în formular.
Adăugați valoarea textului captcha la trimiterea formularului odată ce acesta este trimis.
Creați un plugin în CRM care validează captcha.

Exemplu pas cu pas: integrați Google reCAPTCHA

1. Adăugați reCAPTCHA în formular

Creați un formular în Customer Insights - Journeys editor formular.
Adăugați un data-validate-submission="true" atribut la elementul <form> , care permite validarea personalizată la trimiterea formularului:
Adăugați a <div id="g-recaptcha"> în formular ca substituent pentru reCAPTCHA. Acest ID div este folosit ca referință mai târziu. Este recomandat să puneți substituentul între ultimul câmp și butonul de trimitere.
Publicați formularul și încorporați formularul în site-ul dvs. web.
Editați pagina în care a fost încorporat formularul. Adăugați scriptul oferit de Google în antetul paginii. Acest script încarcă reCAPTCHA cu parametrul onLoad callback. Acest apel invers este apelat imediat ce captcha este încărcat.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Adăugați funcția onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Înlocuiți substituentul {sitekey} cu cel oferit de Google. Această funcție de apel invers redă reCAPTCHA în interiorul substituent <div id="g-recaptcha"> pe care l-ați creat mai devreme.
Înregistrați funcția onloadCallback pentru a fi apelată de încărcătorul de formulare:

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

2. Adăugați valoarea textului captcha la trimiterea formularului

Odată ce formularul este trimis, parametrul g-recaptcha-response este adăugat automat la trimiterea formularului. În următorii pași, veți construi un plugin care ascunde această valoare, deoarece va fi adăugat la lista ValidationOnlyFields în obiectul răspuns returnat de codul pluginului.

Este adăugat parametrul G-recaptcha-response.

3. Creați un plugin

3.1 Creați un Visual Studio Proiect pentru plugin

Deschideți Visual Studio și creați un nou proiect Biblioteca de clasă folosind .NET Framework 4.6.2.
În Solution Explorer, selectați Gestionați NuGet Pachete și instalați Microsoft.CrmSdk.CoreAssemblies.

3.2 Creați clasa de plugin

Redenumiți Class1.cs în CustomValidationPlugin.cs.

Faceți ca clasa CustomValidationPlugin să moștenească din interfața IPlugin și adăugați metoda Execute.

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

   }
}

Adăugați următorul cod în metoda execute pentru a prelua contextul și serviciul de urmărire.

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

Adăugați acest cod pentru a prelua șirul de parametri de trimitere a formularului. Este un șir codificat JSON care reprezintă câmpurile pe care utilizatorul le-a trimis în formular. Acest proces preia acest șir și îl deserializează folosind o metodă de ajutor Deserialize și o clasă FormSubmissionRequest care este definită mai târziu. Aceasta verifică dacă matricea Fields conține o cheie pentru g-recaptcha-response. Dacă cheia reCAPTCHA nu este găsită, returnează validarea ignorată, deoarece formularul care este procesat nu conținea un element recaptcha 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;
}
```

Adăugați următorul cod pentru a returna dacă valoarea g-recaptcha-token este nulă sau goală.

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

Adăugați următorul cod pentru a valida indicativul captcha Google față de API-urile 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}");
    }
}

Mai întâi, este definită adresa URL, apoi este creată o instanță a HttpClient . Este creat un FormUrlEncodedContent obiect care conține recaptchaToken recuperat la pașii anteriori și cheia secretă furnizată de Google. Apoi se trimite o POST cerere și se verifică codul de stare, dacă nu reușește, revine. Dacă are succes, deserializează răspunsul folosind metoda de ajutor Deserialize și GRecaptchaResponse aceasta este definită mai târziu. Apoi creează un nou ValidateFormSubmissionResponse obiect, îl serializează și îl setează ca valoare a parametrului de ieșire msdynmkt_validationresponse, care este singurul serviciu Microsoft pe care îl folosește pentru a accepta sau a respinge trimiterea. Adăugarea g-recaptcha-response șirului la ValidationOnlyFields listă ascunde acest câmp de la trimiterea formularului în interfața de utilizare.

Adăugați următorul cod pentru a defini metodele de ajutor Serialize și 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;
}

Adăugați următorul cod pentru a defini clasele necesare pentru serializarea/deserializarea obiectelor șiruri 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 Semnează și construiește pluginul

Faceți clic dreapta pe proiect și selectați Proprietăți în Solution Explorer.
Selectați fila Semnare și bifați caseta de validare Semnați ansamblul .
Selectați <New...>.
Introduceți un nume de fișier cheie și deselectați Protejați fișierul cheie cu o parolă.
Construiți proiectul.
Puteți găsi ansamblul pluginului CustomValidationPlugin.dll în \bin\Debug.

3.4 Înregistrați pluginul

Deschis PluginRegistration.exe.
Selectați Creați o nouă conexiune.
Alege Office 365.
Selectați Conectare.
Selectați Înregistrare și apoi Înregistrare ansamblu nou.
Selectați butonul (...) la pasul 1 și selectați dll-ul construit la pașii anteriori.
Selectați Înregistrați pluginul selectat.

3.4 Pasul de înregistrare

Selectați CustomValidationPlugin din lista ansamblurilor înregistrate.
Selectați Înregistrare pas nou.
Introduceți msdynmkt_validateformsubmission în câmpul de text al mesajului.
Asigurați-vă că Modul de execuție este setat ca Sincron.
Asigurați-vă că Ordinul de execuție este setat la 10.
Asigurați-vă că Event Pipeline Stade Of Execution este setată ca Post Operation.
Selectați Înregistrare pas nou.

Concluzie

Când este trimis un formular cu atributul data-validate-submission , pluginul dvs. personalizat rulează și validează răspunsul reCAPTCHA cu serviciile Google. Pluginul personalizat va rula după pluginul implicit de validare Microsoft. Dacă nu există câmpuri captcha Microsoft în formular, pluginul Microsoft setează IsValid:false și trimiterea eșuează dacă nu îl suprascrieți cu IsValid:true.

Fluxul de validare.

Partajați prin