NodeJS 不同设备上的Google身份验证在本地测试时不起作用(Reactjs)

nwo49xxi  于 2023-06-22  发布在  Node.js
关注(0)|答案(1)|浏览(136)

首先,当我在我的本地(Windows)笔记本电脑上(与运行nodejs服务器的笔记本电脑相同)测试Google Authentication v.9(登录和注册)时,它工作得很好。
应用程序几乎完全完成,并准备部署,所以我想在其他设备上测试它了。所以,我用我的iPad和iPhone,去了ip.address:3000,在那里我得到了开始的页面。但是当我点击“用谷歌登录”的时候,没有弹出窗口。只有一个空白的新标签页打开(accounts.google)。两种设备上都允许弹出窗口。
这是正常的行为吗?或者我做错了什么代码。然后我再次检查了我的(本地)Windows笔记本电脑,一切都正常工作。但是我注意到在控制台中有一个错误消息'Cross-Origin-Opener-Policy policy would block the window.postMessage call.'。这就是它在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上试用时,没有弹出,只出现一个空白的白色屏幕。我认为这一个应该是一个我可以选择哪个谷歌帐户选择。正在刷新此页面...保持空白。Safari、Chrome也有同样的表现。这是打开的空白选项卡的URL:https://accounts.google.com/gsi/xxx.apps.googleusercontent.com&ux_mode=popup&ui_mode=card&asxxxxxxxxxxx192.168.0.999%3A3000

lo8azlld

lo8azlld1#

我在其他平台上也遇到了同样的问题。我不熟悉react语法,但我怀疑您正在使用以下行设置回调URL…

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

我还怀疑IP地址是指你的机器上的一切工作。你可能想尝试一个本地主机或127.0.0.1为iOS设备,看看你是否可以至少看到短语“收到回调”在iPhone和iPad上。在这一点上,事情将正常工作。当您返回到应用程序时(无论是自动执行还是需要手动切换回应用程序),身份验证都应获得批准。

相关问题