รวมบริการ captcha แบบกำหนดเองเข้ากับฟอร์ม Customer Insights - Journeys

ฟอร์ม Customer Insights - Journeys ช่วยให้คุณใช้การป้องกันบอท captcha แบบกำหนดเองเพื่อตรวจสอบความถูกต้องของการส่งฟอร์ม บทความนี้แสดงตัวอย่างวิธีรวม Google reCAPTCHA โฟลว์จะคล้ายกับบริการ captcha อื่นๆ

หมายเหตุ

ในแอปเวอร์ชันปัจจุบัน คุณสามารถใช้งาน Captcha ได้เพียงรายการเดียวเท่านั้น หากคุณใช้ผู้ให้บริการ Captcha ของคุณเอง (ตามที่ระบุไว้ด้านล่าง) แบบฟอร์มที่มีอยู่ซึ่งใช้ captcha แบบสำเร็จรูปจะหยุดทำงาน การใช้ captcha ที่กำหนดเองต้องมีความรู้พื้นฐานในการเขียนและแก้ไขจุดบกพร่อง ปลั๊กอิน Dataverse เป็นอย่างน้อย

กระบวนการประกอบด้วยขั้นตอนเหล่านี้:

1. เพิ่ม reCAPTCHA ในฟอร์ม
2. เพิ่มค่าข้อความ captcha ในการส่งฟอร์มเมื่อส่งฟอร์มแล้ว
3. สร้างปลั๊กอิน ใน CRM ที่ตรวจสอบความถูกต้องของ captcha

ตัวอย่างทีละขั้นตอน: รวม Google reCAPTCHA

1. เพิ่ม reCAPTCHA ในฟอร์ม

1. สร้างฟอร์มในตัวแก้ไขฟอร์ม Customer Insights - Journeys

2. เพิ่มแอตทริบิวต์ data-validate-submission="true" ให้กับองค์ประกอบ <form> ซึ่งเปิดใช้งานการตรวจสอบแบบกำหนดเองในการส่งฟอร์ม:

   

3. เพิ่ม <div id="g-recaptcha"> ในฟอร์มเป็นตัวยึดตำแหน่งสำหรับ reCAPTCHA รหัส div นี้ใช้เป็นข้อมูลอ้างอิงในภายหลัง ขอแนะนำให้วางตัวยึดระหว่างฟิลด์สุดท้ายและปุ่มส่ง

   

4. เผยแพร่ฟอร์มและฝังฟอร์มลงในเว็บไซต์ของคุณ

5. แก้ไขหน้าที่ฝังฟอร์ม เพิ่มสคริปต์ที่จัดทำโดย Google ในส่วนหัวของหน้า สคริปต์นี้โหลด reCAPTCHA ด้วยพารามิเตอร์การติดต่อกลับ onLoad การติดต่อกลับนี้ถูกเรียกใช้ทันทีที่โหลด captcha

   <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback" async defer></script>
   

6. เพิ่มฟังก์ชัน onLoadCallback:

   function onloadCallback() {
       grecaptcha.render('g-recaptcha',
       { 
         sitekey: '{sitekey}',
       });
   }
   

   แทนที่ตัวยึด {sitekey} ด้วยตัวยึดที่ Google ให้มา ฟังก์ชัน callback นี้แสดงผล reCAPTCHA ภายในตัวยึด <div id="g-recaptcha"> ที่คุณสร้างไว้ก่อนหน้านี้

7. ลงทะเบียนฟังก์ชัน onloadCallback เพื่อให้ตัวโหลดแบบฟอร์มเรียกใช้:

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

2. เพิ่มค่าข้อความ captcha ในการส่งฟอร์ม

เมื่อส่งฟอร์มแล้ว g-recaptcha-response พารามิเตอร์จะถูกเพิ่มลงในการส่งฟอร์มโดยอัตโนมัติ ในขั้นตอนถัดไป คุณจะสร้างปลั๊กอินที่ซ่อนค่านี้ เนื่องจากจะถูกเพิ่มลงในรายการ ValidationOnlyFields ในออบเจ็กต์การตอบสนองที่ส่งคืนโดยรหัสปลั๊กอิน

3. สร้างปลั๊กอิน

3.1 สร้างโครงการ Visual Studio สำหรับปลั๊กอิน

1. เปิด Visual Studio และสร้างโครงการคลาสไลบรารีใหม่โดยใช้ .NET Framework 4.6.2
2. ใน Solution Explorer เลือก จัดการแพ็คเกจ NuGet และติดตั้ง Microsoft.CrmSdk.CoreAssemblies

3.2 สร้างคลาสปลั๊กอิน

