Google Picker refuses to load with error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided" - google-oauth

I am trying to load Google Picker.
I am using this npm package https://www.npmjs.com/package/google-picker
When loading the picker, the auth windows show up, and I can select my Google account.
After auth is done, it tries to open the Google Picker iframe.
It is at this point the iframe fails to load and I get the error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin
I have searched this issue and many solutions say make sure to add your domain to the authorized JS origins in google console
I have done this! The domain is definitely in the authorized domains for the client. Google sign in works with my app.. but I just can't seem to get the Picker to work.
I have tried both running from localhost and uploading to the server. But I get the same error.
The server I am using is HTTPS. And the iframe URL for picker is HTTPS too. So this should not be a problem.
What else can I try? I am out of options. I am following the API exactly. I have put in all the right keys.

From this SO post answer, it is cited that the issue is with the target origin which is https.
I believe this is an issue with the target origin being https. I
suspect it is because your iFrame url is using http instead of
https. Try changing the url of the file you are trying to embed to
be https.
For instance:
var id = getId(url);
return '//www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}
to be:
var id = getId(url);
return 'https://www.youtube.com/embed/' + id + '?showinfo=0&enablejsapi=1&origin=http://localhost:9000';
}

The reason Google Picker was not showing was actually unrelated to the console error.
Even though the console error appeared, the picker still works.
But I thought it was not working because I was using the pickadate library which had css that conflicts with Google Picker.
More info about that issue here: https://github.com/amsul/pickadate.js/issues/619

Related

$.get request shopify error

