本地测试时，不同设备上的 Google 身份验证不起作用（Reactjs）

Question

首先，当我在本地（Windows）笔记本电脑（与运行 NodeJS 服务器的计算机相同）上测试时，Google Authentication v.9（登录和注册）运行良好。

应用程序几乎完全完成并准备好部署，所以我也想在其他设备上测试它。 因此，我使用 iPad 和 iPhone 访问 ip.address:3000，在那里我得到了打开的页面。但是当我点击“使用 Google 登录”时，没有弹出窗口。仅打开一个空白的新选项卡 (accounts.google)。两种设备都允许弹出窗口。

这是正常行为吗？或者我在代码方面做错了什么。 然后我再次检查我的（本地）Windows 笔记本电脑，一切正常。 但我注意到控制台中有一条错误消息“Cross-Origin-Opener-Policy 策略将阻止 window.postMessage 调用。”。这就是它不能在 ios 设备上运行的原因吗？我已经寻找了几个小时，但似乎还没有解决这个问题的方法。

当我将其部署在 www 上时，是否会出现相同的行为？

我知道，这是一个奇怪的问题。我完全意识到我可能做错了什么或忘记了什么。 但我希望有人能帮助我。

编辑： 这是我运行的代码

const { handleGoogle, loading, error } = useFetch('http://192.168.0.999:8800/login');


useEffect(() => {
    /* global google */
    if (window.google) {
        google.accounts.id.initialize({
            client_id: 'xxxxxxxxxxx.apps.googleusercontent.com',
            callback: handleGoogle
        });
        google.accounts.id.renderButton(document.getElementById('loginDiv'), {
                    theme: 'outline',
                    text: 'continue with',
                    shape: 'pill',
                    //size: 'small'
        })
    }
}, [handleGoogle]);

它在我的本地计算机上运行良好。但当我在 iPad 或 iPhone 上尝试时，没有弹出窗口，只有空白屏幕。我认为这个应该是我可以选择哪个Google帐户的地方。刷新此页面...保持空白。 Safari、Chrome 显示相同的行为。 这是打开的空白选项卡的网址：https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999%3A3000

Answer 1

我在其他平台上工作时也遇到过同样的问题。我不熟悉 React 语法，但我怀疑您正在使用以下行设置回调 URL...

const { handleGoogle, loading, error } = useFetch('http://192.168.0.999:8800/login');

我还怀疑该 IP 地址正在引用您的机器，一切正常。您可能想尝试使用 localhost 或 iOS 设备的 127.0.0.1，看看是否至少可以在 iphone 和 ipad 上看到“callback returned”这一短语。到那时，一切都会正常进行。当您返回应用程序时（无论是自动发生还是需要手动切换回应用程序），身份验证应获得批准。