Ionic2 身份验证 Firebase

Question

我正在创建一个通过 ionic 2 中的手机号码进行身份验证的系统，为此我使用了谷歌指南

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

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

最后使用 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

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

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

Answer 1

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

Answer 2

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

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

为此，请注意安全性，这可能非常棘手。

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

您可能需要这些 cordova 插件：

• InAppBrowser
• 背景模式
• 权限
• Cordova SMS 接收器插件

Answer 3

首先，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 4

很遗憾，使用 Firebase JS 库的电话身份验证将无法在 Cordova/Ionic 环境中工作，因为 reCAPTCHA 将无法验证您的应用程序的来源。这是因为来源看起来像 file://assets/index.html。

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

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

最安全的方法如下：

1. 打开 chrome 自定义选项卡或 SFSafariViewController（不要使用嵌入式 Web 视图）并重定向到您拥有的网站，并在 Firebase 控制台中将其列入白名单，其中将呈现 firebase.auth.RecaptchaVerifier。您可以为此使用cordova-plugin-browsertab。

2. 然后，您使用 FDL（Firebase 动态链接）将 reCAPTCHA 响应令牌传回您的应用，并将其添加到深层链接中。这保证只有您的应用程序可以打开它。您需要配置 Firebase 动态链接以使其正常工作。

3. 您需要在移动应用程序中收听传入链接。您可以使用 cordova-universal-links-plugin。

4. 从深层链接解析 reCAPTCHA 令牌。在 firebase.auth.ApplicationVerifier 实现中重新打包它。您现在可以将其传递给 signInWithPhoneNumber 以完成登录。

这需要一些工作，但对于最大限度地减少网络钓鱼攻击和滥用的风险是必要的。