refresh access token for google calendar api using javascript (react) - javascript

i am using the google calendar api to write events to my organization's calendar, but i cannot figure out how to refresh the access token so that my program can use the calendar for more than an hour at a time.
to recreate the error:
generate oauth client id and client secret from your project's google cloud console
select calendar and calender.events scope at https://developers.google.com/oauthplayground
exchange the Authorization Code generated by Google's OAuth Playground for a refresh token and a temporary access token
list https://developers.google.com/oauthplayground as a valid redirect uri for your client on your project's cloud console
attempt to refresh your access token using your client id and client secret from your cloud console
THE PROBLEM
Google's OAuth playground access token expires after 3600s (1hr). I am able to refresh the access token using google's stand-in client credentials, but when I try to make the request (either from the playground itself or from postman), I am met with the following error message
{
"error_description": "Unauthorized",
"error": "unauthorized_client"
}
I have verified that the oauth playground is listed as a valid redirect uri for my client in the cloud console. I have also compared my POST request to the one google sends when refreshing the access token with placeholder credentials to ensure that I am sending all necessary params.
REQUESTS/RESPONSES
POST request on Oauth playground using google's default client credentials
POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-length: 223
content-type: application/x-www-form-urlencoded
user-agent: google-oauth-playground
client_secret=************&grant_type=refresh_token&refresh_token=1%2F%2F04qg5N0zhIRbPCgYIARAAGAQSNwF-L9IrTEZny7y_4wpbjLUh7ImtWRu473AQeTG3NG49ogQVzDZJe99BnS1TwFjwX7S2mNbLOYQ&client_id=407408718192.apps.googleusercontent.com
Response from Google's oauth playground when making the above request
HTTP/1.1 200 OK
Content-length: 385
X-xss-protection: 0
X-content-type-options: nosniff
Transfer-encoding: chunked
Expires: Mon, 01 Jan 1990 00:00:00 GMT
Vary: Origin, X-Origin, Referer
Server: scaffolding on HTTPServer2
-content-encoding: gzip
Pragma: no-cache
Cache-control: no-cache, no-store, max-age=0, must-revalidate
Date: Wed, 31 Aug 2022 22:13:53 GMT
X-frame-options: SAMEORIGIN
Alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
Content-type: application/json; charset=utf-8
{
"access_token": "ya29.a0AVA9y1sTkPpmJIHvIBNODwdXr36hzumPEmoJGFBB1y29SZVwiE_QBy7RuTjDNzPkKyBOJ7RD1LBceTooeUZuNl-wN5dkyqsjFF5ynMkcShwG_yADXazPUFXngsSGuW_WRuVR01s9FOnv2N5gzkPldvQEtLaZaCgYKATASAQASFQE65dr8ZDuFe5BQyBG8ostdxK5ObQ0163",
"scope": "https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar",
"expires_in": 3599,
"token_type": "Bearer"
}
POST request to google's Oauth playground using MY client credentials
POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-length: 279
content-type: application/x-www-form-urlencoded
user-agent: google-oauth-playground
client_secret=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&grant_type=refresh_token&refresh_token=1%2F%2F04qg5N0zhIRbPCgYIARAAGAQSNwF-L9IrTEZny7y_4wpbjLUh7ImtWRu473AQeTG3NG49ogQVzDZJe99BnS1TwFjwX7S2mNbLOYQ&client_id=804898855072-r91v64ojblf83if1pe9f8vr4mumubecc.apps.googleusercontent.com
Response from Google's oauth playground when making the above request
HTTP/1.1 401 Unauthorized
Content-length: 75
X-xss-protection: 0
X-content-type-options: nosniff
Transfer-encoding: chunked
Expires: Mon, 01 Jan 1990 00:00:00 GMT
Vary: Origin, X-Origin, Referer
Server: scaffolding on HTTPServer2
-content-encoding: gzip
Pragma: no-cache
Cache-control: no-cache, no-store, max-age=0, must-revalidate
Date: Wed, 31 Aug 2022 22:16:15 GMT
X-frame-options: SAMEORIGIN
Alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
Content-type: application/json; charset=utf-8
{
"error_description": "Unauthorized",
"error": "unauthorized_client"
}
Any guidance is greatly appreciated. Google seriously needs some better docs!

