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

时间:2018-11-12 09:21:51

标签: firebase browser firebase-authentication recaptcha recaptcha-v3

我真的很喜欢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 Screen Print 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)使用了以https://www.google.com/recaptcha/api2/anchor?ar=1&amp;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
    }
}

1 个答案:

答案 0 :(得分:0)

哦,哦...

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

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

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

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

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