Giter Club home page Giter Club logo

browser-samples's Introduction

browser-samples

Browser samples for Google Workspace APIs docs.

APIs

Setup

  1. Clone this repository.
  2. Follow the README instructions in the API folder to run and test samples.

Troubleshooting

Here are some tips for troubleshooting errors when running these samples:

  • Be sure to create a local HTTP server to server the HTML page in the quickstart example. Otherwise the gapi client may encounter errors.
  • Check your browser console for errors. In Chrome, this is under View > Developer > JavaScript Console

Below are some possible errors you may encounter:

Error: origin_mismatch

This error will occur during the authorization flow if the host and port used to serve the web page doesn't match an allowed JavaScript origin on your Google Developers Console project. Make sure to correctly specify Authorized JavaScript origins in the quickstart steps.

idpiframe_initialization_failed: Failed to read the 'localStorage' property from 'Window'

The Google Sign-in library requires that third-party cookies and data storage is enabled in the web browser. For users that run into this error, prompt them to enable the feature or add an exception for accounts.google.com.

idpiframe_initialization_failed: Not a valid origin for the client

The Google Sign-in library requires that the domain registered in the Google Developers Console matches the domain being used to host the web page. Make sure to correctly specify Authorized JavaScript origins in the quickstart steps.

Linting

This project uses htmllint.

Install & run:

sudo npm install -g htmllint-cli
htmllint

Configure options in the .htmllintrc.

Client Library

Google Workspace APIs use the Google API JavaScript client library.

Contributing

Contributions welcome! See the Contributing Guide.

browser-samples's People

Contributors

asrivas avatar dependabot[bot] avatar googleworkspace-bot avatar grant avatar jamesor avatar jmdobry avatar jonutah avatar jpoehnelt avatar jsmeredith avatar kar320 avatar nick-lai avatar reeve567 avatar renovate[bot] avatar shinenic avatar sqrrrl avatar suchawla09 avatar trevorade avatar vinay-google avatar youzi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

browser-samples's Issues

dpiframe_initialization_failed - http://freewheel has not been whitelisted for client ID ...

Expected Behavior

using sample code from "Browser Quickstart" with http://freewheel/index.html
https://developers.google.com/drive/api/v3/quickstart/js#prerequisites

no error message
(Include the sample name)

Actual Behavior

"error": "idpiframe_initialization_failed",
"details": "Not a valid origin for the client: http://freewheel has not been whitelisted for client ID 895878361325-0805lu8fmgtrevplaeleaealh0qqkcrk.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."

JavaScript Console Output

no errors

Specifications

  • Browser Chrome
  • OS Windows

Waterfox Errors and confusing documentation

I got completely lost trying to follow the PHP tutorial so I decided to attempt to follow the JavaScript tutorial instead: https://developers.google.com/calendar/quickstart/js

After creating the HTML file the console in Waterfox produced the following two errors:

uncaught exception: [object Object] (unknown)

Use of Mutation Events is deprecated. Use MutationObserver instead. -- bug-78414_content.js:70:2

Tested with Waterfox 56 as Mozilla killed Firefox; the Client ID and API key were updated as noted after the HTML sample; it does work fine in Firefox 56 and Chrome 67.


Step 3: Run the sample

This uses Python...I don't program Python and Python is a server side language... why is the tutorial asking me to run server code when I'm testing JavaScript? I use PHP on my server any way. Should the tutorial mention that Step 3 is for specific testing such as local development?


Any way the fact that the test file works in Firefox 56 but not Waterfox 56 (each with the exact same rendering engine) is highly problematic. All of my computer and web clients are switched to Waterfox since all the fixes to the browser break in Firefox 57+ making the Firefox unusable by non-technical users.

Calendar quickstart throwing exception in create-react-app

I am trying to adapt the code from the Google Calendar browser quickstart to work in my React app. Whenever I try to run the gapi.client.init method, it throws this error:

Refused to display 'https://developers.google.com/static/proxy?usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_US.MDhkA3012xc.O%2Fam%3DQQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCM6WmePnR12kdbRAwKb1aCuIQXH1Q%2Fm%3D__features__#parent=http%3A%2F%2Flocalhost%3A3000&rpctoken=1847815717' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I put all my code below. I made sure to whitelist my origin. I don't know if it has to be something besides http://localhost:3000. Sorry if this is the wrong place to ask about this. Nothing I found on Google worked, and nobody has answered a question about it I asked on StackOverflow.

import React, { Component } from 'react';
import config from '../../config';

class Index extends Component {
  componentDidMount() {
    window.gapi.load('client:auth2', function() {
      window.gapi.client.init({
        apiKey: config.apiKey,
        discoveryDocs: config.discoveryDocs,
        clientId: config.clientId,
        scope: config.scope
      });
    });
  }
  login() {
    console.log('logging in...');
    window.gapi.auth2.getAuthInstance().signIn();
  }
  render() {
    return (
      <div>
        <button type="button" onClick={this.login.bind(this)}>Login with Google</button>
      </div>
    )
  }
}

