首先,当我在我的本地(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
1条答案
按热度按时间lo8azlld1#
我在其他平台上也遇到了同样的问题。我不熟悉react语法,但我怀疑您正在使用以下行设置回调URL…
我还怀疑IP地址是指你的机器上的一切工作。你可能想尝试一个本地主机或127.0.0.1为iOS设备,看看你是否可以至少看到短语“收到回调”在iPhone和iPad上。在这一点上,事情将正常工作。当您返回到应用程序时(无论是自动执行还是需要手动切换回应用程序),身份验证都应获得批准。