本地测试时,不同设备上的 Google 身份验证不起作用(Reactjs)
P粉111641966
P粉111641966 2023-09-07 23:29:31
0
1
686

首先,当我在本地(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

P粉111641966
P粉111641966

全部回复(1)
P粉797855790

我在其他平台上工作时也遇到过同样的问题。我不熟悉 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”这一短语。到那时,一切都会正常进行。当您返回应用程序时(无论是自动发生还是需要手动切换回应用程序),身份验证应获得批准。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!