Ich habe die von Google bereitgestellten Richtlinien befolgt, um das neue Google-Login zu integrieren. Ich habe den HTML-Code mit dem von Google bereitgestellten Codegenerator erstellt.
Den vollständigen Code habe ich hier angehängt
<svelte:head>
<title>Home</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
<div class="h-screen">
<div
id="g_id_onload"
data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
data-context="use"
data-ux_mode="redirect"
data-login_uri="http://localhost:5173/auth/callback"
/>
<div class="bg-red-300 h-80">
<div
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="medium"
data-logo_alignment="left"
data-width="180"
/>
</div>
</div>
</section>
Es funktioniert hervorragend, wenn Sie die Seite zum ersten Mal rendern.
Wenn wir die Seite mit Command+R aktualisieren oder auf das Neuladen-Symbol im Browser klicken, verschwindet die Schaltfläche Anmelden.
现在我使用 Javascript 创建了组件，在这里我添加了答案。
我在
app.d.ts中将 google 声明为全局变量// See https://kit.svelte.dev/docs/types#app // for information about these interfaces declare global { const google: any; namespace App { } } export {};我创建了一个 svelte 文件来创建用于登录按钮的 svelte 组件
let canvas: any; //Created a variable to optain a reference to rendered div element使用 SvelteKit 时，硬重新加载是在服务器端呈现的。代码可能与此不兼容或者执行顺序错误。
检查控制台是否有错误，并将必须在客户端上运行的代码移至
onMount.您还可以使用ssr页面选项 关闭特定页面的服务器端渲染作为最后的手段。