Ionic2认证firebase

Question

我正在通过离子2中的手机数量创建一个身份验证系统，为此我使用谷歌指南

首先，我相信一个firebase.auth.RecaptchaVerifier（是必要的参数之一）

this.autVer = new firebase.auth.RecaptchaVerifier('contCatcha', {
'size': 'invisible',
'callback': function (response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
}
});

和laster使用auth.signInWithPhoneNumber angularfire

this.afAuth.auth.signInWithPhoneNumber("+57" + this.numeroCelular, this.autVer).then(verificationId => {
console.log("SMS Enviado");
this.confor = verificationId;
this.loading.dismiss();
this.estado = 1;
this.esperarCodigo();
})

其中第二个参数是firebase.auth.RecaptchaVerifier创建的

在我的电脑浏览器中一切正常，但在手机上显示以下错误信息：

我需要更换那个firebase.auth.RecaptchaVerifier，但我不知道是否有任何插件或子仪表可以做到并且一切正常，我非常感谢你的建议

Answer 1

遗憾的是，使用Firebase JS库的电话身份验证在Cordova / Ionic环境中无法运行，因为reCAPTCHA无法验证应用程序的来源。这是因为原点看起来像file：//assets/index.html。

您可以采取以下措施：Firebase Phone auth for web取决于应用验证程序接口：RecaptchaVerifier实现的https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier。它定义了一个属性'type'，它应该等于'recaptcha'。它定义了一个方法verify（）：Promise，它使用reCAPTCHA令牌解析。

您可以做的是您需要打开一个网站，渲染reCAPTCHA，获取reCAPTCHA令牌，然后将其传递回您的应用程序，您将在其中实现自己的firebase.auth.Application Verifier

最安全的方法如下：

1. 打开Chrome自定义标签或SFSafariViewController（不要使用嵌入式网页浏览）并重定向到您拥有的网站，并在Firebase控制台中将其列入白名单，其中将展示firebase.auth.RecaptchaVerifier。你可以使用cordova-plugin-browsertab。
2. 然后，使用FDL（Firebase动态链接）将reCAPTCHA响应令牌传递回您的应用，并将其添加到深层链接中。这可以保证只有您的应用才能打开它。您需要配置Firebase动态链接才能使其正常工作。
3. 您需要在移动应用中收听传入的链接。您可以使用cordova-universal-links-plugin。
4. 从深层链接解析reCAPTCHA令牌。在firebase.auth.ApplicationVerifier实现中重新打包它。您现在可以将其传递给signInWithPhoneNumber以完成登录。

这需要一些工作，但有必要将网络钓鱼攻击和滥用的风险降至最低。

Answer 2

首先，Cordova / Ionic使用file：///协议，因此Recaptcha将不适用于您的应用程序（仅在浏览器上，因为它是http）。 Firebase / Recaptcha库检查location.protocol并期望http / https，但是如上所述，Cordova不是这种情况。可能的解决方法是在手机上运行本地服务器。例如cordova-httpd或cordova-plugins＃local-webserver（或应用程序内的http浏览器）。之后，您可以实现隐形验证码（如firebase文档中所述）。但是，有时用户会得到一个弹出窗口来解决验证码，因此它并不理想。

由于在移动环境中使用验证码是没有意义的（至少在大多数情况下），我开始研究Cordova / Ionic的firebase电话验证的本机实现。我开始使用iOS版本。

有人可以支持我实现java / android版本吗？

https://github.com/guyromb/cordova-firebase-phoneauth

Answer 3

如果您不想使用bojeil建议的动态/深层链接，您可以尝试这样做：

使用Cordova，我将所有身份验证过程移动到我服务器上托管的网页。从我的应用程序中，我使用应用内浏览器启动网页，然后通过长时间轮询充当中间人的服务器来执行所有应用程序 - 浏览器通信。我甚至设法解析了SMS并最终自动关闭了浏览器。

为了实现这一点，请注意安全性，这可能非常棘手。

或者，您可以使用Firebase实时数据库而不是服务器轮询来传递消息。

您可能需要这些cordova插件：

• InAppBrowser
• BackgroundMode
• 允许
• Cordova SMS Receiver插件

Answer 4

我无法应用@bojeil的解决方法，因为我无法找到自己实现ApplicationVerifier的方法。但是，我能够使用cordova firebase插件在Android上实现Firebase Phone身份验证，如in this video所述。希望能帮助到你。