Интеграция пользовательской службы CAPTCHA в формы Customer Insights - Journeys

Статья
01/31/2024

Формы Customer Insights - Journeys позволяют использовать настраиваемую защиту от ботов по коду Captcha для проверки отправленных форм. В этой статье приведен пример того, как интегрировать Google reCAPTCHA. Процесс аналогичен для других сервисов Captcha.

Заметка

В текущей версии приложения может быть активна только одна реализация функции Captcha. Если вы используете собственный поставщик Captcha (как описано ниже), существующие формы, в которых используется стандартная функция Captcha, перестанут работать. Собственная реализация функции Captcha требует как минимум базовых знаний в области написания и отладки подключаемых модулей Dataverse.

Процесс состоит из следующих шагов:

Добавьте reCAPTCHA на форму.
Добавьте текстовое значение кода Captcha к отправке формы после отправки формы.
Создайте подключаемый модуль в CRM, которая проверяет код Captcha.

Пошаговый пример: интеграция Google reCAPTCHA

1. Добавьте reCAPTCHA на форму

Создайте форму в редакторе форм Customer Insights - Journeys.
Добавьте атрибут data-validate-submission="true" к элементу <form>, который включает пользовательскую проверку при отправке формы:
Добавьте <div id="g-recaptcha"> в форму в качестве заполнителя для reCAPTCHA. Этот идентификатор div используется в качестве ссылки позже. Рекомендуется поместить заполнитель между последним полем и кнопкой отправки.
Опубликуйте форму и вставьте ее на свой веб-сайт.
Отредактируйте страницу, на которой была встроена форма. Добавьте скрипт, предоставленный Google, в заголовок страницы. Этот скрипт загружает reCAPTCHA с параметром обратного вызова onLoad. Этот обратный вызов вызывается сразу после загрузки кода Captcha.
```
<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. Добавьте текстовое значение Captcha к отправке формы

После отправки формы параметр 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 не найден, он возвращает пропуск проверки, поскольку обрабатываемая форма не содержит элемента 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;
}
```
Добавьте следующий код для возврата, если значение g-recaptcha-token равно null или пусто.
```
if (String.IsNullOrEmpty(recaptchaToken))
{
   tracingService.Trace($"g-recaptcha-response value not found");
   return;
}
```
Добавьте следующий код, чтобы проверить токен Google captcha относительно 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.
Убедитесь, что для параметра Стадия выполнения конвейера событий задано значение После операции.
Выберите Зарегистрировать новый шаг.

Заключение

При отправке формы с атрибутом data-validate-submission ваш настраиваемый подключаемый модуль запускается и проверяет ответ reCAPTCHA с помощью служб Google. Пользовательский подключаемый модуль будет запускаться после подключаемого модуля проверки Microsoft по умолчанию. Если в форме нет полей Microsoft Captcha, подключаемый модуль Microsoft устанавливает IsValid:false, и отправка завершается неудачно, если вы не перезапишете это значение значением IsValid:true.

Поток проверки.

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