如何在Phaser 3中自定义Google Identity登录按钮而非使用iframe？

Google近期推出了新的Google Identity平台，同时弃用了旧的“Google Sign-In for Web”平台。我在基于Canvas GUI的Phaser 3游戏中尝试添加自定义Google登录按钮，但遇到了阻碍——新平台强制使用iframe，个性化选项非常有限。

我的核心需求有两个：

• 如何在新的Google Identity中创建自定义按钮，而非使用Google提供的iframe？我需要按钮作为Canvas渲染的对象进行缩放，而不是DOM元素。
• 有没有办法在按钮渲染完成后修改它的属性？比如下面代码里的width参数，或许可以通过给window添加resize事件监听器手动缩放按钮，但我找不到具体实现方式。

google.accounts.id.renderButton(document.getElementById('google-login'), {
    theme: 'outline',
    size: 'large',
    type: 'standard',
    width: '256', // <--- 这里想修改的属性
})

一、实现Canvas渲染的自定义登录按钮 #

Google Identity的安全机制确实依赖官方iframe处理授权流程，但你可以通过自定义触发授权请求的方式，用Phaser的Canvas按钮替代官方DOM按钮：

1. 在Phaser场景中创建自定义Canvas按钮（用Sprite、Graphics等组件），完全由你控制样式、缩放和交互逻辑。
2. 给按钮添加点击事件，直接触发Google的授权请求，无需依赖官方渲染的按钮。
3. 提前用google.accounts.id.initialize()配置好授权参数，点击时调用google.accounts.id.prompt()唤起授权弹窗，示例代码如下：

// 初始化Google Identity授权配置
google.accounts.id.initialize({
    client_id: '你的客户端ID',
    callback: handleCredentialResponse // 登录成功后的回调函数
});

// 在Phaser场景中创建自定义登录按钮
this.add.sprite(400, 300, 'custom-login-btn')
    .setInteractive()
    .on('pointerdown', () => {
        // 触发Google授权流程
        google.accounts.id.prompt();
    });

这种方式下，授权弹窗仍由Google管控，但触发按钮是完全自定义的Canvas元素，能完美适配Phaser的缩放需求。

二、动态修改已渲染的Google按钮属性 #

如果仍想使用官方渲染的按钮，但需要动态调整属性，推荐采用重新渲染按钮的方式：

1. 封装一个更新按钮的函数，每次修改时先清空容器内的旧按钮，再调用renderButton传入新参数：

function updateGoogleButtonWidth(newWidth) {
    const buttonContainer = document.getElementById('google-login');
    // 清空容器内的旧iframe按钮
    buttonContainer.innerHTML = '';
    // 重新渲染按钮，传入新的宽度参数
    google.accounts.id.renderButton(buttonContainer, {
        theme: 'outline',
        size: 'large',
        type: 'standard',
        width: newWidth.toString()
    });
}

// 监听窗口resize事件，动态调整按钮宽度
window.addEventListener('resize', () => {
    // 这里可以根据Phaser画布的尺寸计算合适的按钮宽度
    const gameCanvas = document.getElementById('phaser-game');
    const newButtonWidth = Math.floor(gameCanvas.offsetWidth * 0.4);
    updateGoogleButtonWidth(newButtonWidth);
});

注意：直接修改Google iframe的样式会因为同源策略限制，可能引发安全问题或失效，因此重新渲染是更可靠的方案。

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