首先,当我在本地(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
我在其他平台上工作时也遇到过同样的问题。我不熟悉 React 语法,但我怀疑您正在使用以下行设置回调 URL...
我还怀疑该 IP 地址正在引用您的机器,一切正常。您可能想尝试使用 localhost 或 iOS 设备的 127.0.0.1,看看是否至少可以在 iphone 和 ipad 上看到“callback returned”这一短语。到那时,一切都会正常进行。当您返回应用程序时(无论是自动发生还是需要手动切换回应用程序),身份验证应获得批准。