通过google JavaScript GSI SDK返回ID令牌

Question

我目前正在集成一个前端与第三方后端，提供登录与社交媒体。我使用的是Google JS SDK https://accounts.google.com/gsi/client，它可以很好地使用一键登录，因为它返回后端需要的ID令牌。但是，缺点是，如果用户没有Google会话，则提示不会显示。

如果用户没有登录到Google，我已经设法提示一个登录表单并在成功登录时请求一个令牌，但是，它只返回一个访问令牌。有什么方法可以请求一个ID令牌吗?

的例子:

google.accounts.id.prompt(async notification => {
if (notification.getNotDisplayedReason() === 'opt_out_or_no_session') {
const tokenClient = google.accounts.oauth2.initTokenClient({
client_id: googleClientId,
scope: 'openid email profile',
})
tokenClient.callback = response => {
// response only has access token and no ID Token
}
tokenClient.requestAccessToken({ prompt: 'consent' })
}
window.addEventListener('load', () => {
google.accounts.id.initialize({
client_id: googleClientId,
callback: (user: CredentialResponse) => {
const { credential: idToken } = user
// I need idToken in the above requestAccessToken too
},
})
})
})

Answer 1

在您提供的示例中初始化了两个不同的名称空间。第一个初始化oauth2名称空间，它启动授权流。正如您已经实现的那样，该流导致获取access_token。

第二个初始化id名称空间，该名称空间负责身份验证流。这将返回一个id_token，这正是您真正需要的。

要继续使用身份验证流，而不是一键登录的能力，您可以使用身份验证初始化呈现一个Sign-In with Google按钮。简单地初始化google.account.id.initialize()。然后调用一键提示

google.accounts.id.prompt();

除此之外，你还可以渲染按钮:

google.accounts.id.renderButton(document.getElementById("g-btn"), {
type: "standard",
logo_alignment: "left"
});

和

<div class="google-button" id="g-btn"></div>

无论用户决定如何登录，它都将导致您在initialize()调用中定义的相同回调方法。