web-dev-qa-db-fra.com

Firebase d'authentification Ionic2

Je crée un système d'authentification par numéro de téléphone portable en ionic 2, pour cela j'utilise le guide google

Tout d'abord, je crois qu'un firebase.auth.RecaptchaVerifier (est l'un des paramètres nécessaires)

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

et laster utilisent 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();
})

Où le second paramètre est le firebase.auth.RecaptchaVerifier créé

Dans le navigateur de mon pc, tout fonctionne bien, mais le message d'erreur suivant s'affiche sur le mobil:

Je dois remplacer ce firebase.auth.RecaptchaVerifier, mais je ne sais pas s’il existe un plugin ou un sub mètre à faire et que tout fonctionne correctement.

cordovafirebaseionic2firebase-authenticationphone-number
9
Isaac David Chavez Perez

Malheureusement, l'authentification téléphonique à l'aide de la bibliothèque Firebase JS ne fonctionnera pas dans un environnement Cordova/Ionic, car reCAPTCHA ne pourra pas vérifier l'origine de votre application. Cela est dû au fait que l'Origine ressemblera à file: //assets/index.html.

Voici comment procéder: L’authentification de Firebase Phone pour le Web dépend d’une interface de vérificateur d’application: https://firebase.google.com/docs/reference/js/firebase.auth. ApplicationVerifier que RecaptchaVerifier implémente . Il définit une propriété 'type' qui doit être égal à 'recaptcha' . Il définit une méthode verify (): Promise qui se résout avec le jeton reCAPTCHA.

Ce que vous pouvez faire, c'est que vous devez ouvrir un site Web, générer le rendu de reCAPTCHA, obtenir le jeton reCAPTCHA, puis le renvoyer à votre application, où vous implémenterez votre propre firebase.auth.ApplicationVerifier.

Le moyen le plus sûr de le faire est le suivant:

  1. Ouvrez un onglet personnalisé chrome ou SFSafariViewController (n'utilisez pas de vues Web incorporées) et redirigez-vous vers le site Web que vous possédez et qui figure dans la liste blanche dans la console Firebase où sera rendu firebase.auth.RecaptchaVerifier. Vous pouvez utiliser cordova-plugin-browsertab pour cela.

  2. Vous transmettez ensuite le jeton de réponse reCAPTCHA à votre application à l'aide de FDL (liens dynamiques Firebase) et vous l'ajoutez au lien profond. Cela garantit que seule votre application peut l'ouvrir. Vous devrez configurer les liens dynamiques Firebase pour les faire fonctionner correctement.

  3. Vous devez écouter les liens entrants dans votre application mobile. Vous pouvez utiliser cordova-universal-links-plugin.

  4. Analyser le jeton reCAPTCHA à partir du lien profond. Reconditionnez-le dans une implémentation firebase.auth.ApplicationVerifier. Vous pouvez maintenant le transmettre à signInWithPhoneNumber pour terminer la connexion.

Cela nécessitera un peu de travail mais est nécessaire pour minimiser le risque d'attaques de phishing et d'abus.

16
bojeil

Tout d’abord, Cordova/Ionic utilise le protocole file: /// afin que Recaptcha ne fonctionne pas sur votre application (uniquement sur le navigateur, car il s’agit de http). La bibliothèque Firebase/Recaptcha recherche l'emplacement.protocol et attend http/https, mais ce n'est pas le cas pour Cordova, comme cela a été mentionné… .. Une solution de contournement possible consisterait à exécuter un serveur local sur votre téléphone. par exemple. cordova-httpd ou cordova-plugins # serveur-local (ou navigateurs http intégrés). Après cela, vous pouvez implémenter un captcha invisible (comme décrit dans la documentation de Firebase). Mais encore, parfois, l'utilisateur aura un popup pour résoudre un captcha alors ce n'est pas idéal.

Comme il n’a pas de sens d’avoir captcha sur l’environnement mobile (du moins dans la plupart des cas), j’ai commencé à travailler sur l’implémentation native de l’authentification téléphonique Firebase pour Cordova/Ionic. J'ai commencé avec la version iOS. 

Est-ce que quelqu'un peut m'aider à implémenter la version Java/Android?

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

2
guyromb

Si vous ne souhaitez pas utiliser les liens dynamiques/profonds comme suggéré par bojeil, vous pouvez essayer ceci:

En utilisant Cordova, j'ai déplacé tout le processus d'authentification vers une page Web hébergée sur mon serveur. À partir de mon application, j'ai utilisé un navigateur intégré à l'application pour lancer la page Web, puis effectuer toutes les communications entre navigateurs d'applications en interrogeant longuement le serveur qui fait office d'intermédiaire. J'ai même réussi à analyser le SMS et à fermer le navigateur à la fin automatiquement.

Pour que cela fonctionne, faites attention à la sécurité, ce qui peut être assez délicat.

Sinon, vous pouvez utiliser la base de données en temps réel Firebase au lieu de la scrutation de serveur pour transmettre les messages.

Vous aurez peut-être besoin de ces plugins Cordova:

  • InAppBrowser
  • BackgroundMode
  • Autorisation
  • Cordova SMS Receiver Plugin
1
Chong Lip Phang

Je ne pouvais pas appliquer la solution de contournement de @bojeil car je ne pouvais pas trouver le moyen d'appliquer ma propre implémentation d'ApplicationVerifier . Cependant, j'ai pu réaliser l'authentification de téléphone Firebase sur Android à l'aide du plug-in cordova firebase décrit/ dans cette vidéo . J'espère que ça aide.

0
Pierre El Khoury