自定义Google Sign-In按钮实现本地登录遇域名未注册错误求助

AI 小北

2026-7-20

解决Google Sign-In本地部署错误并实现登录功能

一、解决"Not a valid origin"错误

你的核心问题是https://localhost:8443未在对应Client ID的授权来源列表中注册，按以下步骤操作：

打开Google开发者控制台，定位到Client ID为247458862265-di55v7mhm4l4bto043aavspg7tql7on1.apps.googleusercontent.com的项目
进入「API和服务」→「凭据」页面
找到对应的OAuth 2.0客户端ID，点击编辑
在「已授权的JavaScript来源」中添加https://localhost:8443
保存配置，等待1-2分钟让设置生效

二、实现Google Sign-In登录按钮

完成上述配置后，按以下步骤在本地网站中添加登录功能：

1. 加载Google Sign-In脚本

在HTML页面的<head>或<body>末尾添加：

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

2. 添加登录按钮组件

在页面需要显示按钮的位置插入：

<div id="g_id_onload"
     data-client_id="247458862265-di55v7mhm4l4bto043aavspg7tql7on1.apps.googleusercontent.com"
     data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

3. 编写回调函数获取用户信息

在页面中添加JavaScript代码处理登录结果：

function handleCredentialResponse(response) {
  // 解析JWT令牌获取用户核心信息
  const payload = JSON.parse(atob(response.credential.split('.')[1]));
  console.log("用户账号信息：", {
    id: payload.sub,
    name: payload.name,
    email: payload.email,
    avatar: payload.picture
  });
  
  // 此处可将用户信息发送至后端完成登录逻辑
  // 示例：
  // fetch('/your-backend-login-endpoint', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify({ credential: response.credential })
  // })
}