SvelteKit集成Google OAuth 2.0 One Tap登录异常问题排查

该报错核心原因是Google Identity Services(GSI)客户端脚本未完成加载时，代码就提前调用了全局google对象。偶现特性和页面加载时的网络状态直接相关：网络条件好时脚本加载速度快于onMount逻辑执行就不会报错，网络波动导致脚本加载慢时就会触发引用错误。
修复方案：

• 不要直接在onMount中无校验调用google对象，先绑定脚本加载完成回调，确认GSI加载完毕后再执行初始化逻辑
• SvelteKit适配的正确写法参考：

<svelte:head>
  <!-- 加载GSI脚本，加载完成后触发初始化 -->
  <script src="https://accounts.google.com/gsi/client" async defer on:load={initGoogleAuth}></script>
</svelte:head>

<div id="buttonDiv"></div>

<script>
  import { onMount } from 'svelte';
  // 替换为自己的客户端ID
  const clientId = 'YOUR_GOOGLE_CLIENT_ID';
  const handleCredentialResponse = async (response) => {
    console.log('Encoded JWT ID token: ' + response.credential);
    // 后续token校验、登录态写入逻辑在此实现
  };

  function initGoogleAuth() {
    google.accounts.id.initialize({
      client_id: clientId,
      callback: handleCredentialResponse,
    });
    google.accounts.id.renderButton(
      document.getElementById('buttonDiv'),
      { theme: 'outline', size: 'large' }
    );
    google.accounts.id.prompt();
  }

  onMount(() => {
    // 兜底逻辑：页面缓存等场景下脚本已提前加载时，直接执行初始化
    if (window.google?.accounts?.id) {
      initGoogleAuth();
    }
  })
</script>

• 注意：所有GSI相关逻辑必须放在客户端执行，不要在SvelteKit服务端渲染(SSR)阶段调用window或google对象。

桌面端正常、移动端单独报该错误，按以下优先级排查：

• 首先核对移动端实际访问的origin值，和Google Cloud控制台配置的已授权JavaScript来源完全一致：
  • 检查是否存在协议不匹配（http/https混用）、域名前缀不匹配（有无www）、端口不匹配的问题，比如配置的是https://example.com，移动端实际访问的是https://www.example.com就会被拦截
  • 本地局域网调试时，必须把移动端访问的完整地址（含协议、IP、端口，比如http://192.168.1.10:5173）加入授权来源列表，不要只加localhost
• 检查移动端浏览器设置：部分浏览器默认开启省流加速、网页代理、安全防护功能，会篡改页面origin触发校验失败，临时关闭相关功能后重试即可
• 如果是在移动端内嵌WebView场景（比如微信内置浏览器、第三方APP内嵌页面）打开，GSI One Tap本身对这类环境的origin校验有严格限制，不支持使用One Tap，需要降级为普通OAuth跳转登录流程。

• 控制台中带[GSI_LOGGER]前缀的日志就是GSI内置的默认日志，可直接查看基础报错信息
• 需要更详细的调试日志时，可在GSI初始化前调用接口开启debug级日志，会输出完整的origin匹配、参数校验、请求流程日志：

// 放在initGoogleAuth逻辑最前面执行
if (window.google?.accounts?.id) {
  google.accounts.id.setLogLevel('debug');
}

• origin校验类问题可直接在报错页面的控制台执行window.location.origin，打印当前页面实际origin值，和后台配置逐字符比对，排除多余斜杠、隐藏端口、域名拼写错误等问题。

内容的提问来源于stack exchange，提问作者Peko Chan