unauthorized_client
Normally means that the client id and client secrete you are using with a refresh token is not the client id and client secret that were used to create it.
You should not be using playground to create tokens. You should be creating them in your app and refreshing them in your app.
Remember you can not refresh an token using a client side language. I am not a reactJs dev so if this is running client side that could also be the cause of your error. Use a server sided language.

Related

Unable to display embedded Shopify app due to X-Frame-Options: SAMEORIGIN

I'm migrating a Shopify app from EASDK to App-Bridge. I have replaced the old API calls with the new ones, but the app is not loaded in the Shopify admin panel. I get an error in a JS console
Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN
the wget command shows this:
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Transfer-Encoding: chunked
Connection: keep-alive
Status: 200 OK
Cache-Control: max-age=0, private, must-revalidate
Vary: Accept
Referrer-Policy: strict-origin-when-cross-origin
X-Permitted-Cross-Domain-Policies: none
X-XSS-Protection: 1; mode=block
X-Request-Id: 91a511cf-d434-43af-96b8-318356bbbb9a
Link: </assets/application-63f0e6a6cb6a5ecd85ba82b031064ed920a1015deae96cc86bf3de0f7f1c5eaf.css>; rel=preload; as=style; nopush,</assets/application-3111a09ab2c1b26ba99f1c96028fdc2f1677b792d7407284f5182655a8a722d7.js>; rel=preload; as=script; nopush
X-Download-Options: noopen
ETag: W/"e8fc9609e43ff20b0c13c3000ecf4f26"
X-Frame-Options: SAMEORIGIN
X-Runtime: 0.004762
X-Content-Type-Options: nosniff
Date: Tue, 29 Mar 2022 09:59:33 GMT
Set-Cookie: _product_image_slider_session=rpnUJ5yt9PH0EEIHRo4p0RWSKraymAdpsqLh%2BPHGuNx6VU25KhA%2BBxvY4nJDHgSkxQBbacT7SyG%2BGna9bpYxCS7sWGUliu3mlPKM7Df13xbfA%2F8B%2BZ%2FKhC0E00ulV990mmeCkaV0GrrsokmodJZRg76R1ArJTNUoi4PQ54YnQCtiScogv8F38KLC2dJI%2B8eaI6j%2F0U2X6IN87nzm3RhP6dcQsNb1%2BjqvhnxScQuGW37nr84dMzpM4lJscWYElvC6cKqo3Wa897bLnkjFy46m%2BQvBo5KRXyIzqXM%2FJxyqy%2FeDUAv5qg%3D%3D--1h%2B8JkCqosbY%2FtH%2B--5mkT1eQTPoFBpn8nXLkFUQ%3D%3D; path=/; HttpOnly; SameSite=Lax
X-Powered-By: Phusion Passenger(R) 6.0.12
Server: nginx/1.18.0 + Phusion Passenger(R) 6.0.12
Strict-Transport-Security: max-age=31536000
X-Frame-Options: https://grid-kit.myshopify.com
I had a look through the nginx config and I cannot find anywhere this X-Frame-Options' to 'SAMEORIGIN header. I even added new header X-Frame-Options (see a screenshot) with the correct website, but this won't help. I just get a message of Multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, https://grid-kit.myshopify.com') encountered when loading 'https://app.gridkit.net/?
Where to find the solution?

Can't access x-request-id header with axios

