當(dāng)我使用 HTML API 方法時(shí)，我遇到了類似的問題，所以我最終使用了JavaScript API。
這就是我所做的：
首先，確保安裝@types/google-one-tap軟件包。
正如您所提到的，我還將腳本導(dǎo)入到我的index.html文件中，如下所示：
<body>?
?<script?src="https://accounts.google.com/gsi/client"?async?defer></script>
??<app-root>
??</app-root></body>
現(xiàn)在，繼續(xù)討論您的主要組件，在我的例子中是app.component.ts，首先導(dǎo)入以下內(nèi)容：
import { CredentialResponse, PromptMomentNotification } from 'google-one-tap';
然后，您可以將其添加到ngOnInit().?請務(wù)必閱讀文檔以獲取有關(guān)onGoogleLibraryLoad事件的更多詳細(xì)信息：
// @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函數(shù)是您使用用戶憑據(jù)處理實(shí)際響應(yīng)的地方。就我而言，我想先對其進(jìn)行解碼。查看此內(nèi)容以獲取有關(guān)憑證解碼后的外觀的更多詳細(xì)信息： https:?//developers.google.com/identity/gsi/web/reference/js-reference#credential
// @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!');
? ? ? });
? ? }
? });
};
