Comment l'utilisation de Vue/TypeScript fonctionne-t-elle avec le SDK JavaScript du service d'authentification Google ?

Question

J'essaie d'autoriser certaines API Google à l'aide du nouveau SDK JavaScript Google Identity Services dans mon application Vue / Quasar / TypeScript.

D'après la documentation, j'ai chargé la bibliothèque JavaScript d'autorisation 3P de Google dans l'en-tête du fichier index.template.HTML comme ceci :

<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')">  
</script>

Maintenant, dans le composant Vue, j'ai ceci :

<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>

Mais je reçois une erreur TypeScript sur "google" qui dit : Cannot find name 'google'。 ts(2304)

C'est peut-être parce qu'il me manque un type dans le SDK JavaScript de Google Identity Services ? Si oui, où puis-je les trouver ?

Ou peut-être que le problème vient d’autre chose ?

Answer 1

Trouver le bon type de sac :

npm 我@types/google.accounts

Cela éliminera l’erreur.