Ionic2 authentication firebase

问题

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

回答1:

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.

回答2:

First of all, Cordova/Ionic uses file:/// protocol so Recaptcha won't work on your app (only on the browser since it's http). Firebase/Recaptcha library checks for location.protocol and expects for http/https but this is not the case for Cordova as mentioned. A possible workaround would be to have a local server running on your phone. e.g. cordova-httpd or cordova-plugins#local-webserver (or in-app http browsers). After that you can implement invisible captcha (as described in firebase docs). But still, sometimes the user will get a popup to solve a captcha so it's not ideal.

Since it doesn't make sense to have captcha on mobile environment (in most cases at least), I started working on the native implementation of firebase phone authentication for Cordova/Ionic. I started with the iOS version.

Can someone support me to implement the java/android version?

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

回答3:

If you don't want to use dynamic/deep links as suggested by bojeil, you can try this:

Using Cordova, I moved all the authentication process to a webpage hosted on my server. From my app, I used an In-app Browser to launch the webpage, and then carry out all the app-browser communication by long-polling the server which acts as the middleman. I even managed to parse the SMS and close the browser in the end automatically.

For this to work, be careful with the security, which can be quite tricky.

Alternatively, you may use Firebase Realtime Database instead of server polling to pass around the messages.

You may need these cordova plugins:

• InAppBrowser
• BackgroundMode
• Permission
• Cordova SMS Receiver Plugin

回答4:

I was not able to apply the workaround of @bojeil as I couldn;t find a way to have my own implementation of ApplicationVerifier. However, I was able to achieve Firebase Phone Authentication on Android using cordova firebase plugin as described in this video. Hope it helps.

来源：https://stackoverflow.com/questions/44081040/ionic2-authentication-firebase