Next.js中实现Google登录：前端向后端发送Token验证需求

完全可行，以下是具体实现步骤（从你的代码className判断，推测是React项目）：

1. 替换原有按钮，添加点击事件 #

把原来的<a>标签改成按钮（或给<a>添加onClick并阻止默认跳转），因为需要触发JS逻辑而非页面跳转：

<button className={styles.continue_with_email} onClick={handleGoogleLogin}>
  Continue With Google
</button>

2. 引入Google登录SDK #

在项目的public/index.html中添加Google登录客户端脚本：

<script src="https://accounts.google.com/gsi/client" async defer></script>

3. 实现登录逻辑与Token发送 #

在组件中编写处理函数，完成Google登录弹窗触发、Token获取及后端验证请求：

const handleGoogleLogin = () => {
  // 初始化Google登录客户端（建议在组件挂载时执行一次，而非每次点击）
  window.google.accounts.id.initialize({
    client_id: '你的Google客户端ID', // 替换为Google Cloud Console中获取的ID
    callback: handleCredentialResponse
  });

  // 弹出Google登录选择框
  window.google.accounts.id.prompt();
};

const handleCredentialResponse = (response) => {
  // 从响应中提取Google ID Token
  const idToken = response.credential;

  // 将Token发送到后端验证接口
  fetch('/api/auth/google/verify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ id_token: idToken }),
  })
  .then(res => res.json())
  .then(data => {
    // 根据后端返回结果处理后续逻辑
    if (data.success) {
      // 登录成功，比如跳转到首页或用户面板
      window.location.href = '/dashboard';
    } else {
      alert('登录验证失败，请重试');
    }
  })
  .catch(err => console.error('请求出错:', err));
};

关键注意事项 #

• 获取Google客户端ID：需要在Google Cloud Console创建项目，启用Google登录服务，并配置允许的域名（否则会出现跨域/授权错误）。
• 后端验证逻辑：后端需要使用Google官方提供的验证库（比如Node.js用google-auth-library），验证Token的签名、有效期、受众等信息，确保Token合法。
• 错误处理：要考虑用户取消登录、网络请求失败、Token验证不通过等异常场景，给出友好提示。

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