Recaptcha 在 Firebase Phone 浏览器中的 Auth App 上视觉损坏
Recaptcha Visually Broken on Firebase Phone Auth App in the Browser
我非常喜欢 Firebase phone 身份验证。我在 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 错误，唉。
Your computer or network may be sending automated queries. To protect
our users, we can't process your request right now. For more details
visit our help page
link
本网站仅供手机使用phone。在现有状态下，没有用户会明白他们必须单击该框才能进入下一个 reCaptcha 阶段...
是否有解决此问题的解决方法？据我所知，如果您对 Firebase Auth 使用 phone 身份验证，则必须使用 reCaptcha。
如何清理第一阶段重新验证，"Check the box"。我怎样才能清理第二阶段的 recaptcha "Select the square with the crosswalk / bus / orange aligators" 。
（对于那个阶段，我很想尝试...）
@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
}
}
哎哟哎哟……
所以我还在研究这个...上面完成的工作是使用 Chrome 和开发人员工具（右键单击 --> 检查），然后选择要显示的移动设备。这些图像是我笔记本电脑的屏幕打印。
我想我会再试一次，这次使用真正的移动设备 phone，使用我的本地家庭网络。笔记本电脑本地主机上的节点服务器 运行，端口 8000。Phone 通过笔记本电脑的本地 IP 地址链接（例如 192.168.1.19:8000）
哇。显示完全正常且可读，符合我 phone 的预期。现在我无法直接解决我的客户端代码/ javascript 那里的问题，但我当然可以完成这项工作。 recaptcha 显示在全屏模式下看起来不错。我可以在笔记本电脑上对代码进行故障排除，在手机上进行验证 phone。目前尚不清楚这是对 CSS 某处的修改，还是 chrome 开发工具渲染中的断开连接？
通常我会删除整个问题，但我怀疑其他人可能会遇到这个愚蠢的困境。我刚刚浪费了我生命中的三个小时，我再也回不来了。
这里的答案是，您在开发工具浏览器中看到的（在移动设备显示模式下）可能不会反映您在实际移动设备上看到的内容。在浪费时间之前检查两者。
我非常喜欢 Firebase phone 身份验证。我在 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=...
我已经测试了很长时间，以至于出现了 ReCaptcha 错误，唉。
Your computer or network may be sending automated queries. To protect our users, we can't process your request right now. For more details visit our help page link
本网站仅供手机使用phone。在现有状态下，没有用户会明白他们必须单击该框才能进入下一个 reCaptcha 阶段...
是否有解决此问题的解决方法？据我所知，如果您对 Firebase Auth 使用 phone 身份验证，则必须使用 reCaptcha。
如何清理第一阶段重新验证，"Check the box"。我怎样才能清理第二阶段的 recaptcha "Select the square with the crosswalk / bus / orange aligators" 。
（对于那个阶段，我很想尝试...）
@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
}
}
哎哟哎哟……
所以我还在研究这个...上面完成的工作是使用 Chrome 和开发人员工具（右键单击 --> 检查），然后选择要显示的移动设备。这些图像是我笔记本电脑的屏幕打印。
我想我会再试一次，这次使用真正的移动设备 phone，使用我的本地家庭网络。笔记本电脑本地主机上的节点服务器 运行，端口 8000。Phone 通过笔记本电脑的本地 IP 地址链接（例如 192.168.1.19:8000）
哇。显示完全正常且可读，符合我 phone 的预期。现在我无法直接解决我的客户端代码/ javascript 那里的问题，但我当然可以完成这项工作。 recaptcha 显示在全屏模式下看起来不错。我可以在笔记本电脑上对代码进行故障排除，在手机上进行验证 phone。目前尚不清楚这是对 CSS 某处的修改，还是 chrome 开发工具渲染中的断开连接？
通常我会删除整个问题，但我怀疑其他人可能会遇到这个愚蠢的困境。我刚刚浪费了我生命中的三个小时，我再也回不来了。
这里的答案是，您在开发工具浏览器中看到的（在移动设备显示模式下）可能不会反映您在实际移动设备上看到的内容。在浪费时间之前检查两者。