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

Articol
01/30/2024

Customer Insights - Journeys Formularele vă permit să utilizați protecția personalizată a botului captcha 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 curentă a aplicației, o singură implementare captcha poate fi activă. Dacă utilizați propriul furnizor captcha (așa cum este descris mai jos), formularele existente care utilizează captcha predefinit 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ă în acești pași:

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

Exemplu pas cu pas: Integrați Google reCAPTCHA

1. Adăugați reCAPTCHA la formular

Creați un formular în Customer Insights - Journeys editor formular.
Adăugați un data-validate-submission="true" atribut elementului, care permite validarea personalizată la trimiterea formularului <form> :
Adăugați un <div id="g-recaptcha"> în formular ca substituent pentru reCAPTCHA. Acest div ID este folosit ca referință mai târziu. Este recomandat să plasați substituentul între ultimul câmp și butonul de trimitere.
Publicați formularul și încorporați formularul în site-ul dvs.
Editați pagina în care a fost încorporat formularul. Adăugați scriptul furnizat 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 furnizat de Google. Această funcție de apelare inversă redă reCAPTCHA în interiorul substituentului <div id="g-recaptcha"> pe care l-ați creat anterior.
Î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 pașii următori, veți construi un plugin care ascunde această valoare, deoarece va fi adăugat la ValidationOnlyFields listă în obiectul de răspuns returnat de codul pluginului.

Se adaugă 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 de bibliotecă de clase utilizând .NET Framework 4.6.2.
În Exploratorul de soluții, selectați Gestionare NuGet pachete și instalați Microsoft.CrmSdk.CoreAssemblies.

3.2 Creați clasa pluginului

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

Faceți clasa CustomValidationPlugin moștenită 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 de executare 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 regăsi șirul parametrului de trimitere a formularului. Este un șir codificat JSON care reprezintă câmpurile pe care utilizatorul le-a trimis în formular. Acest proces regăsește acest șir și îl deserializează utilizând o metodă de ajutor Deserialize și clasa FormSubmissionRequest care este definită mai târziu. Aceasta verifică dacă matricea Câmpuri conține o cheie pentru răspunsul g-recaptcha. Dacă cheia reCAPTCHA nu este găsită, returnează omiterea validării, deoarece formularul care se procesează nu conținea un element 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;
}
```

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

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

Adăugați următorul cod pentru a valida simbolul Google captcha împotriva API-urilor 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, URL-ul este definit, apoi este creată o instanță a lui HttpClient . Se creează un FormUrlEncodedContent obiect care conține recaptchaToken preluate în 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, se întoarce. Dacă reușește, deserializează răspunsul folosind metoda de ajutor Deserialize și GRecaptchaResponse aceasta este definită mai târziu. Apoi creează un obiect nou ValidateFormSubmissionResponse , îl serializează și îl setează ca valoare a parametrului msdynmkt_validationresponse de ieșire, care este serviciul Microsoft pe care îl utilizează pentru a accepta sau a respinge remiterea. Adăugarea șirului g-recaptcha-responseValidationOnlyFields la listă ascunde acest câmp de 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 șirurilor 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 Semnați și construiți pluginul

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

3.4 Înregistrați pluginul

Deschide PluginRegistration.exe.
Selectați Creați o conexiune nouă.
Alege Office 365.
Selectați Conectare.
Selectați Înregistrare, apoi Înregistrare asamblare nouă.
Selectați (...) din pasul 1 și selectați DLL-ul construit în 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.
Intrați msdynmkt_validateformsubmission în câmpul de text Mesaj.
Asigurați-vă că Modul de execuție este setat ca Sincron.
Asigurați-vă că Ordin de execuție este setat la 10.
Asigurați-vă că Etapa de execuție a conductei de evenimente este setată ca Post Operation.
Selectați Înregistrare pas nou.

Concluzie

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

Flux de validare.

Partajați prin