Wie funktioniert die Verwendung von Vue/TypeScript mit dem Google Authentication Service JavaScript SDK?
Ich versuche, einige Google APIs mithilfe des neuen Google Identity Services JavaScript SDK in meiner Vue-/Quasar-/TypeScript-App zu autorisieren.
Laut Dokumentation habe ich die Google 3P Authorization JavaScript-Bibliothek wie folgt in den Header der index.template.HTML-Datei geladen:
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')">
</script>
Jetzt habe ich in der Vue-Komponente Folgendes:
<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>
Aber ich erhalte bei „google“ einen TypeScript-Fehler, der lautet: Cannot find name 'google'。 ts(2304)
Vielleicht liegt es daran, dass mir ein Typ im JavaScript SDK von Google Identity Services fehlt? Wenn ja, wo kann ich sie finden?
Oder vielleicht liegt das Problem woanders?