I have a simple post request with axios:
axios.post('my endpoint', values).then(res => console.log(res.headers));
axios is listing those values as headers:
cache-control: "max-age=0, private, must-revalidate"
content-length: "13757"
content-type: "application/xml; charset=utf-8"
but when I check the network tab in chrome, I can see those values under response headers:
access-control-allow-origin: http://localhost:8080
access-control-expose-headers: Total,Total-Pages
cache-control: max-age=0, private, must-revalidate
content-length: 13757
content-type: application/xml; charset=utf-8
date: Thu, 02 Sep 2021 19:37:42 GMT
x-envoy-upstream-service-time: 385
x-request-id: FqEYfGCtbcHGzzwASr4C
I need to access the x-request-id header, but there is no way to get this with axios or fetch.
I saw some messages about the header being blocked by cors, but I have X-Request-Id in my access-control-allow-headers
Someone has any idea how to get this header with axios?
I think you have to specify this on the server so that axios has access to the specific headers you require.
https://stackoverflow.com/a/37931084/8818020

post request by javascript from other domains

As I know, when a POST request has been submitted, it sends Header and Parameters to the web server and it gets the response.
I saw a Javascript Post request in a website that it returns a response, but when I send that Post request from my website, it returns error :
500 Internal Server Error
HEADERS
Connection: close
Content-Type: text/plain;charset=UTF-8
Date: Mon, 30 Nov 2015 15:03:52 GMT
Server: Apache/2.2.15 (CentOS)
Set-Cookie: JSESSIONID=47C9E12F87FC7345358782F6DA7C00E0; Path=/; HttpOnly
Transfer-Encoding: chunked
X-Frame-Options: SAMEORIGIN
BODY
Internal Server Error!
Any help would be appreciated.

Internet Explorer doesn't redirect on ajax response

I send ajax post request to server and respond with 302 redirect. All browsers follow this redirect except IE. I see in Network tab of IE dev tools that 302 response is received.
Also jQuery .fail(function(jqXHR, textStatus) {...}) callback return the following data in jqXHR:
[object Object]{readyState: 0, status: 0, statusText: "error"}
Which is strange because status is not 302.
Testing on IE 11.
EDIT
Response headers:
Response HTTP/1.1 302 Found
Date Tue, 27 Oct 2015 12:24:47 GMT
Server Apache/2.4.10 (Debian) PHP/5.6.7-1
X-Powered-By PHP/5.6.7-1
Expires Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma no-cache
X-Redirect http://mysiteaddress.com/somepage/
Set-Cookie PHPSESSID=123; path=/; HttpOnly
Content-Length 0
Keep-Alive timeout=15, max=96
Connection Keep-Alive
Content-Type text/html; charset=UTF-8
EDIT2 I guess it's Yii2 framework-specific bug. Client script must handle X-REDIRECT header, but can't do this in IE. See: http://www.yiiframework.com/doc-2.0/yii-web-response.html#redirect()-detail.
It's Yii2 specific bug/behaviour when you use yii\web\Response::redirect() method.
Everything seem to work fine if you return code 200 instead of proper redirection code 302.
See:
http://www.yiiframework.com/doc-2.0/yii-web-response.html#redirect()-detail and
https://github.com/yiisoft/yii2/issues/9670

FourSquare API doesn't support CORS

The FourSquare API documentation states that it supports CORS. However calling to the /users/ endpoints clearly states that only GET requests are supported:
curl -X OPTIONS -i "https://api.foursquare.com/v2/users/self/checkins?oauth_token=CLIENT_OAUTH_TOKEN"
HTTP/1.1 405 Method Not Allowed
Access-Control-Allow-Origin: *
Cache-Control: no-cache, private, no-store
Content-Type: application/json; charset=utf-8
Date: Wed, 13 Feb 2013 04:31:54 GMT
Expires: Wed, 13 Feb 2013 04:31:54 GMT
Pragma: no-cache
Server: nginx/1.2.1
Tracer-Time: 17
Content-Length: 104
Connection: keep-alive
{"meta":{"code":405,"errorType":"other","errorDetail":"This endpoint only supports GET."},"response":{}}
Is this just particular to these API endpoints or has something changed?
I haven't looked into all the methods in the FourSquare API, but my guess is that FourSquare doesn't need to support preflight requests because all their API requests are simple. The docs here suggest that the API only supports GET and POST. If those requests don't have any custom headers, they will never need a preflight request.

Categories

Resources