How does using Vue/TypeScript work with the Google Authentication Service JavaScript SDK?
I'm trying to authorize some Google APIs using the new Google Identity Services JavaScript SDK in my Vue / Quasar / TypeScript app.
According to the documentation, I have loaded the Google 3P Authorization JavaScript library in the header of the index.template.HTML file as follows:
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')">
</script>
Now in the Vue component I have this:
<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>
But I'm getting a TypeScript error on "google" that reads: Cannot find name 'google'. ts(2304)
Maybe it's because I'm missing a type from the Google Identity Services JavaScript SDK? If so, where can I find them?
Or the problem could be something else?
