When calling prompt() from a browser that has a google session
google.accounts.id.initialize({
client_id: MY_GOOGLE_CLIENT_ID,
auto_select: false,
callback: handleCredentialResponse
})
google.accounts.id.prompt()
I get to see the one-tap showing up and a subsequent call to my handleCredentialResponse callback.
But, If I try from a different browser session (clean chrome session) that is not logged into google I see a 400 error when the js library tries to contact google:
https://accounts.google.com/gsi/status?client_id=MY_GOOGLE_CLIENT_ID&as=...
The actual response is
400. That’s an error.
The server cannot process the request because it is malformed.
It should not be retried. That’s all we know.
What do I need to do in order to show the 'sign-in with google' popup in such a case?
Related
I'm getting this response (with 401 error code) after using the new refreshed access token:
{'serviceErrorCode': 65601, 'code': 'REVOKED_ACCESS_TOKEN', 'message': 'The token used in the request has been revoked by the user'}
I followed this guide to refresh the access token:
https://learn.microsoft.com/en-us/linkedin/shared/authentication/programmatic-refresh-tokens?view=li-lms-2022-07#step-2-exchanging-a-refresh-token-for-a-new-access-token
Although it works after several seconds. It seems like the issue is from the LinkedIn-Ads API side. Is there an exact time to wait after generating the access token?
I want to send a test donation from my fronted web app. For this i use:
STREAMLABS API docs.
Vue v2.5.17 component with template:
<template>
<layout>
<h1>Dashboard</h1>
<p><label for="donationSum">Sum</label></p>
<p><input type="number" id="donationSum" v-model="amount"></p>
<button #click="makeDonation">DONATE</button>
</layout>
</template>
'makeDonation' is mapped action from Vuex:
makeDonation ({ getters }) {
const url = 'https://streamlabs.com/api/v1.0/donations'
const postData = JSON.stringify({
name: 'TEST',
identifier: 'TEST',
amount: 100.00,
currency: 'RUB',
access_token: getters.streamlabsAccessToken
})
axios.post(url, postData)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
console.log(error.response)
})
}
I am absolutely sure that I have the valid access_token, but I get an error 400:
POST https://streamlabs.com/api/v1.0/donations 400
{...}
POST https://streamlabs.com/api/v1.0/donations 400
{...}
Access to XMLHttpRequest at 'https://streamlabs.com/api/v1.0/donations' from
origin 'http://192.168.39.27:8080' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested resource.
Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:87)
undefined
This is normal server behavior. If something is wrong in the request, it gives 400 or 401 error, but there is a problem.
I can not get access to the body of the error, to understand what is wrong. Axios error.response is undefind and error has no useful information.
Screenshots:
Google Chrome 71.0.3578.80 x64 console log
Google Chrome 71.0.3578.80 x64 request details
Meanwhile Postman with the same postData makes a valid request and returns 200 response. If I corrupt the request (delete the access_token, for example), then it returns informative error:
{
"error": "invalid_request",
"error_description": "The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Check the \"access token\" parameter."
}
The big question: how do I get access to the body of the error that the STREAMLABS server returns?
I'm fairly certain that the error you're experiencing doesn't have anything to do with Axios or Vue. The reason the request is failing is that you're making it inside a browser: Browsers, at least nowadays, have pretty strict rules on what requests they allow and what requests they block.
I can not get access to the body of the error, to understand what is wrong. Axios error.response is undefined and error has no useful information.
That's because your browser is not allowed to show this information to you (or, to be more precise, the script you wrote). That's because of CORS. CORS makes sure that scripts can only interact with things that reside on their origin (the domain they're coming from) or sites that explicitly allow resource sharing (the RS in CORS). Streamlabs has simply not configured resource sharing for their API (I'll get to why in a second).
So why does your request work in Postman? Because Postman isn't a browser and doesn't care about CORS. Does that mean you can't use the Streamlabs API in your app? Not necessarily, you just have to do it on the server side because your server isn't a browser. This also has the benefit that you don't expose your access token to your users (which might be the reason why Streamlabs has not configured RS).
I often got message like the following when using my Meteor App:
09-15 22:42:52.400 3233 3233 I chromium: [INFO:CONSOLE(970)] "Error logging in with token: Error: You've been logged out by the server. Please log in again. [403]", source: http://localhost:12056/packages/meteor.js?hash=9725414143125e6990547986c27b473f43c89e8b (970)
I think it's because the token is expired for some reason (for example when I use Accounts.setPassword to change the user's password by force on server side, I will sure get this at next login attempt)
I don't want to know how to solve this question, I want to know, if there is an event or something else I can be informed when logged out by server, because I determine whether to go "main" page or "login" page by whether Meteor.userId() has value. when logged out by server, even Meteor.userId() has value, last login state is already invalid and re-login is needed.
EDIT: I was able to resolve the original error here when I realized my ROOT URL was set to my IP address rather than my domain. However, I now have a new issue. My client ID is the same as the original post below. This works fine in the local app, but in production, the popup flashes for a second and then the login box displays "Internal Server Error". I can't see any other messages that would explain it.
I am using the service-configuration package to load the settings, as follows:
ServiceConfiguration.configurations.upsert(
{ service: "google" },
{
$set: {
clientId: "************",
loginStyle: "popup",
secret: "***********"
}
}
);
If I add ?close to the end of my Authorized redirect URI, the Google popup comes up with a redirect_uri_mismatch error, showing the URI without ?close. I think there was an issue resolved here but it at least shows me that my project in Google is being recognized.
ORIGINAL POST
I am setting up an OAuth 2.0 client ID for accounts-google in Meteor and am seeing the following error:
400. That’s an error.
Error: invalid_request
Invalid parameter value for redirect_uri: Raw IP addresses not allowed:
http://***.***.***.***/_oauth/google
My Client ID in Google:
Authorized Javascript Origins
http://localhost:3000
http://myApp.com
Authorized redirect URIs
http://localhost:3000/_oauth/google
http://myApp.com/_oauth/google
I understand I must not be properly pointing the domain to the IP address. I have already set up an A record and the site works fine in other regards though, so not sure what step I missed.
I'm trying to update my angularjs app to support Firebase 1.1 (I was stick with Firebase 1.0.x).
It deprecates firebasesimplelogin, including authentication inside Firebase core.
I have been able to successfully implement authentication using
authWithOAuthPopup("<provider>", function(error, authData) { ... });
It accepts a callback, which is passed authentication data in authData.
On the contrary, I can't undersand how to use
authWithOAuthRedirect("<provider>", function(error) { ... });
Firebase Authentication docs page is very concise... :-(. This is all what is said:
Alternatively [instead of authWithOAuthPopup], you may prompt the user to login with a full browser redirect, and Firebase will automatically restore the session when you return to the originating page
How do I get authData, when Firebase - after redirection - returns to my page?
The authData is available by registering a listener directly on the ref (so before calling authWithOAuthRedirect).
ref.onAuth(function(authData) {
...
}
ref.authWithOAuthRedirect("google", function(error) { ... });
See https://www.firebase.com/docs/web/guide/user-auth.html#section-monitoring-authentication
I think I'm running into the same issue as you. I'm trying to do Facebook authentication.
First, I'd like to clarify the reproduction steps for my issue.
My app is loaded on the client.
User clicks login with Facebook.
ref.authWithOAuthRedirect('facebook', ...) is called.
Client is redirected to Facebook and Facebook redirects client back to Firebase app
Despite successful authentication with Facebook, the callback passed to onAuth() is invoked (only once) with authData === null.
The callback passed to onAuth() is not invoked a second time with correct authData.
However, reloading the app causes the callback passed to onAuth to be invoked with correct authData. The reasons for this are not known to me but I suspect race condition.
Here's my workaround.
Before calling ref.authWithOAuthRedirect('facebook', ...) set yourself a flag in sessionStorage.
sessionStorage.reload = true;
ref.authWithOAuthRedirect('facebook', ...)
When the client is redirected to your app back from Facebook, you should be able to check for this flag and reload the page if necessary.
if (sessionStorage.reload) {
delete sessionStorage.reload;
setTimeout(function() {
location.reload();
}, 1000)
}
setTimeout(function() { ... }, 1000) helps fight the assumed race condition. I found 500 ms is insufficient time for the race condition to be resolved.
And one small gotcha: if you reload the page too soon, then authData remains null no matter how many times you reload the page.