如何为同一页面的多个Sign In with Google按钮配置独立callback函数？

完全可以为每个Sign In with Google按钮配置独立的回调函数，不需要所有按钮共享同一全局配置。核心是利用按钮自身的配置参数，而非依赖google.accounts.id.initialize中的全局回调。

方法1：通过HTML元素的data-callback属性指定 #

初始化仅需调用一次，无需设置全局callback字段，之后在每个按钮的HTML标签中通过data-callback绑定专属回调：

// 仅初始化一次，不设置全局回调
google.accounts.id.initialize({
  client_id: '你的客户端ID'
});

<!-- 第一个按钮，绑定callbackFunction1 -->
<div class="g_id_signin" data-callback="callbackFunction1" data-type="standard"></div>

<!-- 第二个按钮，绑定callbackFunction2 -->
<div class="g_id_signin" data-callback="callbackFunction2" data-type="standard"></div>

// 定义独立的回调函数
function callbackFunction1(response) {
  console.log('第一个按钮登录响应:', response);
  // 此处处理第一个按钮的登录逻辑
}

function callbackFunction2(response) {
  console.log('第二个按钮登录响应:', response);
  // 此处处理第二个按钮的登录逻辑
}

方法2：动态渲染按钮时传入callback参数 #

如果是通过JavaScript动态生成按钮，调用google.accounts.id.renderButton时，直接为每个按钮传入独立的callback配置即可：

// 仅初始化一次
google.accounts.id.initialize({
  client_id: '你的客户端ID'
});

// 渲染第一个按钮，指定专属回调
google.accounts.id.renderButton(
  document.getElementById('btn-container-1'),
  {
    callback: callbackFunction1,
    type: 'standard',
    theme: 'outline'
  }
);

// 渲染第二个按钮，指定另一回调
google.accounts.id.renderButton(
  document.getElementById('btn-container-2'),
  {
    callback: callbackFunction2,
    type: 'icon',
    shape: 'circle'
  }
);

关键说明 #

• google.accounts.id.initialize中的全局callback是默认回调，只有当按钮未指定自身回调时才会触发。
• 每个按钮的回调函数需保证在全局作用域可访问，或在渲染按钮时处于可调用的作用域内。
• 动态新增按钮时，无需重新调用initialize，直接调用renderButton并传入专属配置即可。

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