我遵循 Google 提供的指南來(lái)整合新的 Google 登入。我使用 Google 提供的程式碼產(chǎn)生器創(chuàng)建了 HTML。
這裡我附上了完整的程式碼
<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>
第一次渲染頁(yè)面時(shí)效果很好。
當(dāng)我們使用 Command R 或點(diǎn)擊瀏覽器中的重新載入圖示來(lái)刷新頁(yè)面時(shí)，登入按鈕消失。
2
0
0
現(xiàn)在我使用 Javascript 創(chuàng)建了元件，在這裡我添加了答案。
我在 app.d.ts 中將 google 宣告為全域變數(shù)
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
const google: any;
namespace App {
}
}
export {};
我建立了一個(gè) svelte 檔案來(lái)建立用於登入按鈕的 svelte 元件
let canvas: any; //Created a variable to optain a reference to rendered div element
在 onMount 中
onMount(async () => {
google.accounts.id.initialize({
client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
ux_mode: "redirect",
context: "use",
login_uri: "http://localhost:5173/auth/callback"
});
google.accounts.id.renderButton(canvas, {
width: '220',
theme: 'outline',
size: 'large',
type: 'standard',
text: 'signin_with',
shape: 'rectangular',
logo_alignment: 'left',
});
});
此程式碼將在初始渲染、硬重新載入 (Command shift R) 和重新載入 (Command R) 中運(yùn)作
使用 SvelteKit 時(shí)，硬重新載入是在伺服器端呈現(xiàn)的。程式碼可能與此不相容或執(zhí)行順序錯(cuò)誤。
檢查控制臺(tái)是否有錯(cuò)誤，並將必須在客戶(hù)端上執(zhí)行的程式碼移至onMount#.您也可以使用ssr#頁(yè)面選項(xiàng) 關(guān)閉特定頁(yè)面的伺服器端渲染作為最後的手段。