I've have weird issue, on dev theme (preview mode) $.get request works fine -> https://woolet-co.myshopify.com/blogs/news
but on active theme on main domain https://woolet.co/blogs/news there is an error, I can't figure it out why its happening.
If you try this code in console on both URLs you will see the response code error on main domain:
$.get('/admin/blogs/19692355/articles/229491718.json', function(data) {
console.log(data);
});
I guess that it's connected with domains, on https://woolet-co.myshopify.com/blogs/news $.get request works fine and on https://woolet.co/blogs/news it shows error in console.
I've tried to execute $.get request through Shopify Private App with login and password included but without any result.
This isn't working for you because your XMLHttpRequest is for a different domain than the one the page is on.
For this to properly work, you need to enable CORS. I would also suggest putting in the absolute URL of where this JSON file is located.
It would work on your preview mode. Because there both shop url and admin url are on same domain
https://woolet-co.myshopify.com/blogs/news
But when you try to browse using your real domain "https://woolet.co/". The domain from where you are making the get request and the domain from where the file is coming becomes different. ( https://woolet-co.myshopify.com/admin/blogs/19692355/articles/229491718.json )
As far i know you can not enable cors on shopify
and
It wont work because "https://woolet-co.myshopify.com/admin/blogs/19692355/articles/229491718.json" requires you to be logged it to the store as admin.
Try some other way.

unable to load an specific url without authentication

I want to show this following url but when I try to show it, it goes to authentication page while if you copy and paste this url in your browser it will show the requested page without authentication.
I am using phpdesigner and easyphp in which I confront this problem. I try using file_get_content, curl_init, ... but still can't show the following url.
Thanks in advance.
http://sepehrreservation.iranhrc.ir/Systems/FA/Reservation/Flight_NewReservation_Search.aspx?itinerary=THR|MHD|2017-02-28|

Support for multiple domains/subdomains in OneDrive File Picker for Web Apps

We have a CMS that powers over 2000 school websites. The admin sites for each of those websites are all under the same root domain, e.g. *.myadmin.com. We are working on integrating OneDrive File Picker on multiple pages in all of those admin sites.
We have an issue with the Redirect URLs in the API Settings. We tried to set the Root domain field to myadmin.com by setting Redirect URLs: to https://myadmin.com. In JavaScript, we initialize the File Picker like this:
WL.init({
client_id: window.OneDrive.clientId,
redirect_uri: ''
});
WL.fileDialog({
mode: "open",
select: "single"
});
That results in a popup window saying:
We're unable to complete your request. Microsoft account is experiencing technical problems. Please try again later.
In the address bar of the popup window, there's a further error description(url decoded):
error_description=The provided value for the input parameter 'redirect_uri' is not valid. The expected value is 'https://login.live.com/oauth20_desktop.srf' or a URL which matches the redirect URI registered for this client application.
Putting a specific url, like https://subdomain.myadmin.com/homepage, in the API Setting would make the Picker work on that specific page, but not on other pages. Looks like it's looking for an exact match. Obviously it's not practical for us to create a separate app for each page that uses OneDrive.
The problem can be solved by disabling Enhanced redirection security on the API Settings page. That option existed a few weeks ago when we created an app for development, but was marked as deprecated. Today when we created a new app for production, it wasn't there anymore, which I think is now enabled for all new apps.
We had a similar issue with Dropbox Drop-ins Chooser, but we were able to solve the problem by setting myadmin.com as the domain of the app.
Is there any work around for this problem?
Thanks for your help and suggestions.
The only way I could get this to work was
Make sure the exact single web page on a single domain is configured and working for one drive (the url running OneDrive needs to be correctly configured in Microsoft account Developer Center
Then use this page inside an iframe (even if it is a completely different domain)
then use postMessage to pass the data back to the parent iframe to utilise
a working copy (link may be removed at any time )
Testing OneDrive in an iframe
Other pertinent urls
browser support for postMessage
Browser support for postMessage on stackoverflow
postMessage documentation
Some example usage of postMessage
example usage of postMessage
another example of use of postMessage
You can add multiple Redirect URLs as long as all of them are in the same subdomain. Each redirection URL needs to be specified explicitly:
The bug with the Microsoft developer console mention is resolved if you put the root domain you want first, then the 2 sub domains.
Add 3 entires:
1. domain.com
2. sub1.domain.com
3. sub2.domain.com

Error: redirect_uri_mismatch

I've been looking for this answer and the other pages didn't help me.
I'm trying to use the google drive api for php. I am trying to test on my local environment and receive this error.
Error: redirect_uri_mismatch
The redirect URI in the request: urn:ietf:wg:oauth:2.0:oob did not match a registered redirect URI
Request Details
scope=https://www.googleapis.com/auth/drive
response_type=code
redirect_uri=urn:ietf:wg:oauth:2.0:oob
access_type=offline
display=page
prompt=consent
client_id=735129338633-0epug8n80jsg0t50ijn7our4a661nnk6.apps.googleusercontent.com
Here is the page for the api:
The url is in
localhost:8888/Spreadsheets/driver.php
What am I doing wrong?
Looks like the current Google OAuth2 integration requires enabling
Contacts API
Google+ API
from the Google Developers Console for the associated Project. In my log I noticed errors liek 403, Access Not Configured. Please use ....
The redirect URI (where the response is returned to) has to be correct and exactly as you registered in the APIs console, and the error is indicating that you haven't done that or you haven't done it correctly.
To get the redirect URI from console:
Go to the console for your project and look under API Access.
Open Credentials section (in left side)
You should see your client ID & secret there, along with there is a
list of redirect URIs. If you want to change it or it was wrong,
click edit settings and modify.
Even if your redirect uri is properly set in the console, a lot of times, when you've recently changed settings in the google dev console, it will still tell you there's a redirect mismatch. It's a surprisingly common occurrence.
You can try...
Waiting; some have had luck with this, indicating that google takes some amount of time to register recent changes.
If you don't mind reconfiguring your app, creating a new client id in the google dev console tends to fix this problem with consistent results.

Got origin_mismatch error in Google+ share api

I want to share some dynamic content on google+. For this I checked it https://developers.google.com/+/web/share/interactive#rendering_the_button_with_javascript
<head>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</head>
<body>
<button
class="g-interactivepost"
data-contenturl="http://www.pubandbar-network.co.uk/"
data-clientid="102180630313.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"> Share
</button>
</body>
But when executing I am getting this error
Error: origin_mismatch
Request Details
scope=https://www.googleapis.com/auth/plus.login
response_type=code token id_token gsession
access_type=online
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay554026710
origin=http://www.pubandbar-network.co.uk
state=1995523240|0.4607792083184853
display=page
client_id=102180630313.apps.googleusercontent.com
authuser=0
Please suggest how to fix this
Origin mismatch is normally caused by the Javascript origins not being set correctly in the API project console. You need to make sure that the Javascript origins match the domain from which your requests are coming and to which you are returning the user after sign in.
More details can be found in the developer documentation in the "Create a client ID and client secret" section.
Note: A common mistake here is to add javascript origins for http:// but not https:// (or vice versa). If you want to allow users to access your site from both then you need to list both in the javascript console.
Note (Thanks Bethel Goka): You must include the port number of your server in the javascript origins if a port number appears in the url when users access your site.
It worked for me by removing "www." from google console. I simply used http://example.com and it worked ...
For VS users:
Open Properties of your project and get Project URL:
This is your Javascript Origins
Change also the Redirect URIs. It should be your origins + "/oauth2callback"
For me:
(The error has the answer for you)
need to set javascript origin in google console api As
origin=**http://www.pubandbar-network.co.uk**
scope=https://www.googleapis.com/auth/plus.login
response_type=code token id_token gsession
access_type=online
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay554026710
*origin=http://www.pubandbar-network.co.uk*
state=1995523240|0.4607792083184853
display=page
client_id=102180630313.apps.googleusercontent.com
authuser=0
My default javascript origins is https://www ,
my website does not support https:// ,
I included http://www. http:// https://www. and https:// ,
it works.
If your client id, client secret, and your javascript origins url is correct you might want to check whether the port you're using is exactly the same with the url you put in for javascript origins. I mistyped mine by one digit: e, g localhost:888 instead of localhost:8888 and got that error because my javascript origins was localhost:8888 not 888
Just a little addition to Lee's answer: listing both the www.whatever.ext and whatever.ext forms of your URL in JavaScript origins may get rid of the error. That's what did the trick for my app.
I did a stupid thing which took a few minutes to resolve, so I thought I would post a warning in case somebody else falls in this trap.
In the console, when origins are displayed, 'Redirect URIs' come above 'Javascript origins'. When you open the edit pane, it's the other way around, so if you are not paying attention, you could paste your origins in the Redirect URIs field and ....
1: Open the Credentials page for your project.
2:Double-click on your OAuth 2.0 Web client in the client ID list.
3: Make sure that in the web client ID form, change the Authorized JavaScript origins field to http://localhost:8080 when you are running the server locally.
When running remotely add the corresponding appspot server url.
The most common oversight resulting in this error is forgetting to add both HTTP and HTTPS origins on the consent settings in the App Credentials dashboard.
To fix, go to https://console.cloud.google.com/apis/credentials?project=YOUR-APP-ID
Select the OAuth 2.0 client IDs if you had already created one.If not, you will have to create a new client ID for your origin.
Under Authorised JavaScript origins, add both https and http origins for you app if had not added both.
Log out from all google services from your browser.
I same had the problem for google + api sign in.I was getting Error:origin_mismatch and same details were there as they are in the question .. my javascript credentials had http://localhost:4567
but when I run the python file it opened the link as 0.0.0.0:4567 thats basically a localhost but when i changed the url in browser to http://localhost:4567 now the error was removed .. and my application was able to get the OAuth box .. and all went fine!!! this thing removed my error... Please let me know whether I was correct because I just started learning how to use apis
Please check the origin url set in google console for you WEB application/Android
and check the http or https because your site does not work on https (in general site).
You must read the developer guide here
https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide
Good luck !
I had this error trying to use the "Google Play Games Services Management Demo" and it was because of missing "www" in the URL
I fixed it by change JavaScript origins and redirect URIs in google console from http://0.0.0.0:4567 to http://localhost:4567, remember adding /oauth2callback after redirect URIs and change url on browser to http://localhost:4567