Embedding forms using iFrame or script, helper methods and option to use own rendering view.

acoumb · acoumb · commit ecfd797ba75c · 2022-08-03T07:49:44.000+03:00
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsForm.cshtml b/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsForm.cshtml
@@ -0,0 +1,25 @@
+﻿@using Umbraco.Cms.Integrations.Crm.Dynamics.Models.ViewModels;
+
+@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<FormViewModel>
+
+@{
+    var id = Guid.NewGuid();
+}
+
+@if (Model.IFrameEmbedded)
+{
+    <iframe frameBorder="0" style="width:100%" id=@id></iframe>
+    <script>
+        var sandboxSrc = "https://@(Model.Hostname)/t/formsandbox/@(Model.WebsiteId)/@(Model.FormBlockId)?ad="
+            + encodeURIComponent(document.location.toString()); document.getElementById('@id').setAttribute('src', sandboxSrc);
+    </script>
+}
+else
+{
+    <div data-form-block-id="@Model.FormBlockId"></div>
+    <script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=1.84.2007"></script>
+    <div id="@Model.ContainerId"></div>
+    <script src="https://mktdplp102cdn.azureedge.net/public/latest/js/ws-tracking.js?v=1.84.2007"></script>
+    <div class="@Model.ContainerClass" style="display:none" 
+        data-website-id="@Model.WebsiteId" data-hostname="@Model.Hostname"></div>
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV8.cshtml b/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV8.cshtml
@@ -2,4 +2,24 @@
 
 @inherits Umbraco.Web.Mvc.UmbracoViewPage<FormViewModel>
 
-@Html.Raw(Model.EmbedCode)
+@{
+    var id = Guid.NewGuid();
+}
+
+@if (Model.IFrameEmbedded)
+{
+    <iframe frameBorder="0" style="width:100%" id=@id></iframe>
+    <script>
+        var sandboxSrc = "https://@(Model.Hostname)/t/formsandbox/@(Model.WebsiteId)/@(Model.FormBlockId)?ad="
+            + encodeURIComponent(document.location.toString()); document.getElementById('@id').setAttribute('src', sandboxSrc);
+    </script>
+}
+else
+{
+    <div data-form-block-id="@Model.FormBlockId"></div>
+    <script src="https://mktdplp102cdn.azureedge.net/public/latest/js/form-loader.js?v=1.84.2007"></script>
+    <div id="@Model.ContainerId"></div>
+    <script src="https://mktdplp102cdn.azureedge.net/public/latest/js/ws-tracking.js?v=1.84.2007"></script>
+    <div class="@Model.ContainerClass" style="display:none" 
+        data-website-id="@Model.WebsiteId" data-hostname="@Model.Hostname"></div>
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV9.cshtml b/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV9.cshtml
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/formpicker.controller.js b/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/js/formpicker.controller.js
@@ -5,6 +5,7 @@
     vm.loading = false;
     vm.dynamicsFormsList = [];
     vm.searchTerm = "";
+    vm.iFrameEmbedded = false;
 
     umbracoCmsIntegrationsCrmDynamicsResource.checkOAuthConfiguration().then(function (response) {
         if (response.isAuthorized) {
@@ -30,14 +31,21 @@
         $scope.model.value = null;
     }
 
+    vm.toggleRenderMode = function () {
+        vm.iFrameEmbedded = !vm.iFrameEmbedded;
+    }
+
     vm.openDynamicsFormPickerOverlay = function () {
 
         var options = {
             title: "Dynamics - Marketing Forms",
             subtitle: "Select a form",
             view: "/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/formpickereditor.html",
             size: "medium",
-            selectForm: function (form) {
+            selectForm: function (form, iFrameEmbedded) {
+
+                form.iFrameEmbedded = iFrameEmbedded;
+
                 vm.saveForm(form);
 
                 editorService.close();
@@ -57,7 +65,8 @@
                     vm.dynamicsFormsList.push({
                         id: item.msdyncrm_marketingformid,
                         name: item.msdyncrm_name,
-                        embedCode: ""
+                        embedCode: "",
+                        iFrameEmbedded: vm.iFrameEmbedded
                     });
                 });
             }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/formpickereditor.html b/src/Umbraco.Cms.Integrations.Crm.Dynamics/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/views/formpickereditor.html
@@ -12,14 +12,25 @@
                     </div>
                     <div class="dynOverlayGroup">
                         <ul class="dynFormsList">
-                            <li ng-repeat="form in vm.dynamicsFormsList | orderBy:'name' | filter:vm.searchTerm" ng-click="model.selectForm(form)" class="ng-scope" role="button" tabindex="0">
+                            <li ng-repeat="form in vm.dynamicsFormsList | orderBy:'name' | filter:vm.searchTerm" ng-click="model.selectForm(form, vm.iFrameEmbedded)" 
+                                class="ng-scope" role="button" tabindex="0">
                                 <a href="" ng-attr-title="form.name">
                                     <i class="icon-umb-contour"></i>
                                     <span class="formLine">{{form.name}}</span>
                                 </a>
                             </li>
                         </ul>
                     </div>
+                    <div class="dynOverlayGroup">
+                        <umb-toggle checked="vm.iFrameEmbedded"
+                                    on-click="vm.toggleRenderMode()"
+                                    show-labels="true"
+                                    label-on="Render with iFrame"
+                                    label-off="Render with Script"
+                                    label-position="right"
+                                    hide-icons="true">
+                        </umb-toggle>
+                    </div>
                 </umb-box-content>
             </umb-box>
         </umb-editor-container>
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Configuration/DynamicsSettings.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Configuration/DynamicsSettings.cs
@@ -9,8 +9,12 @@ public DynamicsSettings() { }
         public DynamicsSettings(NameValueCollection appSettings)
         {
             InstanceUrl = appSettings[Constants.UmbracoCmsIntegrationsCrmDynamicsInstanceUrlKey];
+
+            InstanceWebApiUrl = appSettings[Constants.UmbracoCmsIntegrationsCrmDynamicsInstanceWebApiUrlKey];
         }
 
         public string InstanceUrl { get; set; }
+
+        public string InstanceWebApiUrl { get; set; }
     }
 }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Constants.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Constants.cs
@@ -11,6 +11,30 @@ public class Constants
 
         public const string UmbracoCmsIntegrationsCrmDynamicsInstanceUrlKey = "Umbraco.Cms.Integrations.Crm.Dynamics.InstanceUrl";
 
+        public const string UmbracoCmsIntegrationsCrmDynamicsInstanceWebApiUrlKey = "Umbraco.Cms.Integrations.Crm.Dynamics.InstanceWebApiUrl";
+
+        public const string AppPluginFolderPath = "~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics";
+
+        public static class RenderingComponent
+        {
+            public const string DefaultViewPath = AppPluginFolderPath + "/Render/DynamicsForm.cshtml";
+
+            public const string DefaultV8ViewPath = AppPluginFolderPath + "/Render/DynamicsFormV8.cshtml";
+        }
+
+        public static class EmbedAttribute
+        {
+            public const string DataFormBlockId = "data-form-block-id";
+
+            public const string ContainerId = "id";
+
+            public const string ContainerClass = "class";
+
+            public const string DataWebsiteId = "data-website-id";
+
+            public const string DataHostname = "data-hostname";
+        }
+
         public static class Configuration
         {
             public const string Settings = "Umbraco:Cms:Integrations:Crm:Dynamics:Settings";
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Controllers/FormsController.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Controllers/FormsController.cs
@@ -138,7 +138,7 @@ public async Task<ResponseDto<FormDto>> GetForms()
             var requestMessage = new HttpRequestMessage
             {
                 Method = HttpMethod.Get,
-                RequestUri = new Uri($"{_settings.InstanceUrl}msdyncrm_marketingforms")
+                RequestUri = new Uri($"{_settings.InstanceWebApiUrl}msdyncrm_marketingforms")
             };
             requestMessage.Headers.Authorization =
                 new AuthenticationHeaderValue("Bearer", oauthConfiguration.AccessToken);
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Editors/DynamicsFormPickerValueConverter.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Editors/DynamicsFormPickerValueConverter.cs
@@ -1,10 +1,8 @@
 ﻿using Newtonsoft.Json;
 using Newtonsoft.Json.Linq;
-
 using System;
-
+using Umbraco.Cms.Integrations.Crm.Dynamics.Helpers;
 using Umbraco.Cms.Integrations.Crm.Dynamics.Models.ViewModels;
-using Umbraco.Cms.Integrations.Crm.Dynamics.Services;
 
 #if NETCOREAPP
 using Microsoft.Extensions.Options;
@@ -30,7 +28,22 @@ public override object ConvertSourceToIntermediate(IPublishedElement owner, IPub
         {
             if (source == null) return null;
 
-            return JsonConvert.DeserializeObject<FormViewModel>(source.ToString());
+            var jObject = JObject.Parse(source.ToString());
+
+            var embedCode = jObject["embedCode"].ToString();
+            var iFrameEmbedd = (bool)jObject["iFrameEmbedded"];
+
+            var vm = new FormViewModel
+            {
+                IFrameEmbedded = iFrameEmbedd,
+                FormBlockId = embedCode.ParseAttributeValue(Constants.EmbedAttribute.DataFormBlockId),
+                ContainerId = embedCode.ParseAttributeValue(Constants.EmbedAttribute.ContainerId),
+                ContainerClass = embedCode.ParseAttributeValue(Constants.EmbedAttribute.ContainerClass),
+                WebsiteId = embedCode.ParseAttributeValue(Constants.EmbedAttribute.DataWebsiteId),
+                Hostname = embedCode.ParseAttributeValue(Constants.EmbedAttribute.DataHostname)
+            };
+
+            return vm;
         }
     }
 }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Helpers/DynamicsHtmlExtensions.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Helpers/DynamicsHtmlExtensions.cs
@@ -14,14 +14,18 @@ namespace Umbraco.Cms.Integrations.Crm.Dynamics.Helpers
     public static class DynamicsHtmlExtensions
     {
 #if NETCOREAPP
-        public static IHtmlContent RenderDynamicsForm(this IHtmlHelper<dynamic> htmlHelper, FormViewModel formVM)
+        public static IHtmlContent RenderDynamicsForm(this IHtmlHelper<dynamic> htmlHelper, FormViewModel formVM, string renderingViewPath = "")
         {
-            return htmlHelper.Partial("~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV9.cshtml", formVM);
+            return htmlHelper.Partial(string.IsNullOrEmpty(renderingViewPath) 
+                ? Constants.RenderingComponent.DefaultViewPath : renderingViewPath,
+                formVM);
         }
 #else
-        public static IHtmlString RenderDynamicsForm(this HtmlHelper helper, FormViewModel formVM)
+        public static IHtmlString RenderDynamicsForm(this HtmlHelper helper, FormViewModel formVM, string renderingViewPath = "")
         {
-            return helper.Partial("~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV8.cshtml", formVM);
+            return helper.Partial(string.IsNullOrEmpty(renderingViewPath)
+                ? Constants.RenderingComponent.DefaultV8ViewPath : renderingViewPath,
+                formVM);
         }
 #endif
     }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Helpers/EmbedCodeExtensions.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Helpers/EmbedCodeExtensions.cs
@@ -0,0 +1,36 @@
+﻿using System.Text.RegularExpressions;
+
+namespace Umbraco.Cms.Integrations.Crm.Dynamics.Helpers
+{
+    public static class EmbedCodeExtensions
+    {
+        /// <summary>
+        /// Read <div></div> tags attributes like id, class, data- from input HTML using Regular Expressions.
+        /// </summary>
+        /// <param name="html"></param>
+        /// <param name="attributeKey"></param>
+        /// <returns></returns>
+        public static string ParseAttributeValue(this string html, string attributeKey)
+        {
+            string divPattern = @"<\s*{0}[^>]*>(.*?)<\s*/{0}\s*>";
+            string attributePattern = @"{0}=""([^""]*)""";
+
+            MatchCollection divs = Regex.Matches(html, string.Format(divPattern, "div"));
+
+            foreach (Match divMatch in divs)
+            {
+                if (Regex.IsMatch(divMatch.Value, string.Format(attributePattern, attributeKey)))
+                {
+                    string attribute = Regex.Match(divMatch.Value, string.Format(attributePattern, attributeKey)).Value;
+
+                    return string.IsNullOrEmpty(attribute)
+                        ? string.Empty
+                        : attribute.Substring(attributeKey.Length + 1).Replace("\"", string.Empty);
+                }
+            }
+
+            return string.Empty;
+        }
+
+    }
+}
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Models/ViewModels/FormViewModel.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Models/ViewModels/FormViewModel.cs
@@ -4,13 +4,22 @@ namespace Umbraco.Cms.Integrations.Crm.Dynamics.Models.ViewModels
 {
     public class FormViewModel
     {
-        [JsonProperty("id")]
-        public string Id { get; set; }
+        [JsonProperty("iFrameEmbedded")]
+        public bool IFrameEmbedded { get; set; }
 
-        [JsonProperty("name")]
-        public string Name { get; set; }
+        [JsonProperty("formBlockId")]
+        public string FormBlockId { get; set; }
 
-        [JsonProperty("embedCode")]
-        public string EmbedCode { get; set; }
+        [JsonProperty("containerId")]
+        public string ContainerId { get; set; }
+
+        [JsonProperty("containerClass")]
+        public string ContainerClass { get; set; }
+
+        [JsonProperty("websiteId")]
+        public string WebsiteId { get; set; }
+
+        [JsonProperty("hostname")]
+        public string Hostname { get; set; }
     }
 }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Services/AuthorizationService.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Services/AuthorizationService.cs
@@ -1,10 +1,4 @@
-﻿
-using System;
-using System.Net.Http;
-using System.Net.Http.Headers;
-using System.Threading.Tasks;
-using Newtonsoft.Json.Linq;
-using Umbraco.Cms.Integrations.Crm.Dynamics.Configuration;
+﻿using Umbraco.Cms.Integrations.Crm.Dynamics.Configuration;
 
 #if NETCOREAPP
 using Microsoft.Extensions.Options;
@@ -16,6 +10,8 @@ namespace Umbraco.Cms.Integrations.Crm.Dynamics.Services
 {
     public class AuthorizationService : IAuthorizationService
     {
+        private readonly DynamicsSettings _settings;
+
         public const string ClientId = "813c5a65-cfd6-48d6-8928-dffe02aaf61a";
 
         public const string RedirectUri = OAuthProxyBaseUrl;
@@ -26,12 +22,28 @@ public class AuthorizationService : IAuthorizationService
 
         public const string OAuthProxyTokenEndpoint = "{0}oauth/v1/token";
 
-        protected const string OAuthScopes = "https://org069121b1.api.crm4.dynamics.com/.default";
+        protected const string OAuthScopes = "{0}.default";
 
         protected const string DynamicsAuthorizationUrl =
             "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id={0}&response_type=code&redirect_uri={1}&response_mode=query&scope={2}";
 
-        public string GetAuthorizationUrl() =>
-            string.Format(DynamicsAuthorizationUrl, ClientId, OAuthProxyBaseUrl, OAuthScopes);
+#if NETCOREAPP
+        public AuthorizationService(IOptions<DynamicsSettings> options)
+        {
+            _settings = options.Value;
+        }
+#else
+        public AuthorizationService()
+        {
+            _settings = new DynamicsSettings(ConfigurationManager.AppSettings);
+        }
+#endif
+
+        public string GetAuthorizationUrl()
+        {
+            var scopes = string.Format(OAuthScopes, _settings.InstanceUrl);
+            return string.Format(DynamicsAuthorizationUrl, ClientId, OAuthProxyBaseUrl, scopes);
+        }
+            
     }
 }
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Services/DynamicsService.cs b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Services/DynamicsService.cs
@@ -52,7 +52,7 @@ public async Task<IdentityDto> GetIdentity(string accessToken)
             var requestMessage = new HttpRequestMessage
             {
                 Method = HttpMethod.Get,
-                RequestUri = new Uri($"{_settings.InstanceUrl}systemusers")
+                RequestUri = new Uri($"{_settings.InstanceWebApiUrl}systemusers")
             };
             requestMessage.Headers.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
 
@@ -74,7 +74,7 @@ public async Task<string> GetEmbedCode(string formId)
             var requestMessage = new HttpRequestMessage
             {
                 Method = HttpMethod.Get,
-                RequestUri = new Uri($"{_settings.InstanceUrl}msdyncrm_formpages?$select=msdyncrm_javascriptcode,_msdyncrm_marketingformid_value" +
+                RequestUri = new Uri($"{_settings.InstanceWebApiUrl}msdyncrm_formpages?$select=msdyncrm_javascriptcode,_msdyncrm_marketingformid_value" +
                     $"&$filter=_msdyncrm_marketingformid_value eq {formId}")
             };
             requestMessage.Headers.Authorization = new AuthenticationHeaderValue("Bearer", oauthConfiguration.AccessToken);
@@ -95,7 +95,7 @@ private async Task<string> GetUserId(string accessToken)
             var requestMessage = new HttpRequestMessage
             {
                 Method = HttpMethod.Get,
-                RequestUri = new Uri($"{_settings.InstanceUrl}WhoAmI")
+                RequestUri = new Uri($"{_settings.InstanceWebApiUrl}WhoAmI")
             };
             requestMessage.Headers.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
 
diff --git a/src/Umbraco.Cms.Integrations.Crm.Dynamics/Umbraco.Cms.Integrations.Crm.Dynamics.csproj b/src/Umbraco.Cms.Integrations.Crm.Dynamics/Umbraco.Cms.Integrations.Crm.Dynamics.csproj

Original file line number	Diff line number	Diff line change
`@@ -9,8 +9,12 @@ public DynamicsSettings() { }`
`9`	`9`	`public DynamicsSettings(NameValueCollection appSettings)`
`10`	`10`	`{`
`11`	`11`	`InstanceUrl = appSettings[Constants.UmbracoCmsIntegrationsCrmDynamicsInstanceUrlKey];`
	`12`	`+`
	`13`	`+ InstanceWebApiUrl = appSettings[Constants.UmbracoCmsIntegrationsCrmDynamicsInstanceWebApiUrlKey];`
`12`	`14`	`}`
`13`	`15`
`14`	`16`	`public string InstanceUrl { get; set; }`
	`17`	`+`
	`18`	`+ public string InstanceWebApiUrl { get; set; }`
`15`	`19`	`}`
`16`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -138,7 +138,7 @@ public async Task<ResponseDto<FormDto>> GetForms()`
`138`	`138`	`var requestMessage = new HttpRequestMessage`
`139`	`139`	`{`
`140`	`140`	`Method = HttpMethod.Get,`
`141`		`- RequestUri = new Uri($"{_settings.InstanceUrl}msdyncrm_marketingforms")`
	`141`	`+ RequestUri = new Uri($"{_settings.InstanceWebApiUrl}msdyncrm_marketingforms")`
`142`	`142`	`};`
`143`	`143`	`requestMessage.Headers.Authorization =`
`144`	`144`	`new AuthenticationHeaderValue("Bearer", oauthConfiguration.AccessToken);`
Original file line number	Diff line number	Diff line change
`@@ -14,14 +14,18 @@ namespace Umbraco.Cms.Integrations.Crm.Dynamics.Helpers`
`14`	`14`	`public static class DynamicsHtmlExtensions`
`15`	`15`	`{`
`16`	`16`	`#if NETCOREAPP`
`17`		`- public static IHtmlContent RenderDynamicsForm(this IHtmlHelper<dynamic> htmlHelper, FormViewModel formVM)`
	`17`	`+ public static IHtmlContent RenderDynamicsForm(this IHtmlHelper<dynamic> htmlHelper, FormViewModel formVM, string renderingViewPath = "")`
`18`	`18`	`{`
`19`		`- return htmlHelper.Partial("~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV9.cshtml", formVM);`
	`19`	`+ return htmlHelper.Partial(string.IsNullOrEmpty(renderingViewPath)`
	`20`	`+ ? Constants.RenderingComponent.DefaultViewPath : renderingViewPath,`
	`21`	`+ formVM);`
`20`	`22`	`}`
`21`	`23`	`#else`
`22`		`- public static IHtmlString RenderDynamicsForm(this HtmlHelper helper, FormViewModel formVM)`
	`24`	`+ public static IHtmlString RenderDynamicsForm(this HtmlHelper helper, FormViewModel formVM, string renderingViewPath = "")`
`23`	`25`	`{`
`24`		`- return helper.Partial("~/App_Plugins/UmbracoCms.Integrations/Crm/Dynamics/Render/DynamicsFormV8.cshtml", formVM);`
	`26`	`+ return helper.Partial(string.IsNullOrEmpty(renderingViewPath)`
	`27`	`+ ? Constants.RenderingComponent.DefaultV8ViewPath : renderingViewPath,`
	`28`	`+ formVM);`
`25`	`29`	`}`
`26`	`30`	`#endif`
`27`	`31`	`}`