Ionic2 身份验证 Firebase [英] Ionic2 authentication firebase
问题描述
我正在 ionic 2 中创建一个通过手机号码进行身份验证的系统，为此我使用了谷歌指南
I am creating a system of authentication by number of cell phone in ionic 2, for that I use the google guide
首先，我相信一个firebase.auth.RecaptchaVerifier(是必要的参数之一)
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.
}
});
最后使用 auth.signInWithPhoneNumber angularfire
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();
})
其中第二个参数是创建的 firebase.auth.RecaptchaVerifier
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:
我需要替换那个 firebase.auth.RecaptchaVerifier，但我不知道是否有任何插件或子仪表要做，并且一切正常非常感谢您的建议
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
推荐答案
不幸的是，使用 Firebase JS 库的电话身份验证在 Cordova/Ionic 环境中不起作用，因为 reCAPTCHA 将无法验证您的应用程序的来源.这是因为原点看起来像 file://assets/index.html.
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.
您可以采取以下措施使其正常工作:Firebase 网络电话身份验证取决于应用验证程序接口:https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier 由 RecaptchaVerifier 实现.它定义了一个属性type"，它应该等于recaptcha".它定义了一个方法 verify(): Promise ，它用 reCAPTCHA 令牌解析.
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.
您可以做的是，您需要打开一个网站，呈现 reCAPTCHA，获取 reCAPTCHA 令牌，然后将其传回您的应用，您将在其中实现自己的 firebase.auth.ApplicationVerifier
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
最安全的方法如下:
打开 chrome 自定义选项卡或 SFSafariViewController(不要使用嵌入式 Web 视图)并重定向到您拥有并在 Firebase 控制台中列入白名单的网站，firebase.auth.RecaptchaVerifier 将在其中呈现.您可以为此使用cordova-plugin-browsertab.
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.
然后，您使用 FDL(Firebase 动态链接)将 reCAPTCHA 响应令牌传递回您的应用，并将其添加到深层链接中.这保证只有您的应用程序可以打开它.您需要配置 Firebase 动态链接才能使其正常工作.
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.
您需要在您的移动应用中收听传入链接.您可以使用cordova-universal-links-plugin.
You need to listen to incoming links in your mobile app. You can use cordova-universal-links-plugin.
从深层链接解析 reCAPTCHA 令牌.将其重新打包到 firebase.auth.ApplicationVerifier 实现中.您现在可以将其传递给 signInWithPhoneNumber 以完成登录.
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屋！
