[GSI_LOGGER]：“callback”的值不是函数。配置被忽略

Question

我正在从Google 登录平台迁移到较新的Google Identity Services 库。

应用程序.svelte：

<svelte:head>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
</svelte:head>

<div id="g_id_onload"
     data-client_id="x.apps.googleusercontent.com"
     data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin"
     data-type="standard"
     data-size="large"
     data-theme="outline"
     data-text="sign_in_with"
     data-shape="rectangular"
     data-logo_alignment="left">
</div>

<script>
    function decodeJwtResponse(token) {
        let base64Url = token.split('.')[1]
        let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        let jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
        return JSON.parse(jsonPayload)
    }

    let responsePayload;
    function handleCredentialResponse(response) {
        // decodeJwtResponse() is a custom function defined by you
        // to decode the credential response.
        responsePayload = decodeJwtResponse(response.credential);

        console.log("ID: " + responsePayload.sub);
        console.log('Full Name: ' + responsePayload.name);
        console.log('Given Name: ' + responsePayload.given_name);
        console.log('Family Name: ' + responsePayload.family_name);
        console.log("Image URL: " + responsePayload.picture);
        console.log("Email: " + responsePayload.email);
    }
</script>

重新加载页面，我在控制台中看到此错误：

[GSI_LOGGER]：“callback”的值不是函数。配置被忽略。

问题是什么？

Answer 1

经过几个小时的搜索，我找到了这个答案：从全局范围调用 Svelte 组件的函数

简而言之，handleCredentialResponse需要是全局（窗口）范围。

JavaScript

window.handleCredentialResponse = (response) => {
  // decodeJwtResponse() is a custom function defined by you
  // to decode the credential response.
  responsePayload = decodeJwtResponse(response.credential);

  console.log("ID: " + responsePayload.sub);
  console.log('Full Name: ' + responsePayload.name);
  console.log('Given Name: ' + responsePayload.given_name);
  console.log('Family Name: ' + responsePayload.family_name);
  console.log("Image URL: " + responsePayload.picture);
  console.log("Email: " + responsePayload.email);
}

打字稿

您需要修改Window接口，以便 TS 不会引发错误：How do you expressly set a new property on `window` in TypeScript?

// global.d.ts

export {};

declare global {
  interface Window {
    handleCredentialResponse: (response: any) => void;
  }
}

Answer 2

看起来我们必须使用Javascript呈现“使用 Google 登录”按钮。

• https://www.nielsvandermolen.com/external-javascript-sveltejs/
• https://www.reddit.com/r/sveltejs/comments/otbrsm/how_do_i_add_a_script_normally_used_with_script/h6wvopt

<svelte:head>
    <script src="https://accounts.google.com/gsi/client" async defer on:load={googleLoaded}></script>
</svelte:head>

<script>
    import { onMount } from 'svelte';
    let googleReady = false;
    let mounted = false;

    onMount(() => {
        mounted = true;
        if (googleReady) {
            displaySignInButton()
        }
    });

    function googleLoaded() {
        googleReady = true;
        if (mounted) {
            displaySignInButton()
        }
    }

    function displaySignInButton() {
        google.accounts.id.initialize({
            client_id: "x.apps.googleusercontent.com",
            callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
    }