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创建的

在我的电脑的浏览器一切正常,但在mobil上显示以下错误信息:

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

Answer 1

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

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

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

最安全的方法如下:

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以完成登录.

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