Ionic2身份验证Firebase [英] Ionic2 authentication firebase

问题描述

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

firebase.auth.RecaptchaVerifier （是必要的参数之一）

  this.autVer = new firebase.auth.RecaptchaVerifier（'contCatcha'，{$ b $'size'：'invisible'，
'callback'：function（response）{
 // reCAPTCHA solve，允许signInWithPhoneNumber。
} 
}）; 
  

和laster使用auth.signInWithPhoneNumber angularfire

<$ （+ 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 ，但我不知道是否有任何插件或子计算器和ahcer，一切正常
我非常感谢您的建议

解决方案

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

你可以做些什么来实现它：
Firebase针对网络的电话验证取决于应用验证程序界面： https ：//firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier ，其中RecaptchaVerifier实现。
它定义了一个属性'type'，它应该等于'recaptcha'。
它定义了一个方法verify（）：Promise以reCAPTCHA标记来解析。

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

最安全的方法是：打开Chrome自定义选项卡或SFSafariViewController（不要使用嵌入式Web浏览器），然后重定向到您拥有的网站，并将其列入白名单将显示firebase.auth.RecaptchaVerifier的Firebase控制台。您可以使用cordova-plugin-browsertab。 然后，您使用FDL（Firebase动态链接）将reCAPTCHA响应令牌传递回您的应用程序并添加它在深深的联系。这保证只有你的应用程序可以打开它。您需要配置Firebase动态链接才能使其正常工作。 您需要在您的移动应用程序中收听传入链接。您可以使用cordova-universal-links-plugin。

解析来自深层链接的reCAPTCHA标记。在firebase.auth.ApplicationVerifier实现中重新打包。您现在可以将其传递给signInWithPhoneNumber来完成登录。

这将需要一些工作，但有必要尽量减少钓鱼攻击和滥用的风险。

I am creating a system of authentication by number of cell phone in ionic 2, for that I use the google guide

First, I believe a firebase.auth.RecaptchaVerifier (Is one of the necessary parameters)

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

and laster use 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();
})

Where the second parameter is the firebase.auth.RecaptchaVerifier created

In the browser of my pc everything works fine, but on the mobil shows the following error message:

I need to replace that firebase.auth.RecaptchaVerifier, but I do not know if there is any plugin or sub meter to do and ahcer that everything works I really appreciate your advice

解决方案

Unfortunately, phone authentication using Firebase JS library will not work in a Cordova/Ionic environment since the reCAPTCHA will be unable to verify the origin of your application. This is due to the fact that the origin will look like file://assets/index.html.

What you can do to get it to work is the following: Firebase Phone auth for web depends on an app verifier interface: https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier which RecaptchaVerifier implements. It defines a property 'type' which should be equals to 'recaptcha'. It defines a method verify(): Promise which resolves with the reCAPTCHA token.

What you can do is you will need to open a website, render the reCAPTCHA, get the reCAPTCHA token and then pass it back to your app where you will implement your own firebase.auth.ApplicationVerifier

The most secure way to do that is the following:

1. Open a chrome custom tab or SFSafariViewController (do not use embedded webviews) and redirect to the website you own and whitelisted in the Firebase Console where firebase.auth.RecaptchaVerifier will be rendered. You can use cordova-plugin-browsertab for this.

2. You then pass the reCAPTCHA response token back to your app using FDL (Firebase Dynamic Links) and add it in the deep link. This guarantees that only your app can open it. You will need to configure Firebase Dynamic Links to get them to work correctly.

3. You need to listen to incoming links in your mobile app. You can use cordova-universal-links-plugin.

4. Parse the reCAPTCHA token from the deep link. Repackage it in a firebase.auth.ApplicationVerifier implementation. You can now pass it to signInWithPhoneNumber to complete sign-in.

This will require some work but is necessary to minimize the risk of phishing attacks and abuse.

这篇关于Ionic2身份验证Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！