Google Auth API Javascript idpiframe initialization error on Chrome - javascript

I use GSuite and I'm coding a very simple web app to use Google Auth API, and I get an exception "idpiframe_initialization_failed".
Now I have the exact HTML as shown in the google Sample:
https://developers.google.com/api-client-library/javascript/samples/samples
1) I've created a project on the Google Developer Console
2) I setup the OAUTH authorization screen
3) I've created the client ID, creating restrictions and redirection URL
4) I've also created the API KEY
5) Finally I've enabled the People API, because discovery services was failing when setting the discoveryDocs parameter
With all of these steps, When I call the gapi.client.init, it raises an exception ONLY in chrome, I cannot understand why.
The code for initializing the API is:
gapi.client.init({
apiKey: 'MY_API_KEY',
discoveryDocs: ["https://people.googleapis.com/$discovery/rest?version=v1"],
clientId: 'MY_CLIENT_ID.apps.googleusercontent.com',
scope: 'profile'
}).then(function (response) {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
},function(reason){
console.log('onerror');
console.log(reason);
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
The code is running the error block, and the message is:
details: "Failed to read the 'localStorage' property from 'Window': Access is denied for this document."
error:"idpiframe_initialization_failed"
Any ideas why I'm coming into this error?
Thanks!

I encountered the same issue. After investing some time, found the reason. This error is because in chrome settings, you have the Block third-party cookies and site data option enabled.
It can be resolved by disabling this option:
"To find the setting, open Chrome settings, type "Content settings" in the search box, click the Content Settings button, and view the fourth item under Cookies."
Uncheck the box "Block third-party cookies and site data".
Hopefully this helps you in resolving your issue.

The problem is with Google's API console and how it handles creating credentials.
It only seems to work when I access it through the following url
https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin
There is a link that lets you create your app and the OAuth credentials.
When I go to the console and create it through that screen it doesn't seem to work.
After trying and re-create again and test with a fresh app I found out that the URL you add to the Authorized Javascript Origins doesn't always get added.
If everything is good then the url should be available in the credentials page

In my case, I just had to wait a bit for Google to take the origin into account. I cannot tell exactly how long it took. I waited ~30min. I then went to sleep and it was working the following morning.
Edit: Ooops I just realized I was using http:// and not https://. That was the actual problem.

I had the same problem and I searched for 3 days: Resolve " popup_closed_by_user" Go to your console.google go to your API MANAGE : Credentials:modify your credentials:
Authorized Javascript origin (http://localhost:port);
authorized redirect URI(http://localhost:port/auth/google/callback);
Example:|| Authorized Javascript origin (http://localhost:4200);
authorized redirect URI (http://localhost:4200/auth/google/callback)

Related

"redirect_uri_mismatch" when exchanging access token under "popup" mode

We build our web application and integrate with Google OAuth2 according to this doc Google Identity Services JavaScript SDK
We would like to use "popup" mode, but when trying to exchange access_token with authentication code, /token return error like "
{"error": "redirect_uri_mismatch","error_description": "Bad Request"}"
We have passed the redirect_url param when calling /token, and it is exactly the same one as configured on the credential page.
What's more weird is that when we switch to "redirect" mode, everything works fine. Same client_id, same client_secret, same grant_type, same redirect_uri.
I don't get it, it's like codes generated under redirect and popup mode are treated differently.
Any help? Thanks a lot!
Set the redirectUri in the OAuth2 client to "postmessage" to indicate that you've already sent the message.
It's an undocumented feature.
Google OAuth redirect_uri_mismatch when exchanging one-time-code for refresh token
As per doc you referenced, Google is not expecting a refirect_url in popup mode. Google will not send a redirect. Instead it will return auth code directly to your callback and the callback will have to send it to your server.

Linking Anonymous User Session with Google Account results in broken redirect

I am trying to link an anonymous mongodb stitch session to a Google account using the following code snippet from the docs:
function linkWithGoogleAccount() {
user
.linkUserWithRedirect(new GoogleRedirectCredential())
.then(_=> alert("getting here"))
.catch(console.error)
}
Further, I added http://localhost:8080 (where I develop the app) to the list of Allowed Request Origins.
With the above code, I expect to handle the OAuth redirect similar to the regular Google authentication (which works fine).
However, when the alert "getting here" is triggered I see a GET 400 error with URI https://eu-west-1.aws.stitch.mongodb.com/api/client/v2.0/app/myapp-abcde/auth/providers/oauth2-google/login?redirect=http://localhost:8080/&state=M2I...In0%3D&link=true&providerRedirectHeader=true. After accepting the alert I get redirected to localhost:8080/null.
I assume I misunderstand some aspects of the whole procedure (it's hard to debug) and would appreciate any help. Thanks!

Facebook {page-id}/tabs not working with v2 sdk

I have a web app that also integrates facebook login.
Since v1 is available only until 30th april 2015, I've changed the JS calls to use v2 sdk (sdk.js) but the {page-id}/tabs request no longer works.
Facebook responds with an error:
code: 200
message: "(#200) Requires either an app access token, or a page access token for this Page"
type: "OAuthException"
This is the api call:
checkForInstalledApp: function(pageId, callbackFunction){
FB.api(pageId+'/tabs/'+appid, function(response){
if (response && !response.error) {
callbackFunction(response.data.length > 0);
}
});
}
Changing back to all.js works just fine. Also the login is successful. Only {page-id}/tabs returns an error.. so far.
Anyone else encountered this issue?
According to the docs, you have to use a Page Token even for reading the tabs:
https://developers.facebook.com/docs/graph-api/reference/v2.2/page/tabs#read
I suggest trying it with a Page Token.
If you don´t know how to generate Page Tokens, the following links will help you:
https://developers.facebook.com/docs/facebook-login/access-tokens
http://www.devils-heaven.com/facebook-access-tokens/
Found the problem:
Even if in https://developers.facebook.com/docs/graph-api/reference/v1.0/page/tabs - Reading section - they specify that "A page access token is required to retrieve tabs for a Page" and we have the same thing mentioned in https://developers.facebook.com/docs/graph-api/reference/v2.2/page/tabs, if we check the changelog we see that "The tabs edge on the Page node now requires a Page token for GETs". So this is actually something v2 specific and it shouldn't appear in the v1 docs.
The tabs api call works if used like this: page.id+'/tabs?access_token='+page.access_token

How do I avoid this X-Frame-Options SAMEORIGIN error when running the Google "Hello Analytics" API tutorial?

I've been trying to run the https://developers.google.com/analytics/solutions/articles/hello-analytics-api tutorial to get up and running with pulling data programmatically from Google Analytics.
I've copied the sample files exactly, but when I access them via localhost in Chrome, I get the following error in the JavaScript console, and get redirected to about:blank :
Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=363192057646-fbj7q1oais...%2Flocalhost&response_type=token&state=327475409%7C0.2024869166&authuser=0' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
I've tried all manner of tweaks but can't get this error to go away. Hope someone can assist (or indeed just direct me to a simple, working, Javascript example for accessing the Google Analytics API.
Please check the Authorized JavaScript origins
url in the Google API console in your Oauth Settings. This must be where you are authorising the javascript.
I was having the same issue yesterday but then I realised I was using the wrong Client ID on my Credentials.
You should double check if you created a 'Client ID for web application' on APIs & auth > Credentials. And then use that Client ID.
I my case, I wrongly created a 'Service Account' first and used that Client ID. Then I realised the mistake and created a 'Web Application' and replaced the Client ID on hello_analytics_api_v3_auth.js (according to the tutorial on https://developers.google.com/analytics/solutions/articles/hello-analytics-api).
Btw, don't forget to create a Public API Access key.
EDIT: if you are using the google example fix the following function:
function handleAuthResult(authResult) {
if (authResult) {
gapi.client.load('analytics', 'v3', handleAuthorized);
} else {
handleUnauthorized();
}
}
On the if statement, change to:
if (authResult && !authResult.error)
So you would end up with:
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
gapi.client.load('analytics', 'v3', handleAuthorized);
} else {
handleUnauthorized();
}
}
My colleague found the bug and made a pull request to fix it. I hope that sorts the issue now. It sorted for me ;-)
I was having the same issue with a Fusion table example I found online.
None of the answers I found online were useful at all but I finally solved the issue as follows:
Open the dev console in Chrome which shows the error and the url it is trying to access, open the Url in a new tab.
The page shows this:
400. That’s an error.
Error: invalid_request
Parameter not allowed for this message type: client_secret
So I edited the code:
function auth(immediate) {
gapi.auth.authorize({
client_id: clientId,
<!--client_secret: clientSecret,-->
scope: scopes,
immediate: immediate
}, handleAuthResult);
}
Et voila (:
I had this error message many times before.
Most of the time I just did call Google API inconsistently.
To figure out, click the URL in the dev. console. A new window opens and you get a message like this:
400.
That’s an error.
Error: invalid_scope
Some requested scopes were invalid ...
I got it to work by clearning my cookies.
--Solution posted in this similar issue here: Google+ API "400 (Bad Request)" and "Refused to display ... in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." errors

Can't submit anything to facebook page from facebook app

I now that this question was posted couple times but my problem is a little bit different. I try to submit for example event to my Page from Application.
I have private Profile on Facebook, Page and Application. Of course I'm admin of this page.
First thing I did was getting page access_token, so I went to https://developers.facebook.com/tools/explorer/ and in the URL I wrote /me/accounts/. Permission was set to manage_pages. I received access_token for my page.
Having access_token I connected my Application to the Page. So I made POST request to /[PAGE_ID]/tabs/ with app_id as a parameter and setting access_token of the Page. Now it's connected, I've checked it.
Now I try to submit some content by my Application. For example /[PAGE_ID]/events/ and passing parameters: name = Sample event, start_time = 2013-07-14T19:00:00-0700. And of course with the Application's access_token which I got by typing in the browser: https://graph.facebook.com/oauth/access_token?client_id=[APP_ID]&client_secret=[APP_SECRET]&grant_type=client_credentials. I got an error saying:
{
"error": {
"type": "Exception",
"message": "You must be an admin of the specified page to perform the requested action.",
"code": 1373019
}
}
I can post to this Page as a User but can't as an Application. My Application is of two types: Facebook Login and Facebook Tab. I've set permissions to publish_action and manage_pages publish_stream create_event.
What I did wrong?
Ok I solved the problem. Maybe it can be helpful for others. I don't know for what reason are those permissions https://developers.facebook.com/apps/[APP_ID]/permissions but the only thing I had to do was going to https://developers.facebook.com/tools/explorer/ and changing application from Graph API Explorer to my app and generating new access_token for privilages I needed. I don't know why they moved such crucial thing as permissions to the testing tool.

Categories