使用JS方法渲染Google Sign-In按钮时，如何指定后端回调URL？

改用JS方法是完全正确的选择，原因很简单：Svelte（包括React这类前端框架）的虚拟DOM渲染机制，会和Google原生HTML按钮的脚本逻辑冲突——框架重新渲染组件时，会替换掉Google脚本生成的按钮DOM，导致按钮消失。而JS初始化的方式，能让你手动控制按钮的创建与挂载，完美适配框架的渲染周期。

下面是具体的实现步骤：

1. 动态加载Google Sign-In脚本 #

在Svelte组件的onMount钩子中动态加载脚本，避免和组件初始化逻辑冲突：

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    script.onload = initGoogleSignIn;
  });
</script>

<div id="google-signin-button"></div>

2. 初始化登录按钮并绑定回调 #

编写初始化函数，创建按钮并指定回调逻辑：

function initGoogleSignIn() {
  window.google.accounts.id.initialize({
    client_id: '你的Google客户端ID',
    callback: handleCredentialResponse
  });
  window.google.accounts.id.renderButton(
    document.getElementById('google-signin-button'),
    { theme: 'outline', size: 'large' } // 可自定义按钮样式
  );
}

3. 回调中把JWT发送到Golang后端验证 #

拿到Google返回的JWT后，通过请求发送到后端API进行验证：

async function handleCredentialResponse(response) {
  const jwtToken = response.credential;
  try {
    const res = await fetch('/api/google-auth', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ token: jwtToken })
    });
    const authResult = await res.json();
    // 处理后端返回的认证结果，比如保存用户信息到本地存储
    if (authResult.success) {
      localStorage.setItem('currentUser', JSON.stringify(authResult.user));
      // 跳转到主页或其他页面
    }
  } catch (err) {
    console.error('认证请求失败:', err);
  }
}

4. Golang后端验证JWT的核心逻辑 #

使用Google官方库验证JWT的签名与合法性：

import (
  "context"
  "fmt"
  "google.golang.org/api/idtoken"
)

func VerifyGoogleToken(token string) (*idtoken.Payload, error) {
  ctx := context.Background()
  // 第二个参数填你的Google客户端ID，用于验证aud字段
  payload, err := idtoken.Validate(ctx, token, "你的Google客户端ID")
  if err != nil {
    return nil, fmt.Errorf("token验证失败: %v", err)
  }
  // 额外校验issuer，确保来自Google官方
  if payload.Issuer != "accounts.google.com" && payload.Issuer != "https://accounts.google.com" {
    return nil, fmt.Errorf("无效的issuer: %s", payload.Issuer)
  }
  return payload, nil
}

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