IntuitDeveloper / HelloWorld-PHP

Starter app in PHP using OAuth2 that demonstrates how to make a QBO API Call
Apache License 2.0
33 stars 46 forks source link

DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame. at http://localhost:3000/:33:33 #12

Open kenofrianeza opened 3 years ago

kenofrianeza commented 3 years ago

When clicking the "Connect to QuickBooks" button for the first time, a popup appears which displays a log-in page to QuickBooks. After logging in, a loading splash screen appears and then the pop-up suddenly closes. Looking at the browser console, I get the error stated in the title above. I suspect it has something to do with the site failing to obtain the access token from the pop-up because the pop-up's page has a different origin?

Code-creators-dev-team-iqmerchant commented 3 years ago

Dear Quickbooks,

The oAuth playground opens, and I can see the below error on browser web developer tools ->web console

DOMException: Permission denied to access property "document" on cross-origin object localhost:port:39:33

(39:33 corresponds to the below code index.php line column)

var win = window.open(url, 'connectPopup', parameters); var pollOAuth = window.setInterval(function () { try { if (win.document.URL.indexOf("code") != -1) { window.clearInterval(pollOAuth); win.close(); location.reload(); } } catch (e) { console.log(e) }

It looks like the PHP is not able to get the token, due to cross site scripting protection.

https://stackoverflow.com/questions/36333978/error-permission-denied-to-access-property-document

Please let me know if a workaround exists for this (like is there an auth portal that sends the token via API response)

Code-creators-dev-team-iqmerchant commented 3 years ago

This is expected issue, because of cross site scripting protection. The OAuth 2.0 would need a valid URI to redirect, and it should point to your Quickbooks Oauth resource. Reference: https://developer.intuit.com/app/developer/qbo/docs/develop/sdks-and-samples-collections/php See-> Connect to QuickBooks Online

Ensure your config.url has the local URI or the public facing URI, and same value present in the Oauth Keys.

For Example: setting on config.url -> 'oauth_redirect_uri' => http://localhost:5000/callback.php Setting in Playground -> Keys and OAuth-> Redirect URI setting( https://developer.intuit.com/app/developer/playground) Set the same URI -> http://localhost:5000/callback.php

Accordingly, change to public URI if your setup is public facing.