Skip to content

Commit df4987e

Browse files
AndyButlandAndyButland
committed
Added automated callback from proxy site via window.opener.
1 parent d04bb27 commit df4987e

File tree

6 files changed

+71
-47
lines changed

6 files changed

+71
-47
lines changed

‎src/Umbraco.Forms.Integrations.Crm.Hubspot.OAuthProxy/Pages/Index.cshtml

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,30 @@
88
<h1 class="display-4">Umbraco Forms / Hubspot</h1>
99
@if (!string.IsNullOrEmpty(Model.AuthorizationCode))
1010
{
11-
<p>To complete the integration, please copy the following code and enter it in Umbraco using the form provided.</p>
11+
<div id="manual-complete" style="display: none">
12+
<p>To complete the integration, please copy the following code and enter it in Umbraco using the form provided.</p>
1213

13-
<p><input id="auth-code" type="text" value="@Model.AuthorizationCode" readonly style="width: 700px; font-size: 36px; text-align: center" /></p>
14+
<p><input id="auth-code" type="text" value="@Model.AuthorizationCode" readonly style="width: 700px; font-size: 36px; text-align: center" /></p>
1415

15-
<button onclick="copyToClipboard()">Copy To Clipboard</button>
16-
}
17-
</div>
16+
<button onclick="copyToClipboard()">Copy To Clipboard</button>
17+
</div>
18+
19+
<script>
20+
if (window.opener && typeof opener.postMessage === 'function') {
21+
opener.postMessage({ type: 'hubspot:oauth:success', url: location.href, code: '@Model.AuthorizationCode' }, '*');
22+
window.close();
23+
} else {
24+
document.getElementById("manual-complete").style.display = "block";
25+
}1
26+
27+
function copyToClipboard() {
28+
var authCodeInputElement = document.getElementById("auth-code");
29+
authCodeInputElement.select();
30+
authCodeInputElement.setSelectionRange(0, 99999);
31+
navigator.clipboard.writeText(authCodeInputElement.value);
32+
alert("Code copied to clipboard");
33+
}
34+
</script>
1835

19-
<script>
20-
function copyToClipboard() {
21-
var authCodeInputElement = document.getElementById("auth-code");
22-
authCodeInputElement.select();
23-
authCodeInputElement.setSelectionRange(0, 99999);
24-
navigator.clipboard.writeText(authCodeInputElement.value);
25-
alert("Code copied to clipboard");
2636
}
27-
</script>
37+
</div>

‎src/Umbraco.Forms.Integrations.Crm.Hubspot/App_Plugins/UmbracoForms.Integrations/Crm/Hubspot/hubspot-field-mapper-template.html

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,8 @@
77
<div ng-show="!vm.loading && vm.authorizationStatus === 'Unauthenticated'">
88
<p>Umbraco Forms is not configured with a HubSpot CRM account.</p>
99
<p>To do this you can either create and save an API key into the <i>UmbracoForms.config</i> file.</p>
10-
<p>Or you can follow the steps below to complete an OAuth connection.</p>
11-
<dl>
12-
<dt>Step 1.</dt>
13-
<dd>Click <a href="{{vm.authenticationUrl}}" target="_blank" style="text-decoration: underline">here</a> to authenticate with HubSpot.</dd>
14-
<dt>Step 2.</dt>
15-
<dd>Paste the authorization code below and click to complete the authentication.</dd>
16-
</dl>
10+
<p>Or you can click <a ng-click="vm.openAuth()" style="text-decoration: underline">here</a> to complete an OAuth connection.</p>
11+
<p><em>If your browser is unable to process the automated connection, paste the provided authorization code below and click to complete the authentication.</em></dd>
1712
<input type="text" placeholder="Enter authorization code" ng-model="vm.authorizationCode" />
1813
<umb-button type="button" disabled="vm.authorizationCode === ''" action="vm.authorize()" label="Authorize"></umb-button>
1914
</div>

‎src/Umbraco.Forms.Integrations.Crm.Hubspot/App_Plugins/UmbracoForms.Integrations/Crm/Hubspot/hubspotfields.component.js

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ angular
66
templateUrl: "/App_Plugins/UmbracoForms.Integrations/Crm/Hubspot/hubspot-field-mapper-template.html",
77
bindings: {
88
setting: "<"
9-
},
9+
},
1010
}
11-
);
11+
);
1212

1313
function HubSpotFieldsController($routeParams, umbracoFormsIntegrationsCrmHubspotResource, pickerResource, overlayService, notificationsService) {
1414
var vm = this;
1515

1616
vm.authorizationCode = "";
1717
vm.authenticationUrl = "";
18-
vm.loading = false;
18+
vm.loading = true;
1919
vm.authorizationStatus = "Unauthenticated";
2020

2121
function getFieldsForMapping() {
@@ -37,10 +37,11 @@ function HubSpotFieldsController($routeParams, umbracoFormsIntegrationsCrmHubspo
3737
description: x.description
3838
}
3939
});
40+
vm.loading = false;
4041
});
4142
}
4243

