vue3-google-login：自定义按钮能否返回CredentialResponse（JWT）？

可以实现。默认自定义按钮使用initCodeClient（授权码模式）返回code，只需调整组件配置切换到令牌模式，就能返回包含credential（JWT）的CredentialResponse对象。

解决方法 #

给GoogleLogin组件添加以下配置：

• 必须指定client-id（谷歌云平台申请的客户端ID）
• 添加response-type="id_token"属性，或显式设置use-code-client="false"

修改后的示例代码 #

<GoogleLogin
  client-id="你的谷歌客户端ID"
  :callback="onLogin"
  response-type="id_token"
>
  <button>Login with Google</button>
</GoogleLogin>

<script setup>
const onLogin = (resp) => {
  console.log(resp) // 输出包含credential字段的CredentialResponse对象
}
</script>

原理说明 #

• 当配置response-type="id_token"时，组件会使用initTokenClient初始化令牌客户端，登录后直接返回ID令牌（即credential字段的JWT）
• 这和谷歌原生渲染按钮的逻辑一致，都遵循OAuth 2.0的ID令牌流程

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