I am currently working on authorizing Google APIs using the new Google Identity Services JavaScript SDK in my Vue / Quasar / TypeScript application.
Following the guidelines provided here, I have included the Google 3P Authorization JavaScript Library in the header of my index.template.HTML file like this:
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')">
</script>
Inside a Vue component, I have the following code:
<template>
<v-btn
class="q-ma-md"
design="alpha"
label="Connect Google Calendar"
@click="handleGoogleCalendarConnect"
/>
</template>
<script setup lang="ts">
import VBtn from 'src/components/VBtn.vue';
const client = google.accounts.oauth2.initCodeClient({ // <-- TypeScript Error Here
client_id:
'MY_CLIENT_API_KEY_GOES_HERE',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
ux_mode: 'popup',
callback: (response: any) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', code_receiver_uri, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Set custom header for CRSF
xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest');
xhr.onload = function () {
console.log('Auth code response: ' + xhr.responseText);
};
xhr.send('code=' + code);
},
});
const handleGoogleCalendarConnect = () => {
client.requestCode();
};
</script>
However, I am encountering a TypeScript error related to "google" which says:
Cannot find name 'google'. ts(2304)Could it be due to missing types for the Google Identity Services JavaScript SDK? If so, where can I find them?
Or is there another potential issue causing this error?