43-
vm.$onInit = function() {
44+
vm.$onInit = function () {
4445

4546
if (!vm.setting.value) {
4647
vm.mappings = [];
@@ -49,7 +50,6 @@ function HubSpotFieldsController($routeParams, umbracoFormsIntegrationsCrmHubspo
4950
}
5051

5152
umbracoFormsIntegrationsCrmHubspotResource.isAuthorizationConfigured().then(function (response) {
52-
vm.loading = false;
5353
if (response !== "Unauthenticated") {
5454
vm.authorizationStatus = response;
5555
getFieldsForMapping();
@@ -58,29 +58,47 @@ function HubSpotFieldsController($routeParams, umbracoFormsIntegrationsCrmHubspo
5858
vm.authorizationStatus = "Unauthenticated";
5959
umbracoFormsIntegrationsCrmHubspotResource.getAuthenticationUrl().then(function (response) {
6060
vm.authenticationUrl = response;
61+
vm.loading = false;
6162
});
6263
}
6364
});
64-
}
65+
};
66+
67+
vm.openAuth = function () {
68+
window.open(vm.authenticationUrl);
69+
};
70+
71+
// Setup the post message handler for automatic authentication without having to copy and paste the code from the proxy site.
72+
window.addEventListener("message", function (event) {
73+
if (event.data.type === "hubspot:oauth:success") {
74+
umbracoFormsIntegrationsCrmHubspotResource.authorize(event.data.code).then(function (response) {
75+
handleAuthorizationCallback(response);
76+
});
77+
}
78+
}, false);
79+
80+
function handleAuthorizationCallback(response) {
81+
if (response.success) {
82+
vm.authorizationStatus = "OAuth";
83+
vm.authorizationCode = "";
84+
notificationsService.showNotification({
85+
type: 0,
86+
header: "Authorization succeeded",
87+
message: "Your Umbraco Forms installation is now connected to your HubSpot account",
88+
});
89+
getFieldsForMapping();
90+
} else {
91+
notificationsService.showNotification({
92+
type: 2,
93+
header: "Authorization failed",
94+
message: response.errorMessage
95+
});
96+
}
97+
};
6598

6699
vm.authorize = function () {
67100
umbracoFormsIntegrationsCrmHubspotResource.authorize(vm.authorizationCode).then(function (response) {
68-
if (response.success) {
69-
vm.authorizationStatus = "OAuth";
70-
vm.authorizationCode = "";
71-
notificationsService.showNotification({
72-
type: 0,
73-
header: "Authorization succeeded",
74-
message: "Your Umbraco Forms installation is now connected to your HubSpot account",
75-
});
76-
getFieldsForMapping();
77-
} else {
78-
notificationsService.showNotification({
79-
type: 2,
80-
header: "Authorization failed",
81-
message: response.errorMessage
82-
});
83-
}
101+
handleAuthorizationCallback(response);
84102
});
85103
}
86104

@@ -131,7 +149,7 @@ function HubSpotFieldsController($routeParams, umbracoFormsIntegrationsCrmHubspo
131149
if (item) {
132150
return item.description;
133151
}
134-
152+
135153
return "";
136154
}
137155

‎src/Umbraco.Forms.Integrations.Crm.Hubspot/Services/HubspotContactService.cs

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ public class HubspotContactService : IContactService
3737
private const string OAuthScopes = "crm.objects.contacts.read%20crm.objects.contacts.write";
3838
private const string OAauthClientId = "1a04f5bf-e99e-48e1-9d62-6c25bf2bdefe";
3939

40-
private const string OAuthRedirectUrl = "https://hubspot-forms-auth.umbraco.com/";
41-
private const string OAuthTokenProxyUrl = "https://hubspot-forms-auth.umbraco.com/oauth/v1/token";
40+
private const string OAuthBaseUrl = "https://hubspot-forms-auth.umbraco.com/"; // For local testing: "https://localhost:44364/"
41+
private static string OAuthRedirectUrl = OAuthBaseUrl;
42+
private static string OAuthTokenProxyUrl = $"{OAuthBaseUrl}oauth/v1/token";
4243

4344
private const string AccessTokenCacheKey = "HubSpotOAuthAccessToken";
4445

‎src/Umbraco.Forms.Integrations.Crm.Hubspot/Umbraco.Forms.Integrations.Crm.Hubspot.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<PackageIconUrl></PackageIconUrl>
1212
<PackageProjectUrl>https://github.com/umbraco/Umbraco.Forms.Integrations</PackageProjectUrl>
1313
<RepositoryUrl>https://github.com/umbraco/Umbraco.Forms.Integrations</RepositoryUrl>
14-
<Version>1.1.0</Version>
14+
<Version>1.1.1</Version>
1515
<Authors>Umbraco HQ</Authors>
1616
<Company>Umbraco</Company>
1717
</PropertyGroup>

‎src/Umbraco.Forms.Integrations.Crm.Hubspot/package.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<info>
44
<package>
55
<name>Umbraco.Forms.Integrations.Crm.Hubspot</name>
6-
<version>1.0.0</version>
6+
<version>1.1.1</version>
77
<iconUrl></iconUrl>
88
<licence url="https://opensource.org/licenses/MIT">MIT</licence>
99
<url>https://github.com/umbraco/Umbraco.Forms.Integrations</url>

0 commit comments

Comments
 (0)