사용자 지정 캡차 서비스를 Customer Insights - Journeys 양식과 통합

아티클
01/31/2024

Customer Insights - Journeys 양식을 사용하면 사용자 지정 캡차 봇 보호를 사용하여 양식 제출을 확인할 수 있습니다. 이 문서에서는 Google reCAPTCHA을 통합하는 방법의 예를 제공합니다. 흐름은 다른 캡차 서비스와 비슷합니다.

참고

현재 앱 버전에서는 캡차 구현을 하나만 활성화할 수 있습니다. 아래에 설명된 대로 자체 캡차 공급자를 사용하는 경우 기본 캡차를 사용하는 기존 양식의 작동이 중지됩니다. 사용자 지정 캡차 구현에는 최소한 Dataverse 플러그인 작성 및 디버깅에 대한 기본 지식이 필요합니다.

프로세스는 다음 단계로 구성됩니다.

양식에 reCAPTCHA 추가.
양식이 제출되면 양식 제출에 캡차 텍스트 값을 추가합니다.
캡차의 유효성을 검사하는 CRM에서 플러그 인을 만듭니다.

단계별 예: Google reCAPTCHA 통합

1. 양식에 reCAPTCHA 추가

Customer Insights - Journeys 양식 편집기에서 양식을 만듭니다.
양식 제출에 대한 사용자 지정 유효성 검사를 활성화하는 <form> 요소에 data-validate-submission="true" 특성을 추가합니다.
eCAPTCHA에 대한 자리 표시자로 양식에 <div id="g-recaptcha">를 추가합니다. 이 div ID는 나중에 참조로 사용됩니다. 마지막 필드와 제출 버튼 사이에 자리 표시자를 두는 것이 좋습니다.
양식을 게시하고 양식을 웹 사이트에 포함합니다.
양식이 포함된 페이지를 편집하십시오. Google에서 제공하는 스크립트를 페이지 헤더에 추가합니다. 이 스크립트는 onLoad 콜백 매개 변수로 reCAPTCHA를 로드합니다. 이 콜백은 캡차가 로드되자마자 호출됩니다.
```
<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에서 제공한 것으로 바꿉니다. 이 콜백 함수는 이전에 생성한 자리 표시자 <div id="g-recaptcha"> 내에서 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 인터페이스에서 상속되도록 만들고 실행 메서드를 추가합니다.
```
public class CustomValidationPlugin : IPlugin
{
   public void Execute(IServiceProvider serviceProvider)
   {

   }
}
```

다음 코드를 실행 메서드에 추가하여 컨텍스트 및 추적 서비스를 검색합니다.

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 인코딩 문자열입니다. 이 프로세스는 이 문자열을 검색하고 역직렬화 도우미 메서드와 나중에 정의되는 FormSubmissionRequest 클래스를 사용하여 역직렬화합니다. 이는 필드 배열에 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 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의 인스턴스가 생성됩니다. 이전 단계에서 검색된 recaptchaToken과 Google에서 제공한 비밀 키를 포함하는 FormUrlEncodedContent 개체가 생성됩니다. 그런 다음 POST 요청이 전송되고 상태 코드가 확인되며 성공하지 못하면 반환됩니다. 성공하면 역직렬화 도우미 메서드와 나중에 정의되는 GRecaptchaResponse를 사용하여 응답을 역직렬화합니다. 그런 다음 새 ValidateFormSubmissionResponse 개체를 만들고 직렬화한 다음 제출을 수락하거나 거부하는 데 사용하는 하나의 Microsoft 서비스인 출력 매개 변수 msdynmkt_validationresponse의 값으로 설정합니다. g-recaptcha-response 문자열을 ValidationOnlyFields 목록에 추가하면 UI의 양식 제출에서 이 필드가 숨겨집니다.

다음 코드를 추가하여 직렬화 및 역직렬화 도우미 메서드를 정의합니다.

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 특성이 있는 양식이 제출되면 사용자 지정 플러그 인이 Google 서비스로 reCAPTCHA 응답을 실행하고 유효성을 검사합니다. 사용자 지정 플러그인은 기본 Microsoft 유효성 검사 플러그인 다음에 실행됩니다. 양식에 Microsoft 캡차 필드가 없는 경우 Microsoft 플러그 인은 IsValid:false를 설정하고 IsValid:true로 덮어쓰지 않는 한 제출이 실패합니다.

유효성 검사 흐름.

다음을 통해 공유