我想在我的 Angular 11 应用程序中使用 Google One Tap。关注 documentation我添加了 <script async defer src="https://accounts.google.com/gsi/client"></script>到我的 html，然后在我的 app.component.html 中使用以下代码:
<div id="g_id_onload"
data-client_id="MY_GOOGLE_CLIENT_ID"
data-callback="handleCredentialResponse",
data-cancel_on_tap_outside="false">
</div>
handleCredentialResponse在 app.component.ts ，我收到以下错误:[GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.如果我尝试使用 JavaScript API，Typescript 会抛出以下错误:Property 'accounts' does not exist on type 'typeof google'我应该怎么做才能在 Angular 中使用 Google One Tap？
最佳答案
我在使用 HTML API 方法时遇到了类似的问题，所以我最终使用了 JavaScript API instead .
这是我所做的:
首先，确保安装@types/google-one-tap包裹。
正如你提到的，我还在我的 index.html 中导入脚本。文件，像这样:
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<app-root></app-root>
</body>
app.component.ts ，首先导入以下内容:import { CredentialResponse, PromptMomentNotification } from 'google-one-tap';然后，您可以将其添加到 ngOnInit() .请务必阅读文档以获取有关 onGoogleLibraryLoad 的更多详细信息事件:// @ts-ignore
window.onGoogleLibraryLoad = () => {
console.log('Google\'s One-tap sign in script loaded!');
// @ts-ignore
google.accounts.id.initialize({
// Ref: https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration
client_id: 'XXXXXXXX',
callback: this.handleCredentialResponse.bind(this), // Whatever function you want to trigger...
auto_select: true,
cancel_on_tap_outside: false
});
// OPTIONAL: In my case I want to redirect the user to an specific path.
// @ts-ignore
google.accounts.id.prompt((notification: PromptMomentNotification) => {
console.log('Google prompt event triggered...');
if (notification.getDismissedReason() === 'credential_returned') {
this.ngZone.run(() => {
this.router.navigate(['myapp/somewhere'], { replaceUrl: true });
console.log('Welcome back!');
});
}
});
};
handleCredentialResponse函数是您使用用户凭证处理实际响应的地方。就我而言，我想先解码它。查看此内容以获取有关凭据在解码后的外观的更多详细信息:https://developers.google.com/identity/gsi/web/reference/js-reference#credentialhandleCredentialResponse(response: CredentialResponse) {
// Decoding JWT token...
let decodedToken: any | null = null;
try {
decodedToken = JSON.parse(atob(response?.credential.split('.')[1]));
} catch (e) {
console.error('Error while trying to decode token', e);
}
console.log('decodedToken', decodedToken);
}
关于javascript - 在 Angular 中使用 Google One Tap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65439066/