web-dev-qa-db-fra.com

Comment faire une authentification téléphonique dans Flutter en utilisant Firebase?

J'ai consulté de nombreux sites Web et je n'ai pas trouvé de moyen d'implémenter l'authentification téléphonique dans Flutter à l'aide de Firebase. Quelqu'un peut-il me dire comment faire cela?

firebaseflutter
3
Kune Mohith

Désolé d'être en retard. J'ai ignoré tous les courriels du référentiel GitHub. Enfin, Flutter-Team a ajouté l’authentification du téléphone. Voici le lien vers le plugin firebase-auth. Voir la fonction implémentée là . J'ai soulevé cette question bien avant que Flutter ne soit encore en version alpha-bêta. A cette époque, il n'était pas encore implémenté. Maintenant, j'ai pensé que cela pourrait aider les autres aussi, en postant ici. Encore une fois, désolé pour la réponse tardive.

1
Kune Mohith

j'ai le même problème, mais je me suis aperçu que l'équipe Flutter y travaillait pour iOS et Android. consultez ce PR: https://github.com/flutter/plugins/pull/329

2
Peter aziz

J'ai eu le même problème, mais je construisais une application ionique.

vous pouvez faire une autorisation de base firebase sur le web . l’idée est:

  • prenez le numéro de téléphone de l'utilisateur et envoyez-le à une page Web.

  • créer un recaptchaVerifier

    var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

  • connectez-vous à l'utilisateur avec le numéro de téléphone:

    firebase.auth().signInWithPhoneNumber(phoneNumber, recaptchaVerifier)
        .then(confirmationResult => {
            myVerificationId = confirmationResult.verificationId;
        })
        .catch(error => {
            console.log('error', error);
        })

  • renvoyer l'identifiant de confirmation à l'application Flutter via un lien profond

  • Firebase enverra le code SMS.

  • connectez-vous à l'utilisateur avec n'importe quelle méthode qui prend l'identifiant de confirmation et le code en tant que paramètres. pour le web ça va comme ça:

      let signinCredintial = firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
  firebase.auth().signInWithCredential(signinCredintial)
   .then(response => {
     // user is signed in

})
0
Ahmed ezzat

J'ai implémenté l'authentification téléphonique singnIn avec firebase dans flutter c'est assez facile il suffit d'importer la bibliothèque firebase_auth et de valider que le numéro de téléphone est au format correct, c'est-à-dire qu'il comporte un signe "+" au début suivi du code du pays puis du numéro de téléphone puis du code Va comme ça

if (phoneExp.hasMatch(phon))
   {
      final PhoneVerificationCompleted verificationCompleted=(FirebaseUser user){
        setState(() {
                      _message=Future<String>.value("auto sign in succedded $user");
                      debugPrint("Sign up succedded");
                      _pref.setString("phonkey",user.phoneNumber.toString());
                      MyNavigator.goToDetail(context);
//called when the otp is variefied automatically
                    });
      };
  final PhoneVerificationFailed verificationFailed=(AuthException authException){
    setState(() {
                  _message=Future<String>.value("verification failed code: ${authException.code}. Message: ${authException.message}");
                });
  };

  final PhoneCodeSent codeSent=(String verificationId,[int forceResendingToken]) async {
    this.verificationId=verificationId;


  };

  final PhoneCodeAutoRetrievalTimeout codeAutoRetrievalTimeout = (String verificationId){
    this.verificationId=verificationId;

  };

  await _auth.verifyPhoneNumber(
    phoneNumber: phon,
    timeout: Duration(seconds: 60),
    verificationCompleted: verificationCompleted,
    verificationFailed: verificationFailed,
    codeSent: codeSent,
    codeAutoRetrievalTimeout: codeAutoRetrievalTimeout
    );



}

et si le téléphone n'a pas pu détecter l'OTP envoyé automatiquement, obtenez l'OTP dans une chaîne et implémentez cette fonction

void _signInWithOtp() async{
  final FirebaseUser user = await _auth.signInWithPhoneNumber(
  verificationId: verificationId,
  smsCode: _otpController.text,
);
0
Jayesh Chawla