cordova - Base de fuego de autenticación Ionic2

firebase firebase-authentication

Question

Estoy creando un sistema de autenticación por número de teléfono celular en ionic 2, para eso utilizo la guía de google

Primero, creo que firebase.auth.RecaptchaVerifier (es uno de los parámetros necesarios)

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

y laster usan 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();
})

Donde el segundo parámetro es el firebase.auth.RecaptchaVerifier creado

En el navegador de mi PC todo funciona bien, pero en el mobil muestra el siguiente mensaje de error:

Necesito reemplazar ese firebase.auth.RecaptchaVerifier , pero no sé si hay algún plugin o submedidor que hacer y ahcer que todo funciona Realmente aprecio tu consejo

Answer 1

Desafortunadamente, la autenticación del teléfono usando la biblioteca Firebase JS no funcionará en un entorno Cordova / Ionic ya que reCAPTCHA no podrá verificar el origen de su aplicación. Esto se debe al hecho de que el origen se verá como file: //assets/index.html.

Lo que puede hacer para que funcione es lo siguiente: Firebase Phone auth para web depende de una interfaz de verificador de aplicación: https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier que implementa RecaptchaVerifier. Define una propiedad ''tipo'' que debería ser igual a ''recaptcha''. Define un método verificado (): Promesa que se resuelve con el token reCAPTCHA.

Lo que puede hacer es abrir un sitio web, generar el reCAPTCHA, obtener el token reCAPTCHA y luego devolverlo a su aplicación, donde implementará su propio firebase.auth.ApplicationVerifier

La forma más segura de hacerlo es la siguiente:

1. Abra una pestaña personalizada de Chrome o SFSafariViewController (no use vistas web integradas) y redirija al sitio web que posee y a la lista blanca en Firebase Console donde se mostrará firebase.auth.RecaptchaVerifier. Puede usar cordova-plugin-browsertab para esto.

2. Luego, pasa el token de respuesta reCAPTCHA a tu aplicación usando FDL (Firebase Dynamic Links) y lo agregas en el enlace profundo. Esto garantiza que solo tu aplicación pueda abrirla. Deberá configurar Firebase Dynamic Links para que funcionen correctamente.

3. Debe escuchar los enlaces entrantes en su aplicación móvil. Puede usar cordova-universal-links-plugin.

4. Analice el token reCAPTCHA desde el enlace profundo. Vuelva a empaquetarlo en una implementación firebase.auth.ApplicationVerifier. Ahora puede pasarlo a signInWithPhoneNumber para completar el inicio de sesión.

Esto requerirá algo de trabajo, pero es necesario para minimizar el riesgo de ataques de phishing y abuso.

Answer 2

En primer lugar, Cordova / Ionic utiliza el protocolo file: /// para que Recaptcha no funcione en su aplicación (solo en el navegador ya que es http). La biblioteca Firebase / Recaptcha busca location.protocol y espera http / https, pero este no es el caso de Cordova como se mencionó. Una posible solución sería tener un servidor local ejecutándose en su teléfono. por ejemplo, cordova-httpd o cordova-plugins # local-webserver (o navegadores http en la aplicación). Después de eso, puede implementar captcha invisible (como se describe en documentos de firebase). Pero aún así, a veces el usuario obtendrá una ventana emergente para resolver un captcha, por lo que no es ideal.

Como no tiene sentido tener captcha en un entorno móvil (al menos en la mayoría de los casos), comencé a trabajar en la implementación nativa de la autenticación de teléfono firebase para Cordova / Ionic. Empecé con la versión de iOS.

¿Alguien puede ayudarme a implementar la versión java / android?

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

Answer 3

No pude aplicar la solución alternativa de @bojeil porque no pude encontrar una manera de tener mi propia implementación de ApplicationVerifier. Sin embargo, pude lograr Firebase Phone Authentication en Android usando el complemento cordova firebase como se describe en este video . Espero eso ayude.

Answer 4

Si no desea utilizar enlaces dinámicos / profundos como sugiere bojeil, puede intentar esto:

Usando Cordova, moví todo el proceso de autenticación a una página web alojada en mi servidor. Desde mi aplicación, utilicé un navegador integrado en la aplicación para iniciar la página web y luego llevé a cabo toda la comunicación entre el navegador de la aplicación y sondeé el servidor que actúa como intermediario. Incluso logré analizar el SMS y cerrar el navegador al final automáticamente.

Para que esto funcione, tenga cuidado con la seguridad, que puede ser bastante complicada.

Alternativamente, puede usar Firebase Realtime Database en lugar de las encuestas del servidor para pasar los mensajes.

Es posible que necesite estos complementos de cordova:

• InAppBrowser
• Modo de fondo
• Permiso
• Cordova SMS Receiver Plugin