如何在React/Next.js中用自定义按钮触发Google SSO弹窗？

核心方案：利用Google Identity Services (GSI) 的初始化API，自定义触发账号选择弹窗 #

Google GSI完全支持自定义按钮触发，无需依赖官方提供的品牌按钮，以下是两种常用的实现方式：

方式一：基于ID Token的身份验证（适合快速登录） #

这种方式直接获取Google的ID Token，用于后端验证用户身份，弹窗逻辑和官方按钮一致。

实现步骤（Next.js客户端组件） #

1. 加载GSI脚本：用Next.js的Script组件在客户端加载Google认证脚本
2. 初始化GSI客户端：在脚本加载完成后，配置客户端ID和回调函数
3. 自定义按钮绑定触发事件：点击按钮时调用GSI的弹窗触发方法

'use client';

import Script from 'next/script';
import { useEffect, useRef } from 'react';

export default function GoogleLogin() {
  const gsiClientRef = useRef<any>(null);

  // 处理Google返回的凭证
  const handleCredentialResponse = (response: { credential?: string }) => {
    if (!response.credential) return;
    // 将ID Token发送到后端验证并完成登录流程
    console.log('Google ID Token:', response.credential);
    // 示例：fetch('/api/auth/google', { method: 'POST', body: JSON.stringify({ token: response.credential }) })
  };

  useEffect(() => {
    // 脚本加载完成后初始化GSI客户端
    if (window.google) {
      gsiClientRef.current = window.google.accounts.id.initialize({
        client_id: '你的Google客户端ID', // 替换为Google Cloud Console中生成的ID
        callback: handleCredentialResponse,
        ux_mode: 'popup', // 强制使用弹窗模式
        auto_select: false, // 不自动选择已登录账号
        cancel_on_tap_outside: true // 点击弹窗外部取消
      });
    }
  }, []);

  // 自定义按钮点击事件：触发账号选择弹窗
  const triggerGoogleLogin = () => {
    if (window.google) {
      window.google.accounts.id.prompt();
    }
  };

  return (
    <div>
      {/* 异步加载GSI脚本 */}
      <Script
        src="https://accounts.google.com/gsi/client"
        strategy="lazyOnload"
      />

      {/* 完全自定义样式的按钮 */}
      <button
        onClick={triggerGoogleLogin}
        style={{
          padding: '12px 24px',
          backgroundColor: '#4285F4',
          color: '#fff',
          border: 'none',
          borderRadius: '6px',
          cursor: 'pointer',
          fontSize: '16px',
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }}
      >
        <span>📧</span> 用Google账号登录
      </button>
    </div>
  );
}

方式二：基于OAuth2的访问令牌（需调用Google API时使用） #

如果需要获取Google API的访问权限，可使用OAuth2的Token Client，同样支持自定义触发弹窗。

'use client';

import Script from 'next/script';
import { useEffect, useRef } from 'react';

export default function GoogleOAuthLogin() {
  const tokenClientRef = useRef<any>(null);

  // 处理访问令牌响应
  const handleTokenResponse = (response: { access_token?: string; error?: string }) => {
    if (response.error) {
      console.error('Google OAuth Error:', response.error);
      return;
    }
    // 使用access_token调用Google API（比如获取用户信息）
    console.log('Google Access Token:', response.access_token);
  };

  useEffect(() => {
    if (window.google) {
      tokenClientRef.current = window.google.accounts.oauth2.initTokenClient({
        client_id: '你的Google客户端ID',
        scope: 'email profile openid', // 所需权限范围
        callback: handleTokenResponse
      });
    }
  }, []);

  const triggerOAuthLogin = () => {
    if (tokenClientRef.current) {
      // prompt: 'select_account' 强制显示账号选择弹窗
      tokenClientRef.current.requestAccessToken({ prompt: 'select_account' });
    }
  };

  return (
    <div>
      <Script src="https://accounts.google.com/gsi/client" strategy="lazyOnload" />
      <button onClick={triggerOAuthLogin} style={{ /* 自定义样式 */ }}>
        授权并登录Google
      </button>
    </div>
  );
}

注意事项 #

• 必须使用Next.js客户端组件（添加'use client'指令），因为需要操作浏览器的window对象
• 在Google Cloud Console中配置正确的授权域名（本地开发时需添加http://localhost:3000）
• 弹窗可能被浏览器拦截，确保用户主动触发点击事件（不要在页面加载时自动调用弹窗）
• 所有API均为Google官方未弃用的最新接口，兼容当前GSI规范

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