Ion authentication system

Question

I am creating an authentication system by cell phone number in ionic 2, because I use the Google manual

Firstly, I believe that 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(); }) 

If the second parameter is firebase.auth.RecaptchaVerifier created

Everything works fine in my computer’s browser, but the following error message is displayed on the mobile device:

I need to replace this with firebase.auth.RecaptchaVerifier , but I don’t know if there is any plug-in or submeter, and also that everything works. I really appreciate your advice.

Answer 1

Unfortunately, authenticating your phone using the Firebase JS library will not work in the Cordova / Ionic environment, as reCAPTCHA will not be able to verify the origin of your application. This is because the source will look like a file: //assets/index.html.

What you can do to make it work is the following: Firebase Phone auth for the Internet depends on the application verifier interface: https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier that implements RecaptchaVerifier. It defines a type property, which should be equal to recaptcha. It defines the verify (): Promise method, which is resolved using the reCAPTCHA token.

What you can do is open a website, display reCAPTCHA, get the reCAPTCHA token, and then transfer it back to your application, where you will use your own firebase.auth.ApplicationVerifier

The safest way to do this is:

• Open your chrome or SFSafariViewController user’s tab (do not use embedded webviews) and redirect to your own website and white panel in the Firebase Console where firebase.auth.RecaptchaVerifier will be displayed. You can use cordova-plugin-browserertab for this.

• Then you pass the reCAPTCHA response token back to your application using FDL (Firebase Dynamic Links) and add it to the deep link. This ensures that only your application can open it. You will need to configure Firebase dynamic links to make them work correctly.

• You need to listen to incoming links in the mobile application. You can use the cordova-universal-links-plugin plugin.

• Disassemble the reCAPTCHA marker from the deep link. Reinstall it in the firebase.auth.ApplicationVerifier implementation. Now you can pass it to signInWithPhoneNumber to complete the login.

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

Answer 2

First of all, Cordova / Ionic uses the file: ///, so Recaptcha will not work in your application (only in the browser with its http). The Firebase / Recaptcha library checks for location.protocol and expects http / https, but this does not apply to Cordova, as mentioned. A possible workaround would be a local server running on your phone. e.g. cordova-httpd or cordova-plugins # local-webserver (or in http browser applications). After that, you can implement invisible captcha (as described in the firebase docs). But still, sometimes the user receives a pop-up window to solve the captcha, so it is not perfect.

Since it makes no sense to have captcha on the mobile environment (in most cases, at least), I started working on my own implementation of Firebase phone authentication for Cordova / Ionic. I started with the iOS version.

Can someone support me for implementing java / android version?

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