Google Svelte 驱动快速入门

Question

我正在尝试遵循 Google 驱动器并正在使用此指南：https://developers.google.com/drive/api/v3/quickstart/js

但是我想在 Svelte 中实现它，但是我遇到了问题。

<script async defer src="https://apis.google.com/js/api.js"
   onload="this.onload=function(){};handleClientLoad()"
   onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

如何在 Svelte 中使用此代码？

Answer 1

我用这样的东西让它工作：

<script>
  import { googleClient } from '$services/google-service'
  function handleClientLoad() {
    gapi.load('client:auth2', googleClient)
  }
</script>

<svelte:head>
  <script async defer src="https://apis.google.com/js/api.js" on:load={handleClientLoad}></script>
</svelte:head>

google-service:

import { setCurrentUser } from './auth-service'

const SCOPES =
  'https://www.googleapis.com/auth/fitness.activity.read https://www.googleapis.com/auth/fitness.activity.write https://www.googleapis.com/auth/fitness.nutrition.read https://www.googleapis.com/auth/fitness.nutrition.write'

export async function googleClient() {
  await gapi.client.init({
    apiKey: import.meta.env.VITE_GOOGLE_API_KEY as string,
    clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID as string,
    scope: SCOPES
  })

  setCurrentUser(gapi.auth2.getAuthInstance().isSignedIn.get())

  // Listen for sign-in state changes.
  gapi.auth2.getAuthInstance().isSignedIn.listen((e) => setCurrentUser(e))
}

auth-service:

import { writable } from 'svelte/store'

export interface User {
  email: string
  name: string
  imageUrl: string
}

export const currentUser = writable<User>()

export function handelAuthIn() {
  gapi.auth2.getAuthInstance().signIn()
}

export function handleSignOut() {
  gapi.auth2.getAuthInstance().signOut()
}

export function setCurrentUser(isSignedIn: boolean) {
  if (isSignedIn) {
    const profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile()
    currentUser.set({
      email: profile.getEmail(),
      name: profile.getName(),
      imageUrl: profile.getImageUrl()
    })
  } else {
    currentUser.set(undefined)
  }
}

Google Svelte 驱动快速入门

Google Drive quickstart in Svelte

javascript

google-drive-api

svelte