export default Index;

File Search In Drive Picker is not working.

When I activate the PICKER with a query (setQuery ()), it goes blank and does not show the result. In my case I am consulting folders.
Until Friday, August 9 it worked me, but now it doesn't work. Apparently you did an update on the script but it contains some error.

image

JavaScript Console Output ---> -Does not show any error message

This is my Code that used to work for me:

// Create and render a Picker object for searching images.
function createPicker() {
if (pickerApiLoaded && oauthToken) {
var view = new google.picker.View(google.picker.ViewId.FOLDERS);
view.setQuery('FOLDER NAME');
view.setMimeTypes("image/png,image/jpeg,image/jpg,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,application/vnd.ms-powerpointtd,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip, application/x-compressed-zip,application/msword, application/vnd.google-apps.spreadsheet, application/vnd.google-apps.document, application/vnd.google-apps.presentation, application/vnd.google-apps.folder");
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(appId)
.setOAuthToken(oauthToken)
.addView(view)
.setDeveloperKey(developerKey)
.setLocale('es')
.setTitle("Drive Fénix")
.setCallback(pickerCallback)
.build();
picker.setVisible(true);
}
}

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):
  • OS (Mac/Linux/Windows):

After running the code I got only white blank window with above written "Google Sheets API Quickstart"

Expected Behavior

`The first time you run the sample, it prompts you to authorize access:

Click the Authorize button to open the authorization window.

If you're not already logged in to your Google account, the window prompts you to log in. If you are logged in to multiple Google accounts, you must select one account to use for the authorization.

Click the Accept button.

(Include the sample name) `

Actual Behavior

A blank white window with above written "Google Sheets API Quickstart"

JavaScript Console Output

(View your JavaScript Console to see if there are any errors)
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome
  • OS (Mac/Linux/Windows): Linux

Signout not working

Expected Behavior

Click signout button:

Signed out & button change to "Authorize"

Actual Behavior

Function handleSignoutClick() runs, but no requests are sent, not logged out, button does not change to "Authorize"

JavaScript Console Output

No errors

Specifications

Chrome - html file running from XAMP localhost.

The quick start doesn't run

Expected Behavior

Disconnect button appear

Actual Behavior

Just connect button is able, even if i click to oauth connect

JavaScript Console Output

nothing :(

(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):
    Chrome
  • OS (Mac/Linux/Windows):
    Windows

idpiframe_initialization_failed: Cookies are not enabled in current environment.

I'm running sample https://github.com/gsuitedevs/browser-samples/blob/master/drive/quickstart/index.html with Client and API ID filled in.

Expected Behavior

  • a) An entry in "troobleshooting" that helps me understand what to do and if the fault is mine or not
  • b) That the example works out of the box and displays something like this:

chromium_success


Actual Behavior

I see nothing but this text in the browser:

Drive API Quickstart

{
  "error": "idpiframe_initialization_failed",
  "details": "Cookies are not enabled in current environment."
}

I have checked the troubleshooting hints at https://github.com/gsuitedevs/browser-samples/blob/master/README.md#troubleshooting but case Cookies are not enabled in current environment. is not listed. Also, I have not disabled anything about cookies manually, so a need to start Googling what to do.
It turns out I need to disable Block third-party cookies here…


chromium_cookies


…that seems to be enabled by default, which seems right to me. I'd frankly rather not disable it — why does Google Drive force me to do that?

JavaScript Console Output

There was no output on the console

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chromium 83.0.4103.116 from Debian
  • OS (Mac/Linux/Windows): Debian bullseye

