在浏览器中的Firebase Phone Auth应用上，Recaptcha在视觉上损坏了

Question

我真的很喜欢Firebase电话身份验证。我在2017年2月使用

编写了一个项目

<script src="https://cdn.firebase.com/libs/firebaseui/2.3.0/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.3.0/firebaseui.css" />

效果不错：

我正在尝试创建新的类似产品。以为我会继续使用最新版本的Firebase Auth资料。 firebaseui.js和.css版本3.4.1不幸的是，新的Recaptcha完全终止了该项目。

...这是第二阶段。您不能在离屏幕太远的地方导航。当前无法使用此功能。

我正在仔细查看iframe内容，包括所有相关的CSS设置。乍一看似乎没有什么不对劲，但是新东西看起来很糟糕，而且完全没有功能。

不清楚每个UI版本涉及哪个Recaptcha版本。对于简单的复选框初始区域，旧的2.3.0版本使用以下iframe开头：https://www.google.com/recaptcha/api2/anchor?ar=2&k=...。较新的，不可读的版本（来自firebaseui 3.4.1）使用了以https://www.google.com/recaptcha/api2/anchor?ar=1&k=...

开头的iframe

我一直在测试很久，以至于我遇到ReCaptcha错误，

  

您的计算机或网络可能正在发送自动查询。保护   我们的用户，我们现在无法处理您的请求。更多细节   访问我们的帮助页面   link

此网站仅适用于通过手机使用。在现有状态下，没有用户会理解他们必须单击框才能进入下一个reCaptcha阶段...

是否有任何解决方法？据我所知，如果您将电话身份验证与Firebase Auth一起使用，则必须使用reCaptcha。

我如何清理第一阶段的验证码“选中此框”。我该如何清理第二阶段的验证码“选择带有人行横道/公交车/橙色贴砖的广场”。

（在那个阶段，我很想尝试...）

@media (max-width:320px) {
    .firebaseui-recaptcha-container>div>div {
        transform: scale(.7);
        -webkit-transform: scale(.7);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0
    }
}

Answer 1

哦，哦...

因此，我仍然在处理这个问题。上面完成的工作是使用Chrome和开发人员工具（右键单击->检查），然后选择要显示的移动设备。图像是我笔记本电脑上的屏幕打印。

我想我会再尝试一次，这次是使用我的本地家庭网络使用真实的手机。在笔记本电脑本地主机（端口8000）上运行的节点服务器。通过笔记本电脑的本地IP地址（例如192.168.1.19:8000）链接的电话

哇。显示屏完全正常，可以在手机上读取。现在，我无法直接对我的客户端代码/ javascript内容进行故障排除，但是我可以使它正常工作。在全屏模式下，Recaptcha显示屏看起来不错。我可以在笔记本电脑上对代码进行故障排除，在手机上进行验证。目前尚不清楚这是在某处对CSS的修改，还是chrome开发工具渲染中的断开连接？

通常我会删除整个问题，但是我怀疑也许有人会遇到这个愚蠢的难题。我刚刚浪费了三个小时的生命，我再也回不来了。

这里的答案是，您在开发工具浏览器中（在移动设备显示模式下）看到的内容可能无法反映您在实际移动设备上看到的内容。在浪费时间之前检查一下两者。