تكامل خدمة captcha مخصصة مع نماذج Customer Insights - Journeys

تسمح نماذج Customer Insights - Journeys‬ باستخدام حماية captcha المخصصة للتحقق من صحة عمليات إرسال النماذج. تقدم هذه المقالة مثالاً على كيفية دمج Google reCAPTCHA. التدفق مشابه لخدمات captcha الأخرى.

‏‫ملاحظة

في الإصدار الحالي من التطبيق، بإمكان تطبيق captcha واحد فقط أن يكون نشطًا. إذا كنت تستخدم موفر اختبار CAPTCHA الخاص بك (كما هو موضح أدناه)، فستتوقف النماذج الحالية التي تستخدم اختبار CAPTCHA الجاهز عن العمل. يتطلب تطبيق captcha المخصص معرفة أساسية على الأقل بالكتابة وتصحيح أخطاء المكونات الإضافية في Dataverse.

تتكون العملية من هذه الخطوات:

1. إضافة reCAPTCHA إلى النموذج.
2. إضافة قيمة نص captcha إلى إرسال النموذج بمجرد إرسال النموذج.
3. إنشاء مكون إضافي في CRM يقوم بالتحقق من صحة كلمة التحقق.

مثال خطوة بخطوة: دمج 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 رد الاتصال. يتم استدعاء رد الاتصال هذا بمجرد تحميل رمز التحقق.

   <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. تعرض وظيفة رد الاتصال هذه reCAPTCHA داخل العنصر النائب الذي <div id="g-recaptcha"> أنشأته مسبقًا.

7. قم بتسجيل وظيفة onloadCallback ليتم استدعاؤها بواسطة مُحمل النموذج:

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

2 إضافة قيمة نص captcha إلى إرسال النموذج

بمجرد إرسال النموذج، تتم g-recaptcha-response إضافة المعلمة تلقائيًا إلى إرسال النموذج. في الخطوات التالية، ستنشئ مكونًا إضافيًا يخفي هذه القيمة، حيث ستتم إضافته إلى ValidationOnlyFields القائمة في كائن الاستجابة الذي تم إرجاعه بواسطة رمز المكون الإضافي.

3 إنشاء مكون إضافي

3.1 إنشاء Visual Studio Project للملحق

1. افتح Visual Studio وأنشئ مشروع Class Library جديدًا باستخدام .NET Framework 4.6.2.
2. في مستكشف الحلول، حدد إدارة 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، فسيعيد تخطي التحقق من الصحة لأن النموذج الذي تتم معالجته لا يحتوي على عنصر 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;
   }
   

5. أضف التعليمات البرمجية التالية لإرجاعها إذا كانت قيمة g-recaptcha-token فارغة أو باطلة.

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

6. أضف الكود التالي للتحقق من صحة رمز Google captcha المميز مقابل واجهات برمجة تطبيقات 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 يتم إرسال طلب ويتم التحقق من رمز الحالة، إذا لم ينجح، فسيتم إرجاعه. في حالة نجاحه، يقوم بإلغاء تسلسل الاستجابة باستخدام الأسلوب المساعد إزالة تسلسل وGRecaptchaResponse الذي يتم تحديده لاحقًا. ثم تقوم بإنشاء كائن ValidateFormSubmissionResponse جديد، وتسلسله، وتعيينه كقيمة معلمة الإخراج msdynmkt_validationresponse، وهي خدمة Microsoft الوحيدة التي تستخدمها لقبول الإرسال أو رفضه. تؤدي إضافة سلسلة g-recaptcha-response إلى قائمة ValidationOnlyFields إلى إخفاء هذا الحقل من إرسال النموذج في واجهة المستخدم.

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. أضف التعليمات البرمجية التالية لتعريف الفئات المطلوبة لكائنات سلالات Serialize/Deserialize 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 تسجيل البرنامج المساعد وبناؤه

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. تأكد من تعيين وضع التنفيذ إلى Synchronous.

   

5. تأكد أمر التنفيذ تم ضبطه على 10.
6. تأكد من تعيين مرحلة تنفيذ مسار الأحداث إلى عملية ما بعد.
7. حدد تسجيل خطوة جديدة.

خاتمة

عند إرسال نموذج بالسمة data-validate-submission، يتم تشغيل المكون الإضافي المخصص الخاص بك والتحقق من صحة استجابة reCAPTCHA مع خدمات Google. سيتم تشغيل المكون الإضافي المخصص بعد المكون الإضافي الافتراضي للتحقق من صحة Microsoft. إذا لم يكن هناك حقول Microsoft captcha في النموذج، يتم تعيين IsValid:false المكون الإضافي لـ Microsoft ويفشل الإرسال ما لم تقم بالكتابة فوق IsValid:true.