0

我真的很喜欢 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" />

相当不错的结果:

Recaptcha 屏幕打印 Firebase UI v2.3.0

我正在尝试创建一个新的类似产品。以为我会继续使用最新版本的 Firebase Auth 东西。firebaseui.js 和 .css 版本 3.4.1 不幸的是,新的 Recaptcha 完全扼杀了该项目。

Recaptcha Firebase UI v3.4.1 num 1

...这是第二阶段。你不能在屏幕外导航太远。这在当前形式中是不可用的。

Recaptcha Firebase UI v3.4.1 num 2

我正在仔细研究 iframe 的内容,包括所有相关的 CSS 设置。乍一看似乎没什么问题,但新东西看起来很糟糕,而且完全没有功能。

目前尚不清楚每个 UI 版本都涉及哪个版本的 recaptcha。对于简单的复选框初始区域,旧的 2.3.0 版本使用一个 iframe 开始:https://www.google.com/recaptcha/api2/anchor?ar=2&amp;k=.... 较新的、不可读的版本(来自 firebaseui 3.4.1)使用 iframe 启动https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=...

我现在已经测试了很长时间,以至于我收到了 ReCaptcha 错误,叹息。

您的计算机或网络可能正在发送自动查询。为了保护我们的用户,我们现在无法处理您的请求。有关更多详细信息,请访问我们的帮助页面 链接

本网站仅供通过手机使用。在现有状态下,没有用户会明白他们必须单击框才能进入下一个 reCaptcha 阶段......

清理这个的任何解决方法?据我所知,如果您通过 Firebase Auth 使用电话身份验证,则必须使用 reCaptcha。

我怎样才能清理第一阶段的recaptcha,“检查框”。我怎样才能清理第二阶段的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
    }
}
4

1 回答 1

0

呜呜呜……

所以我还在玩这个......上面所做的工作是使用 Chrome 和开发人员工具(右键单击 --> 检查),然后选择移动设备进行显示。这些图像是我笔记本电脑的屏幕打印。

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

哇。显示完全正常,可以在我的手机上读取。现在我不能直接在那里解决我的客户端代码/javascript问题,但我当然可以做到这一点。在全屏模式下,recaptcha 显示看起来不错。我可以在笔记本电脑上排查代码,在手机上验证。目前尚不清楚这是对某处 CSS 的修改,还是 chrome 开发工具渲染中的断开连接?

通常我会删除整个问题,但我怀疑也许其他人可能会遇到这个愚蠢的困境。我刚刚浪费了我生命中的三个小时,我再也回不来了。

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

于 2018-11-12T09:45:58.373 回答