Après avoir actualisé la page, la nouvelle option de connexion Google disparaît

Question

J'ai suivi les directives fournies par Google pour intégrer le nouveau login Google. J'ai créé le HTML à l'aide du générateur de code fourni par Google.

J'ai joint le code complet ici

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

Cela fonctionne très bien la première fois que vous affichez la page.

Lorsque nous actualisons la page en utilisant Command+R ou en cliquant sur l'icône de rechargement dans le navigateur, le bouton Connexion disparaît.

Answer 1

Maintenant, j'ai créé le composant en utilisant Javascript et ici j'ai ajouté la réponse.

J'ai déclaré google comme variable globale dans app.d.ts

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

J'ai créé un fichier svelte pour créer un composant svelte pour le bouton de connexion

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

surMount

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

    });

Ce code fonctionnera sur le rendu initial, le rechargement dur (Command+shift+R) et le rechargement (Command+R)

Answer 2

Lors de l'utilisation de SvelteKit, le rechargement dur est rendu côté serveur. Le code peut être incompatible avec cela ou être exécuté dans le mauvais ordre.

Vérifiez la console pour détecter les erreurs et déplacez le code qui doit s'exécuter sur le client vers onMount< /a>.您还可以使用 ssr Options de page Désactivez le rendu côté serveur pour des pages spécifiques en dernier recours.