Selepas memuat semula halaman, pilihan log masuk Google baharu hilang

Question

Saya mengikut garis panduan yang disediakan oleh Google untuk menyepadukan log masuk Google baharu. Saya mencipta HTML menggunakan penjana kod yang disediakan oleh Google.

Saya telah melampirkan kod lengkap di sini

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

Ia berfungsi hebat pada kali pertama anda memaparkan halaman.

Apabila kami memuat semula halaman menggunakan Command+R atau mengklik ikon muat semula dalam penyemak imbas, butang Log masuk hilang.

Answer 1

Sekarang saya mencipta komponen menggunakan Javascript dan di sini saya menambah jawapannya.

Saya mengisytiharkan google sebagai pembolehubah global dalam app.d.ts

// See https://kit.svelte.dev/docs/types#app
    // for information about these interfaces
    declare global {
        const google: any;
        namespace App {
        }
    }
export {};

Saya mencipta fail langsing untuk mencipta komponen langsing untuk butang log masuk

let canvas: any; //Created a variable to optain a reference to rendered div element
    

dalam 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',
                  
            });

    });

Kod ini akan berfungsi pada pemaparan awal, muat semula keras (Command+shift+R) dan muat semula (Command+R)

Answer 2

Apabila menggunakan SvelteKit, muat semula keras diberikan pada bahagian pelayan. Kod mungkin tidak serasi dengan ini atau dilaksanakan dalam susunan yang salah.

Semak konsol untuk ralat dan alihkan kod yang mesti dijalankan pada klien ke onMount< /a>.您还可以使用 ssr Pilihan Halaman Matikan pemaparan sebelah pelayan untuk halaman tertentu sebagai pilihan terakhir.