Інтегруйте кастомний сервіс капчі з Customer Insights - Journeys формами

Стаття
01/17/2024

Customer Insights - Journeys Форми дозволяють використовувати спеціальний захист бота Captcha для перевірки надісланих форм. У цій статті наведено приклад того, як інтегрувати Google reCAPTCHA. Ланцюжок аналогічний і для інших сервісів капчі.

Нотатка

У поточній версії програми може бути активною лише одна реалізація капчі. Якщо ви користуєтеся власним постачальником капчі (як описано нижче), наявні форми, які використовують готову капчу, перестануть працювати. Користувацька реалізація капчі вимагає принаймні базових знань з написання та налагодження плагінів dataverse.

Процес складається з таких етапів:

Додайте reCAPTCHA у форму.
Додайте текстове значення captcha до надсилання форми після надсилання форми.
Створіть плагін у CRM, який перевіряє капчу.

Покроковий приклад: інтегруйте Google reCAPTCHA

1. Додайте reCAPTCHA у форму

Створіть форму в редактор форм Customer Insights - Journeys .
data-validate-submission="true" Додайте атрибут до елемента <form> , який вмикає кастомну перевірку під час надсилання форми:
Додайте a <div id="g-recaptcha"> у форму як заповнювач для reCAPTCHA. Цей ідентифікатор div буде використано як посилання пізніше. Рекомендується поставити заповнювач між останнім полем і кнопкою відправки.
Опублікуйте форму та вставте її на свій веб-сайт.
Відредагуйте сторінку, на якій було вбудовано форму. Додайте в шапку сторінки скрипт, наданий Google. Цей скрипт завантажує reCAPTCHA з параметром onLoad callback. Цей зворотний виклик викликається, як тільки завантажується капча.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
```
Додайте функцію onLoadCallback:
```
function onloadCallback() {
    grecaptcha.render('g-recaptcha',
    { 
      sitekey: '{sitekey}',
    });
}
```
Замініть заповнювач {sitekey} на той, що надав Google. Ця функція зворотного виклику відображає reCAPTCHA всередині заповнювача <div id="g-recaptcha"> , який ви створили раніше.
Зареєструйте функцію onloadCallback, яка буде викликана завантажувачем форми:

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

2. Додайте значення тексту капчі до відправки форми

Після надсилання форми параметр g-recaptcha-response автоматично додається до надсилання форми. На наступних кроках ви створите плагін, який приховує це значення, оскільки він буде доданий до ValidationOnlyFields списку в об’єкті відповіді, який повертає код плагіна.

Додано параметр G-recaptcha-response.

3. Створіть плагін

3.1 Створення Visual Studio проекту для плагіна

Відкрийте Visual Studio та створіть новий проект бібліотеки класів за допомогою .NET Framework 4.6.2.
У Провіднику рішень виберіть Керування пакетами NuGet та інсталяція Microsoft.CrmSdk.CoreAssemblies.

3.2 Створіть клас плагіна

Перейменувати Class1.cs на CustomValidationPlugin.cs.
Зробіть так, щоб клас CustomValidationPlugin успадкувався від інтерфейсу IPlugin і додав метод Execute.
```
public class CustomValidationPlugin : IPlugin
{
   public void Execute(IServiceProvider serviceProvider)
   {

   }
}
```

Додайте наступний код до методу execute, щоб отримати контекст і службу трасування.

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

Додайте цей код, щоб отримати рядок параметра надсилання форми. Це рядок у кодуванні JSON, що представляє поля, надіслані користувачем у формі. Цей процес отримує цей рядок і десеріалізує його за допомогою допоміжного методу Deserialize та класу FormSubmissionRequest, який буде визначено пізніше. Це перевіряє, чи масив Fields містить ключ для g-recaptcha-response. Якщо ключ reCAPTCHA не знайдено, він повертає пропуск перевірки, оскільки форма, яка обробляється, не містила елемента 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;
}
```
Додайте наступний код, щоб повернути, якщо g-recaptcha-token значення null або порожнє.
```
if (String.IsNullOrEmpty(recaptchaToken))
{
   tracingService.Trace($"g-recaptcha-response value not found");
   return;
}
```
Додайте наведений нижче код, щоб перевірити маркер капчі Google за 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}");
    }
}
```
Спочатку визначається URL-адреса, потім створюється екземпляр HttpClient . Створюється об’єкт, FormUrlEncodedContent що містить отримані recaptchaToken на попередніх кроках дані та секретний ключ, наданий Google. POST Потім надсилається запит і перевіряється код стану, якщо він не успішний, він повертається. У разі успіху він десеріалізує відповідь за допомогою допоміжного методу Deserialize, який GRecaptchaResponse визначається пізніше. Потім він створює новий ValidateFormSubmissionResponse об’єкт, серіалізує його та встановлює як значення вихідного параметра msdynmkt_validationresponse, який використовується службою Microsoft для прийняття або відхилення надісланого матеріалу. Додавання g-recaptcha-response рядка до ValidationOnlyFields списку приховує це поле від надсилання форми в інтерфейсі користувача.

Додайте наступний код для визначення допоміжних методів Serialize та 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;
}

Додайте наступний код, щоб визначити класи, необхідні для серіалізації/десеріалізації об’єктів рядків 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 Підпишіть і створіть плагін

Клацніть правою кнопкою миші на проекті та виберіть пункт Властивості у Провіднику рішень.
Виберіть вкладку Підпис і встановіть прапорець Підписати збірку .
Виберіть <New...>.
Введіть ім’я файлу ключа та зніміть прапорець Захистити файл ключа паролем.
Побудуйте проект.
Ви можете знайти збірку CustomValidationPlugin.dll плагіна в \bin\Debug.

3.4 Реєстрація плагіна

Відкривати PluginRegistration.exe.
Виберіть Створити нове підключення.
Вибирати Office 365.
Виберіть Вхід.
Виберіть Зареєструватися , а потім Зареєструвати нову збірку.
Виберіть( ...) на кроці 1 і виберіть бібліотеку DLL, вбудовану в попередніх кроках.
Виберіть Зареєструвати вибраний плагін.

3.4 Крок реєстрації

Виберіть CustomValidationPlugin зі списку зареєстрованих збірок.
Виберіть Зареєструвати новий крок.
Введіть msdynmkt_validateformsubmission текстове поле повідомлення.
Переконайтеся, що для параметра Режим виконання встановлено значення Синхронний.
Переконайтеся, що для параметра Порядок виконання встановлено значення 10.
Переконайтеся, що для параметра Event Pipeline Stage Of Execution встановлено значення Post Operation.
Виберіть Зареєструвати новий крок.

Висновок

Коли надсилається форма з атрибутом data-validate-submission , ваш спеціальний плагін запускається та перевіряє відповідь reCAPTCHA за допомогою служб Google. Настроюваний плагін працюватиме після плагіна перевірки Microsoft за замовчуванням. Якщо у формі немає полів капчі Microsoft, плагін Microsoft встановлює IsValid:false , і надсилання не відбудеться, якщо ви не перезапишете його IsValid:true.

Процес валідації.

Поділитися через