Syntax error: gapi.load('client:auth2, initClient);

I am new to setting up Google App Script API and trying out the sample code but I came across this error below. Please help and advise on how to resolve this. Thank you!

Expected Behavior

Able to set up sample using index.html

Actual Behavior

Syntax error. (line 35, file "index.html")

gapi.load('client:auth2', initClient);

JavaScript Console Output

Cannot view console output due to error above.

Specifications

  • Browser (Chrome):
  • OS (Mac):

Execute sample for Google Scripts throws 401 error saying unauthorized request

Expected Behavior

I am using the execute method found here to run my Google Script: Google Script execute

It should run the script with no problem

Actual Behavior

The request throws a 401 error saying "unauthorized request

JavaScript Console Output

Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.

Specifications

This is running in a VueJS app. I am not running it from the backend, hence why I am running it with the Javascript API

Windows 10
Chrome Version 73.0.3683.86

I am getting error of invalid developer key.

It should the list out my driver files after authorization. But showing===

The API developer key is invalid.

Actual Behavior

JavaScript Console Output

google_picker.php:1 A cookie associated with a cross-site resource at http://google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
google_picker.php:1 A cookie associated with a cross-site resource at https://google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
google_picker.php:1 A cookie associated with a cross-site resource at https://accounts.google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
google_picker.php:1 A cookie associated with a cross-site resource at https://docs.google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
VM15 cb=gapi.loaded_0:113 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('https://nuc.gblrs.com').
(anonymous) @ VM15 cb=gapi.loaded_0:113
A cookie associated with a cross-site resource at was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .
A cookie associated with a cross-site resource at was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .
A cookie associated with a cross-site resource at was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .
A cookie associated with a cross-site resource at was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .
A cookie associated with a cross-site resource at was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at and .
Navigated to https://nuc.gblrs.com/googleforms/google_picker.php
cb=gapi.loaded_0:191 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
qh @ cb=gapi.loaded_0:191
_.ph @ cb=gapi.loaded_0:190
_.ph @ cb=gapi.loaded_0:190
_.Or @ cb=gapi.loaded_1:90
ks @ cb=gapi.loaded_1:110
_.k.ra @ cb=gapi.loaded_1:112
_.k.ra @ cb=gapi.loaded_1:155
_.k.$l @ cb=gapi.loaded_1:59
_.k.S @ cb=gapi.loaded_1:58
_.k.S @ cb=gapi.loaded_1:156
_.RC @ cb=gapi.loaded_1:108
_.bs.$ @ cb=gapi.loaded_1:108
JD.yg @ cb=gapi.loaded_1:163
JD.setVisible @ cb=gapi.loaded_1:165
createPicker @ google_picker.php:69
handleAuthResult @ google_picker.php:50
h.uJ @ cb=gapi.loaded_0:175
xs @ cb=gapi.loaded_0:178
Wq @ cb=gapi.loaded_0:178
_.C.uea @ cb=gapi.loaded_0:178
Ap @ cb=gapi.loaded_0:170
cb=gapi.loaded_0:191 [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
qh @ cb=gapi.loaded_0:191
_.ph @ cb=gapi.loaded_0:190
uD @ cb=gapi.loaded_1:125
_.k.ra @ cb=gapi.loaded_1:155
_.k.$l @ cb=gapi.loaded_1:59
_.k.S @ cb=gapi.loaded_1:58
_.k.S @ cb=gapi.loaded_1:156
_.RC @ cb=gapi.loaded_1:108
_.bs.$ @ cb=gapi.loaded_1:108
JD.yg @ cb=gapi.loaded_1:163
JD.setVisible @ cb=gapi.loaded_1:165
createPicker @ google_picker.php:69
handleAuthResult @ google_picker.php:50
h.uJ @ cb=gapi.loaded_0:175
xs @ cb=gapi.loaded_0:178
Wq @ cb=gapi.loaded_0:178
_.C.uea @ cb=gapi.loaded_0:178
Ap @ cb=gapi.loaded_0:170
cb=gapi.loaded_0:113 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('https://nuc.gblrs.com').
(anonymous) @ cb=gapi.loaded_0:113
setTimeout (async)
call @ cb=gapi.loaded_0:113
call @ cb=gapi.loaded_0:126
(anonymous) @ cb=gapi.loaded_1:161
(anonymous) @ cb=gapi.loaded_1:159
sD @ cb=gapi.loaded_1:151
Qr @ cb=gapi.loaded_1:159
g1 @ cb=gapi.loaded_1:161
JD.setVisible @ cb=gapi.loaded_1:165
createPicker @ google_picker.php:69
handleAuthResult @ google_picker.php:50
h.uJ @ cb=gapi.loaded_0:175
xs @ cb=gapi.loaded_0:178
Wq @ cb=gapi.loaded_0:178
_.C.uea @ cb=gapi.loaded_0:178
Ap @ cb=gapi.loaded_0:170
Promise.then (async)
um @ cb=gapi.loaded_0:170
_.Qp @ cb=gapi.loaded_0:170
er @ cb=gapi.loaded_0:177
_.C.fl @ cb=gapi.loaded_0:176
(anonymous) @ cb=gapi.loaded_0:171
(anonymous) @ cb=gapi.loaded_0:597
(anonymous) @ cb=gapi.loaded_0:299
(anonymous) @ cb=gapi.loaded_0:303
(anonymous) @ cb=gapi.loaded_0:301
(anonymous) @ cb=gapi.loaded_0:247
_.k.fT @ cb=gapi.loaded_0:228
(anonymous) @ cb=gapi.loaded_0:230

Specifications

  • Browser (Chrome):
  • OS (Windows):

Share uploaded files with specific user using google Drive API

I am trying to share the upload file using google drive API. I follow the below tutorial

https://bytutorial.com/tutorials/google-api/introduction-to-google-drive-api-using-javascript
Upload files/folder, List drive file are working fine but I want to add share functionality where the file can we share with specific users.

I have spent so many hours but didn't found any solution. anyone, please suggest a solution to share a file?

Thanks

(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome
  • OS (Mac/Linux/Windows): Linux

401 after successfully allowing access to the quickstart

Expected Behavior

Google Calendar API Quickstart should show upcoming events from my calendar.

Actual Behavior

The call to https://content.googleapis.com/calendar/v3/calendars/primary/events?maxResults=10&orderBy=startTime&showDeleted=false&singleEvents=true&timeMin=2019-08-10T08%3A43%3A19.523Z&key= fails with an Invalid Credentials error.

JavaScript Console Output

cb=gapi.loaded_0:164 GET https://content.googleapis.com/calendar/v3/calendars/primary/events?maxResults=10&orderBy=startTime&showDeleted=false&singleEvents=true&timeMin=2019-08-10T08%3A43%3A19.523Z&key= 401
zu @ cb=gapi.loaded_0:164
n @ cb=gapi.loaded_0:164
Cu @ cb=gapi.loaded_0:165
(anonymous) @ cb=gapi.loaded_0:165
g @ cb=gapi.loaded_0:140
c @ cb=gapi.loaded_0:136
cb=gapi.loaded_0:118 Uncaught {result: {…}, body: "{↵ "error": {↵ "errors": [↵ {↵ "domain": "gl…e": 401,↵ "message": "Invalid Credentials"↵ }↵}↵", headers: {…}, status: 401, statusText: null}

(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome
  • OS (Mac/Linux/Windows): ChromeOS Version 75.0.3770.144 (Official Build) (64-bit) with Linux Subsystem enabled

Issues with Verification

Expected Behavior

Oauth sign in screen to pop up, ask for permission to access sheets.
(Include the sample name)
Spreadsheet quickstart for Javascript/Browser

Actual Behavior

Oauth screen pops up. When I click on my e-mail, screen pops up saying 'This app isn't verified.' Rest of app fails to run,

JavaScript Console Output

No errors.
(View your JavaScript Console to see if there are any errors)

Specifications

Chrome Browser
Mac OS
Visual Studio Code
HTML page, rendered with webpack.(Intention is to create a React app that uses sheets)

  • Browser (Chrome/Internet Explorer/Firefox):
  • OS (Mac/Linux/Windows):

Browser Quickstart causes error: The API Key and the authentication credential are from different projects

Expected Behavior

When the QuickStart example is followed to the last step, the outcome is suppose to be a listing of max 10 users.

Actual Behavior

An error occurred, with message: The API Key and the authentication credential are from different projects

JavaScript Console Output

N/A

Specifications

  • Browser: Chrome Version 87.0.4280.88 (Official Build) (64-bit)
  • OS: Linux x86_64 GNU/Linux (Ubuntu 20.04.1 LTS)

child_process module not found

Expected Behavior

We have installed the child_process module. but it shows module not found.
(Include the sample name)

Actual Behavior

Once installed the package it should work.

JavaScript Console Output

This dependency was not found: friendly-errors 17:57:11
friendly-errors 17:57:11

  • child_process in ./node_modules/coffee-script/lib/coffee-script/register.js
    (View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): chrome
  • OS (Mac/Linux/Windows): windows

Drive API Quickstart broken

The file https://github.com/gsuitedevs/browser-samples/blob/master/drive/quickstart/index.html, which is currently hosted at https://developers.google.com/drive/api/v3/quickstart/js.
Following the instructions exactly:

  • Authorize with my google account works.
  • The call to listFiles gives 401 error. Likewise if I try to call it from the console.

But it works if I remove the apiKey parameter from the gapi.client.init call.

Didn't know if I should make an issue here or at https://github.com/google/google-api-javascript-client.

JavaScript Console Output

cb=gapi.loaded_0:228 GET https://content.googleapis.com/drive/v3/files?pageSize=10&fields=nextPageToken%2C%20files(id%2C%20name)&key=[MY API KEY DELETED] 401
wh @ cb=gapi.loaded_0:228
g @ cb=gapi.loaded_0:228
xh @ cb=gapi.loaded_0:229
(anonymous) @ cb=gapi.loaded_0:229
d @ cb=gapi.loaded_0:186
b @ cb=gapi.loaded_0:181
cb=gapi.loaded_0:191 Uncaught {result: {…}, body: "{↵ "error": {↵  "errors": [↵   {↵    "domain": "gl…e": 401,↵  "message": "Invalid Credentials"↵ }↵}↵", headers: {…}, status: 401, statusText: null}
(anonymous) @ cb=gapi.loaded_0:191
setTimeout (async)
Aj @ cb=gapi.loaded_0:191
(anonymous) @ cb=gapi.loaded_0:204
Nj @ cb=gapi.loaded_0:196
Promise.then (async)
Ij @ cb=gapi.loaded_0:196
_.Mj @ cb=gapi.loaded_0:196
ek @ cb=gapi.loaded_0:203
_.Oj.kh @ cb=gapi.loaded_0:202
(anonymous) @ cb=gapi.loaded_0:197
d @ cb=gapi.loaded_0:976
(anonymous) @ cb=gapi.loaded_0:974
(anonymous) @ cb=gapi.loaded_0:491
v.__cb @ cb=gapi.loaded_0:431
d @ cb=gapi.loaded_0:425
b @ cb=gapi.loaded_0:420

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome
  • OS (Mac/Linux/Windows): Linux

Google Calendar API error

When I clicked the 'Authorize' button in the browser, a 400 error popped up, saying that it was an "invalid_request. Permission denied to generate login hint for target domain." I replaced the API key and the Client ID properly, so I'm wondering if there is a problem with my Google Suite or maybe something other than that. Any ideas?

Authorization is not persisting on Safari (works on Firefox, Chrome)

Expected Behavior

I'm using the calendar quickstart and behaviour is different on Safari vs. other browsers (Chrome, Firefox).

After signing in successfully, I can see the calendar entries.
After closing the browser I expect not to have to log back in.

Actual Behavior

In Safari (MacOS and iOS), I am forced to authenticate each time the browser session expires (60 mins) or after quitting the browser.

In our web application this is causing us considerable problems because Safari is forcing the user to sign in after the session expires (60 mins).

This is resulting in considerable friction and poor user adoption. If all the user wants to do is check the calendar (via our app) then they don't need the extra steps of signing in again. This is especially tedious on a mobile device.

I researched as best I could and

  • After clearing Safari -> Preferences -> Privacy -> Manage Website Data... -> google & "mywebsite" -> Remove the problem went away for a short period.
  • On the iPhone you can't clear cookies for a subset of sites so this is unacceptable but likewise the problem reappeared on our test devices.

Also, it appears that the login authentication (perhaps) is being saved in persistent storage as when I look in Local Storage on Firefox, I see this created under https://accounts.google.com after authorisation.

oauth2_ss::http://beta.mywebsite.com::1::DEFAULT::_ss_:"{"cachedValue":{"hint":"long-gobbledigookstring","disabled":false}}"

It is created also on Safari but on Safari it doesn't persist after quitting where as on Firefox it does (as it also does on Chrome)

JavaScript Console Output

There are no errors but I added simple console.log messages in each method in to track the flow

Firefox (working as expected) after first authorising and then quitting the browser

handleClientLoad testauth.html:44:17
initClient testauth.html:52:17
initClient.then testauth.html:59:19
updateSigninStatus true testauth.html:78:17
listUpcomingEvents testauth.html:122:17

Chrome (working as expected)

testauth.html:44 handleClientLoad
testauth.html:52 initClient
testauth.html:59 initClient.then
testauth.html:78 updateSigninStatus true
testauth.html:122 listUpcomingEvents

Safari (not working)

handleClientLoad (testauth.html, line 44)
initClient (testauth.html, line 52)
initClient.then (testauth.html, line 59)
updateSigninStatus false (testauth.html, line 78)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):
    Chrome 78.0.3904.97 (Official Build) (64-bit)
    Firefox 70.0.1 (64-bit)
    Safari Version 13.0.3 (13608.3.10.10.1)
  • OS (Mac/Linux/Windows):
    Mac OS 10.13.6

API keys don't have client ID & OAuth2.0 Don't have API Key

Expected Behavior

For API key or OAuth 2.0 projects in dev console to both have API Key and ClientID

Actual Behavior

API keys don't have client ID & OAuth2.0 Don't have API Key. I used the previous issue's recommendation by removing API key but that didn't work.
On a side not, I'd like to know if we can also create events using a javascript to user google calendar (in other words from client side)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome
  • OS (Mac/Linux/Windows): Mac

Park Advantage

Expected Behavior

(Include the sample name)

Actual Behavior

JavaScript Console Output

(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):
  • OS (Mac/Linux/Windows):

Critical JSON Nesting Malform Issue!

So working with the following code:

function event_create()
{
 var event = {
  'summary': 'Google I/O 2015',
  'location': '800 Howard St., San Francisco, CA 94103',
  'description': 'A chance to hear more about Google\'s developer products.',
  'start': {
    'dateTime': '2018-08-04T09:00:00-07:00',
    'timeZone': 'America/Los_Angeles'
  },
  'end': {
    'dateTime': '2018-08-04T17:00:00-07:00',
    'timeZone': 'America/Los_Angeles'
  },
  'recurrence': [
    'RRULE:FREQ=DAILY;COUNT=2'
  ],
  'attendees': [
    {'email': '[email protected]'},
    {'email': '[email protected]'}
  ],
  'reminders': {
    'useDefault': false,
    'overrides': [
      {'method': 'email', 'minutes': 24 * 60},
      {'method': 'popup', 'minutes': 10}
    ]
  }
 };
console.log(event);
 var request = gapi.client.calendar.events.insert({'calendarId': 'primary', 'resource': event});
console.log('request...');
console.log(request);
 request.execute(function(event) {appendPre('Event created: ' + event.htmlLink);});
}

When I run it from the test file to create the event the console.log(request); reveals the following:

Zq.k5.body = "{"summary":"Google I/O 2015","location":"800...

However (even after clearing cache/cookies) when I run the live code, the exact same code though from a different URL the request produces extra JSON:

Zq.k5.body = "{"resource":{"summary":"Google I/O 2015","location":"800...

That in turn results in HTTP 400: Missing end time.

Of course the end time is missing, a whole extra parent element ("resource":) is pointlessly added to the JSON data being sent! I have no idea why this is happening. I do know lots of people have been encountering the issue without realizing that the JSON data is effectively broken (valid in a validator only). I have an entire project on hold for three days (don't feel bad or apologize, everyone who writes code gets bugs) though as I have other things I can work on. However I would greatly appreciate you folks taking care of this ASAP.

API Key not valid despite being the correct API key

Expected Behavior

I expect to run this on my local python http server, by following this tutorial. https://developers.google.com/sheets/api/quickstart/js
I obtain both a client ID and an API key from the credentials for my project.
I replaced both in the sample code.
I should be able to continue with the quickstart and see something in the browser.
https://developers.google.com/sheets/api/quickstart/js

(Include the sample name)

Actual Behavior

Google Sheets API Quickstart

{
"error": {
"code": 400,
"message": "API Key not found. Please pass a valid API key.",
"status": "INVALID_ARGUMENT",
"details": [
{
"@type": "type.googleapis.com/google.rpc.Help",
"links": [
{
"description": "Google developer console API key",
.........
}

JavaScript Console Output

CSI/tbsd_ cb=gapi.loaded_0:613:127
CSI/_tbnd cb=gapi.loaded_0:613:127
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: “strict-dynamic” specified
Content Security Policy: Ignoring “https:” within script-src: “strict-dynamic” specified
Content Security Policy: Ignoring “http:” within script-src: “strict-dynamic” specified

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Firefox
  • OS (Mac/Linux/Windows): Mac

Calendar API quickstart requests whitelisted domain

Expected Behavior

I followed all steps in the example https://developers.google.com/calendar/quickstart/js

  1. Setup a new project via the button
  2. Setup a new API key via the button
  3. copied and pasted the code to a page on my web site /googleCal.html

Now I expect to see the Google Oauth authorization screen to grant access to my calendar

Actual Behavior

{
"error": "idpiframe_initialization_failed",
"details": "Not a valid origin for the client: https:// has not been whitelisted for client ID XXXX-YYYY.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID."
}

I tried without success all combinations of below:
a) restricting the application to web browsers and added "https://mydomain/*" as the URL restriction
b) restricting the API to calendar only

All info I find about whitelisting points to an Oauth client, which generates a client Id and secret, not the requested client ID and API key.

I tried adding an Oauth client with the correct whitelisted website, even though this is not part of the example and "mix and match": The API key from the "API KEYS" section, and the Oauth client ID from the "OAuth 2.0 Client IDs" section. The Oauth client lists the required domain in it's callback URI.

Now the error seemingly goes away, but I get the error below in the console, on the call gapi.client.calendar.events.list ....

Bottom line, the example is somehow incomplete and does not work.

JavaScript Console Output

Uncaught TypeError: Cannot read property 'events' of undefined
at googleCal.html:137
at e.Br (cb=gapi.loaded_0:239)
at $k (cb=gapi.loaded_0:242)
at Vk (cb=gapi.loaded_0:242)
at _.Gk.cT (cb=gapi.loaded_0:242)
at Fk (cb=gapi.loaded_0:234)

(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):
  • OS (Mac/Linux/Windows):

content security policy error

Expected Behavior

Should be no errors
(Include the sample name)

Actual Behavior

error:
An error pops without any reason

JavaScript Console Output

The Content Security Policy 'script-src 'report-sample' 'nonce-<some_code>' 'unsafe-inline';object-src 'none';base-uri 'self'' was delivered in report-only mode, but does not specify a 'report-uri'; the policy will have no effect. Please either add a 'report-uri' directive, or deliver the policy via the 'Content-Security-Policy' header.
(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):Chrome
  • OS (Mac/Linux/Windows): Linux

AuthInstance Signout not working

The function handleSignoutClick does not work. A possible fix is the following function body:

var auth2 = gapi.auth2.getAuthInstance();   
auth2.signOut().then(function () {});  
auth2.disconnect();  

People Quickstart Broken for Chrome

Expected Behavior

I expect to click the Authorize button, select my account, and view a list of contacts.

https://github.com/gsuitedevs/browser-samples/blob/master/people/quickstart/index.html

Actual Behavior

I authorize, and nothing happens in Chrome. The quickstart works as expected in Firefox.

JavaScript Console Output

There are no errors, just a cookie warning:

A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.

All of the cookies are on the google.com domain.

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome 79.0.3945.88
  • OS (Mac/Linux/Windows): macOS 10.14.6

It's a bit ironic that a Google quickstart does not work with Google Chrome. It would be great if this quickstart just worked, or the troubleshooting section at https://developers.google.com/people/quickstart/js#troubleshooting mentions this issue.

How to use this with Angular?

How are we supposed to use Google API inside of Angular (9+)?
I've already wasted too much time for something which should be a 1 minute thing. Is there an official Google API Angular library? Which one should we use? If Google owns Angular and Google has Google Cloud API, who is supposed to provide us the bindings?

it ssays invalid_request

Expected Behavior

(Include the sample name)

Actual Behavior

JavaScript Console Output

(View your JavaScript Console to see if there are any errors)

Specifications

  • Browser (Chrome/Internet Explorer/Firefox):
  • OS (Mac/Linux/Windows):

google calendar JS quickstart error: "domain": "usageLimits", "reason": "keyInvalid", "message": "Bad Request"

Expected Behavior

Expected to see no errors because I followed all the instructions from the quickstart
Used the correct OAuth 2.0 client ID and the correct API key, even regenerated the API key to see if a new one would work. It didn't.

Actual Behavior

Printed this response upon running localhost

Google Calendar API Quickstart

{
  "error": {
    "errors": [
      {
        "domain": "usageLimits",
        "reason": "keyInvalid",
        "message": "Bad Request"
      }
    ],
    "code": 400,
    "message": "Bad Request"
  }
}

JavaScript Console Output

Failed to load resource: the server responded with a status of 400 ()
Failed to load resource: the server responded with a status of 401 ()

Specifications

  • Browser (Chrome/Internet Explorer/Firefox): Chrome
  • OS (Mac/Linux/Windows): Mac

Calendar Quickstart doesn't work

I double checked this and also tried in Firefox and Chrome. I'm getting

Object details: "Not a valid origin for the client: http://localhost:8000 has not been whitelisted for client ID xxx_obfuscated_.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and whitelist this origin for your project's client ID." error: "idpiframe_initialization_failed"

However, I have added http://localhost:8000 to the Authorised JavaScript origins field in the OAuth Client Id form.

NB. After saving the Authorised JavaScript origins and re-opening the form field is blank which is disconcerting.

IOS problems

The sample code listed on this page no longer works with Google Chrome on IOS devices. It still works with other browsers on IOS, just not the Google Chrome app.

Got 401 error when running calendar API browser quick start sample

Expected Behavior

I run the sample calendar API: browser quickstart
I copied the code and changed the YOUR_CLIENT_ID and YOUR_API_KEY.
I add console.log("listUpcomingEvents started"); at the start of that function, as you can see in the console output below.
I didn't change anything else.
I expected the page to list the upcoming events.

Actual Behavior

I got a 401 error when the code is accessing the calendar API.
The page shows only the title and the sign-out button.

JavaScript Console Output

(index):1 A cookie associated with a cross-site resource at https://accounts.google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at http://google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):1 A cookie associated with a cross-site resource at https://google.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
(index):132 listUpcomingEvents started
cb=gapi.loaded_0:239 GET https://content.googleapis.com/calendar/v3/calendars/primary/events?maxResults=10&orderBy=startTime&showDeleted=false&singleEvents=true&timeMin=2020-04-24T22%3A54%3A00.066Z&key=AIzaSyD_7KK0YoYnwufitiZE6LW3xMhnKK0AQGo 401
Eh @ cb=gapi.loaded_0:239
g @ cb=gapi.loaded_0:239
Fh @ cb=gapi.loaded_0:240
(anonymous) @ cb=gapi.loaded_0:240
d @ cb=gapi.loaded_0:198
b @ cb=gapi.loaded_0:193
cb=gapi.loaded_0:181 Uncaught {result: {…}, body: "{↵ "error": {↵  "errors": [↵   {↵    "domain": "gl…e": 401,↵  "message": "Invalid Credentials"↵ }↵}↵", headers: {…}, status: 401, statusText: null}
(anonymous) @ cb=gapi.loaded_0:181
setTimeout (async)
bk @ cb=gapi.loaded_0:181
(anonymous) @ cb=gapi.loaded_0:195
ok @ cb=gapi.loaded_0:186
Promise.then (async)
jk @ cb=gapi.loaded_0:186
_.nk @ cb=gapi.loaded_0:186
Hk @ cb=gapi.loaded_0:194
_.rk.xh @ cb=gapi.loaded_0:193
(anonymous) @ cb=gapi.loaded_0:188
d @ cb=gapi.loaded_0:932
(anonymous) @ cb=gapi.loaded_0:931
(anonymous) @ cb=gapi.loaded_0:487
u.__cb @ cb=gapi.loaded_0:404
d @ cb=gapi.loaded_0:398
b @ cb=gapi.loaded_0:393

Specifications

  • Browser: Chrome
  • OS: Windows

Note

I am new to Gsuit APIs, so I am not sure if it is my problem. According to this document page, I need a token attached to the request URL. There isn't a token in the request URL, but an API Key instead, which shouldn't be able to help authentication. What is the API Key for?

Gmail API quickstart missing API key variable

Hi, I am following this guide from Google Developers...

According to the direction, I were to replace the placeholder <YOUR_API_KEY> with my own API key. But, in index.html, that variable is not available. I continued through the sample instructions, and it works fine without that step. However, this is my first time, so I am not sure if the instruction or the code is wrong. And, I don't know the repo for that quickstart documentation either. So, I just started the issue here.

idpiframe_initialization_failed

Hi,
I followed the instruction on https://developers.google.com/gmail/api/quickstart/js
1st problem is, there's no placeholder <YOUR_API_KEY> in the code as mentioned in the instruction.
2nd problem is, when run the quickstart.html page in Chrome (http://localhost:8000/quickstart.html) using Python 2.7 on windows 7 machine, it only shows the header "Gmail API Quickstart" and nothing else. With F12, in console it says:
Uncaught Object
details: "Cookies are not enabled in current environment."
error:"idpiframe_initialization_failed"

Screen dump attached.
I later tried the same code from Chrome on my MacBook and it worked. I also realised as the windows 7 machine is my work laptop, our corporate AD policy forced the "block third party cookies" setting to be enabled. Not sure if that's related?

gmail api quickstart error

Uncaught (in promise) TypeError: Cannot read property 'Zi' of undefined at handleSheetsAuth (sheets.oauth.js:58) - Google Sheets API

Expected Behavior

We've had a Browser-based web application live and in production for about 8 months now and all the sudden without any code changes, new versions built/deployed, etc, our connection to Google Sheets seems to have broken.

Some context of the app: a table displaying many rows of various types of String data, nothing crazy here. We are using DataTables to display this data in a "pretty" way and have an "export to google sheet" button for users to export and edit this data locally, etc.

Error message we're seeing in the console:

Uncaught (in promise) TypeError: Cannot read property 'Zi' of undefined at handleSheetsAuth (sheets.oauth.js:58)

Below is the function inside sheets.oauth.js that is causing the error, line 58 is the line:
"if(!signInStatus || !gapi.auth2.getAuthInstance().currentUser.Ab.Zi.scope.toString().includes(SCOPES)) {"

`
async function handleSheetsAuth(headerData, bodyData, pageName) {
let signInStatus = await gapi.auth2.getAuthInstance().isSignedIn.get();
if(!signInStatus || !gapi.auth2.getAuthInstance().currentUser.Ab.Zi.scope.toString().includes(SCOPES)) {
let signedIn = await gapi.auth2.getAuthInstance().signIn();
}

let formattedDate = new Date().toLocaleString();
let spreadsheetBody = {
    "properties": {
        "title": "lorem ipsum - "+pageName+" Export - "+formattedDate
    }
};
let request = gapi.client.sheets.spreadsheets.create(spreadsheetBody);
request.then(function(response) {
    //console.log(response.result); // response.result.spreadsheetUrl // response.result.spreadsheetId
    let dataRequest = gapi.client.sheets.spreadsheets.values.batchUpdate({
        "spreadsheetId": response.result.spreadsheetId,
        "valueInputOption": "USER_ENTERED",
        "data": [{
            "range": "Sheet1!A1:AE1",
            "majorDimension": "ROWS",
            "values": [headerData]
        },
        {
            "range": "Sheet1!A2:AE20000",
            "majorDimension": "ROWS",
            "values": bodyData
        }]
    });
    dataRequest.then(function(dataResponse) {
        window.open(response.result.spreadsheetUrl, "_blank");
        return "success";
    }, function(dataReason) {
        return console.log('error: ' + dataReason.result.error.message);
    });
}, function(reason) {
    return console.log('error: ' + reason.result.error.message);
});

}
`

Thanks all,
Mike

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.