01 / CONFIGURATION

一处配置，
处处登录。

把 Google 登录接进任何 Web 项目，只需要改一个配置文件。右侧是实时渲染，不需要构建工具，也不需要框架。

接入

登录模式离线模拟，不产生任何网络请求。

Client ID Google Cloud Console → OAuth 2.0 客户端 ID（Web 应用）

权限范围可选仅 token / code 模式生效，用逗号分隔

按钮外观

渲染方式

主题

尺寸

形状

文案

语言

行为

会话持久化保存凭证会引入 XSS 风险，生产环境建议由后端下发 HttpOnly Cookie

启用 One Tap 一键登录仅 id 模式

真实上线只需两步：把 mode 改成 id，填入 clientId。其余配置全部可选。

02 / LIVE PREVIEW

初始化中

用 Google 账号继续

登录后会返回一份统一结构的会话对象，可直接对接你的业务代码。

当前为离线模拟：点击按钮即可走完整套登录状态流转。

03 / EVENT LOG

自绘按钮使用官方四色 G、Roboto Medium 14/20 与规定色值；id 模式默认直接由 Google Identity Services 渲染官方按钮。

UMD 与 ESM 双产物，无框架、无构建步骤；配置对象集中在一个文件，换项目只需复制目录并改 clientId。

原生 button、44px 触摸目标、可见焦点环、aria-live 状态播报；状态机与事件订阅让任何框架都能同步登录态。

一处配置，处处登录。