1. เปลี่ยนชื่อ Class1.cs เป็น CustomValidationPlugin.cs

2. ทำให้คลาส CustomValidationPlugin สืบทอดมาจากอินเตอร์เฟส IPlugin และเพิ่มวิธีการดำเนินการ

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

3. เพิ่มรหัสต่อไปนี้ในวิธีการดำเนินการเพื่อดึงบริบทและบริการการติดตาม

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

4. เพิ่มรหัสนี้เพื่อดึงสตริงพารามิเตอร์การส่งฟอร์ม ซึ่งเป็นสตริงที่เข้ารหัส JSON ซึ่งแสดงฟิลด์ที่ผู้ใช้ส่งมาในฟอร์ม กระบวนการนี้ดึงสตริงนี้และดีซีเรียลไลซ์โดยใช้วิธีการช่วยเหลือ Deserialize และคลาส FormSubmissionRequest ที่กำหนดไว้ในภายหลัง ซึ่งตรวจสอบว่าอาร์เรย์ของฟิลด์มีคีย์สำหรับ 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;
   }
   

5. เพิ่มรหัสต่อไปนี้เพื่อส่งกลับถ้าค่า g-recaptcha-token เป็นโมฆะหรือว่างเปล่า

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

6. เพิ่มโค้ดต่อไปนี้เพื่อตรวจสอบความถูกต้องของโทเค็น Google captcha กับ Google API

   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 จะเป็นการซ่อนฟิลด์นี้จากการส่งฟอร์มใน UI

7. เพิ่มรหัสต่อไปนี้เพื่อกำหนดวิธีการช่วยเหลือ 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;
   }
   

8. เพิ่มโค้ดต่อไปนี้เพื่อกำหนดคลาสที่จำเป็นสำหรับออบเจ็กต์สตริง JSON ของ Serialize/Deserialize

   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 ลงชื่อและสร้างปลั๊กอิน

1. คลิกขวาที่โครงการและเลือก คุณสมบัติ ใน ตัวสำรวจโซลูชัน
2. เลือกแท็บ ลงชื่อ และทำเครื่องหมายที่กล่องทำเครื่องหมาย ลงชื่อแอสเซมบลี
3. เลือก <New...>
4. ป้อนชื่อไฟล์คีย์และยกเลิกการเลือก ป้องกันไฟล์คีย์ของฉันด้วยรหัสผ่าน
5. สร้างโครงการ
6. คุณจะพบแอสเซมบลีปลั๊กอิน CustomValidationPlugin.dll ใน \bin\Debug

3.4 ลงทะเบียนปลั๊กอิน

1. เปิด PluginRegistration.exe
2. เลือก สร้างการเชื่อมต่อใหม่
3. เลือก Office 365
4. เลือกเข้าสู่ระบบ
5. เลือก ลงทะเบียน และจากนั้น ลงทะเบียนแอสเซมบลีใหม่

   

6. เลือกปุ่ม (...) ในขั้นตอนที่ 1 และเลือก dll ที่สร้างขึ้นในขั้นตอนก่อนหน้า
7. เลือก ลงทะเบียนปลั๊กอินที่เลือก

3.4 ขั้นตอนลงทะเบียน

1. เลือก CustomValidationPlugin จากรายการแอสเซมบลีที่ลงทะเบียน
2. เลือก ลงทะเบียนขั้นตอนใหม่
3. ป้อน msdynmkt_validateformsubmission ลงในฟิลด์ข้อความ
4. ตรวจสอบให้แน่ใจว่า โหมดการดำเนินการ ถูกตั้งค่าเป็น ซิงโครนัส

   

5. ตรวจสอบให้แน่ใจว่า คำสั่งดำเนินการ ถูกตั้งค่าเป็น 10
6. ตรวจสอบให้แน่ใจว่า ลำดับขั้นของไปป์ไลน์เหตุการณ์ของการดำเนินการ ตั้งค่าเป็น หลังการดำเนินการ
7. เลือก ลงทะเบียนขั้นตอนใหม่

บทสรุป

เมื่อส่งฟอร์มที่มีแอตทริบิวต์ data-validate-submission แล้ว ปลั๊กอินที่กำหนดเองของคุณจะเรียกใช้และตรวจสอบการตอบสนองของ reCAPTCHA กับบริการของ Google ปลั๊กอินแบบกำหนดเองจะทำงานหลังจากปลั๊กอินการตรวจสอบความถูกต้องเริ่มต้นของ Microsoft หากไม่มีฟิลด์ Microsoft captcha ในฟอร์ม ปลั๊กอิน Microsoft จะตั้งค่า IsValid:false และการส่งจะล้มเหลว เว้นแต่คุณจะเขียนทับด้วย IsValid:true