Svelte 应用中集成外部全局回调的最佳实践

<script>
    import { onMount } from 'svelte';
    import jwt_decode from 'jwt-decode'; // 假设你已安装 jwt-decode 包

    /**
     * Google Sign-In 回调函数
     * @param {Object} response - Google 认证响应对象
     */
    function handleCredentialResponse(response) {
        // 将原始凭证存储到 localStorage
        localStorage.setItem('googleCredentials', JSON.stringify(response));

        // 解码 JWT 凭证
        // 注意：Google 响应的 credential 字段本身就是 JWT 字符串
        let jwt = jwt_decode(response.credential);
        localStorage.setItem('decodedJwt', JSON.stringify(jwt));

        // 刷新页面或进行其他认证后的操作
        window.location.reload();
    }

    // 当组件挂载到 DOM 后执行
    onMount(() => {
        // 确保 google.accounts.id 对象已加载
        if (window.google && window.google.accounts && window.google.accounts.id) {
            // 初始化 Google Identity 服务
            google.accounts.id.initialize({
                client_id: '<YOUR_GOOGLE_CLIENT_ID>.apps.googleusercontent.com', // 替换为你的实际 Client ID
                callback: handleCredentialResponse // 将 Svelte 组件内部的函数作为回调
            });

            // 如果需要手动渲染按钮，可以使用 renderButton
            // 假设你的 app.html 中有 <div id="g_id_signin_button"></div>
            const parent = document.getElementById('g_id_signin_button');
            if (parent) {
                google.accounts.id.renderButton(parent, { 
                    type: 'standard',
                    shape: 'rectangular',
                    theme: 'filled_blue',
                    text: 'signin_with',
                    size: 'large',
                    logo_alignment: 'left'
                });
            } else {
                // 如果没有手动渲染按钮，确保 app.html 中有自动渲染的 div
                // 例如：<div class="g_id_signin" data-type="standard" ... />
                // 或者在 app.html 中只放置 <div id="g_id_onload" ... /> 让 Google 脚本自动处理
            }

            // 如果你的 app.html 中使用了 <div id="g_id_onload" ... />
            // 且希望通过 JS 来设置 data-callback，可以这样做：
            const onloadDiv = document.getElementById('g_id_onload');
            if (onloadDiv) {
                // 注意：这里只是示例，通常 initialize 已经设置了 callback
                // 如果需要动态设置其他属性，可以在这里操作
            }

        } else {
            console.warn("Google Identity services not available. Ensure the script is loaded.");
        }
    });
</script>

<!-- 
    在 Svelte 组件的模板中，你可以放置一个用于 Google Sign-In 按钮的占位符。
    如果 Google 脚本是自动渲染的，你可能只需要一个 div。
    如果是在 onMount 中手动 renderButton，则需要一个空的 div 作为容器。
-->
<div id="g_id_onload" style="display:none;"></div> <!-- 隐藏的初始化容器 -->
<div id="g_id_signin_button"></div> <!-- 显式的按钮容器，用于 renderButton -->

<!-- 
    或者，如果你希望 Google 脚本自动渲染，并且你已经通过 onMount 注册了回调，
    你可以在这里放置 Google 提供的标准 HTML 结构，但省略 data-callback 属性。
    Google 脚本会查找并使用 initialize 中设置的回调。
-->
<!--
<div
    class="g_id_signin"
    data-type="standard"
    data-shape="rectangular"
    data-theme="filled_blue"
    data-text="signin_with"
    data-size="large"
    data-logo_alignment="left"
></div>
-->