Wie funktioniert die Verwendung von Vue/TypeScript mit dem Google Authentication Service JavaScript SDK?

Question

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?

Answer 1

找到正确类型的包：

npm 我@types/google.accounts

这将消除错误。