OAuth Authentication | Blocked loading mixed active content

oauth

#1

Hi,

We are using hubspot API for authentication. Once user enter credentials, these are verified using following URL, as mentioned in hubspot docs

https://app.hubspot.com/auth/authenticate?client_id=&portalId=&redirect_uri=&scope=contacts-rw+offline

In this URL, clientId, portalId and redirect URL are added dynamically and the URL changes to following in our case
https://app.hubspot.com/auth/authenticate?client_id=b593dc8b-de30-4349-a2e9-1390b54ca268&portalId=xxxxxxx&redirect_uri=https://qa.at-event.com/central/getresponsefromhubspot&scope=contacts-rw+offline

You can see that we are specifying https in this request and our redirect URL is also using SSL.

If correct portal and client Id are specified, user is redirected to login screen, otherwise this error page is displayed. Now, the error page is on http and our app is using https. This creates mixed active content error and this error page is not displayed in iframe.

Mixed Content: The page at 'https://qa.at-event.com/central/myaccount' was loaded over HTTPS, but requested an insecure resource 'http://static.hubspot.com/html/missing_parameter.html'. This request has been blocked; the content must be served over HTTPS.

I want to display exact error message in iframe so that user can correct client/portal Id. This used to work before as well.

Similarly, if user enters valid client id and portal id and is not currently logged into hubspot, he is redirected to login screen. Once valid credentials are entered, user must be redirected to authorize screen. This is done by following URL of hubspot:

https://app.hubspot.com/login/?loginPortalId=2627491&loginRedirectUrl=http%3A%2F%2Fapp.hubspot.com%2Fauth%2Fauthenticate%3Fclient_id%3Db593dc8b-de30-4349-a2e9-1390b54ca268%26portalId%3D2627491%26redirect_uri%3Dhttps%3A%2F%2Fqa.at-event.com%2Fcentral%2Fgetresponsefromhubspot%26scope%3Dcontacts-rw%2Boffline

This URL generates following error in console:

Mixed Content: The page at 'https://qa.at-event.com/central/myaccount' was loaded over HTTPS, but requested an insecure resource 'http://app.hubspot.com/auth/authenticate?client_id=b593dc8b-de30-4349-a2e9-….at-event.com%2Fcentral%2Fgetresponsefromhubspot&scope=contacts-rw+offline'. This request has been blocked; the content must be served over HTTPS.

I have tried using relative URL as mentioned in knowledge base article https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-do-i-resolve-mixed-content-warnings-on-an-ssl-site. It used to work fine with relative URL but now I get same exception in console.

Kindly let us know a way to ensure that all URLs from hubspot use SSL.


#2

Hi @Faryal

Is this something that just stopped working recently? There haven’t been any recent changes to that system, but it was never intended to support being used in an iframe (the OAuth specification actually recommends against that).

I’d recommend taking a look at our new OAuth 2.0 authentication:

The new system has an improved authentication flow that allows users to select the portal they want to use with the app, instead of requiring the portalId before starting the auth process.


#3

Hi,

Thanks for the update. I am not sure when exactly it stooped working but it worked before.

As per your recommendation we are switching to OAuth 2.0 with redirect instead of iframe.

We are a lead gathering company. People push leads/contacts to hub spot using their own credentials. I have few questions related to the app being used for OAuth authentication. Currently we are creating it using our developer account.

  1. If we migrate to OAuth 2.0, I am assuming that we’ll provide clientId and client secret of our app to authorize. How will this app be linked to customers sales/marketing portal?
  2. If I create an app say “atEvent App” in my developer account, will it be accessible to other clients?
  3. How can they integrate this app with their system so that contacts are pushed to their portal instead of our test portal?

#4

OAuth 2.0 works very similarly to Oauth1 as far as connecting to individual portals goes. You can use the client Id and secret from your existing app, as they’re forward compatible with OAuth 2. You’d still send an individual HubSpot user through the new authorization process, after which you’d get a code, that you’d use to get an access token for the specific portal that the HubSpot user authorized.

The app gets created and managed in your developer portal, but the app can be authorized with any HubSpot portal (assuming the scopes you need are available to the to the portal).


#5

I am still unclear how our app will work with other customers’ portals. I am assuming,

  1. Once users enter client id, he’ll be redirected to login screen, where he will enter credentials for his own live/production account.
  2. Now, he’ll be asked for selecting portal from this screen and this will show portals associated with customer’s account.
  3. After this, he’ll authorize our app to access data from live account of customer.
  4. On successful authentication, he’ll be redirected to our app with code, which we’ll use to get access token.
  5. Once we have access token, we can push contacts to individual customer’s account. And these contacts should be visible in customer’s production instance.

Please correct me if the actual flow is different than above mentioned steps.


#6

@Faryal that’s mostly correct. The only thing would be that you would need to provide the client_id to the customer as part of the authorization URL you build; they wouldn’t enter that anywhere themselves. That URL also requires the scopes and the redirect_uri that gets them back to your app, so you’d want to build that URL then provide that to the customer.

Once they click that URL, they’ll be presented with a list of HubSpot accounts they have access to (they’ll be forced to login first if they aren’t already). Steps 2-5 would be as you stated.


#7

hi @dadams,

Thanks for your feedback. I have successfully implemented this flow at our end. However, I want to confirm one thing related to error handling flow. If a user gets an error on hubspot authentication, for example, scopes are not allowed for logged in user or event user credentials are not valid, user is not redirected back to our application. The authorization URL only returns error, if there is any issue with client id or client secret. How can I enforce user to go back to our application with some error message if there is any error in authorization related to credentials or access?