ioni c firebase аутентификация телефона Код SMS истек. Пожалуйста, повторно отправьте код подтверждения, чтобы повторить попытку

Question

Я использую этот плагин для проверки подлинности телефона. https://ionicframework.com/docs/native/firebase-authentication

Я успешно отправил номер на мобильные номера, но при получении я получаю следующую ошибку каждый раз

Срок действия кода SMS истек. Пожалуйста, повторно отправьте проверочный код, чтобы повторить попытку

Я также хочу автоматически проверить otp (не позволяя пользователю вручную ввести otp).

Я думаю, что обе проблемы взаимосвязаны

Вот мой код

import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import { FirebaseAuthentication } from '@ionic-native/firebase-authentication/ngx';

constructor(private router: Router,private fireAuth: AngularFireAuth,public firebaseAuthentication : FirebaseAuthentication) {}

send(){


      this.firebaseAuthentication.verifyPhoneNumber("+91xxxxxxxxxx", 30000).then(credential => {
        alert("code sent")

        console.log(credential)

        if(credential) {

          this.verificationid = credential

          const smsCode = prompt("Enter SMS verification code");

          let cred = firebase.auth.PhoneAuthProvider.credential(this.verificationid,smsCode)

          this.fireAuth.signInWithCredential(cred).then(val => {
            console.log(val)
            console.log("successs")
          }).catch(err => console.log(err))

        }
      })
    }

Answer 1

Оказывается, все очень просто.

Все последние телефоны android поддерживают автоматическую проверку OTP. verifyPhoneNumber метод автоматически проверяет otp. Таким образом, когда мы просим пользователя ввести OTP, он выдает ошибку «код истек».

Таким образом, решение на устройствах android прослушивает метод onAuthStateChanged для перенаправления пользователей после успешной аутентификации телефона и для старых устройств. или ios введите отп вручную.

Вот полный код

html

<div [hidden]="display_otp">

  <ion-item>
    <ion-label position="floating"> Enter your mobile number </ion-label>
    <ion-input type="tel" [formControl] = "mobile_no" ></ion-input>

  </ion-item>
  <ion-button [disabled] = "mobile_no.invalid" (click)="Send(mobile_no.value)">Continue</ion-button>
</div>

<div *ngIf="display_otp">
  <ion-item>
    <ion-label position="floating"> Enter your OTP  </ion-label>
    <ion-input type="tel" [formControl] = "otp" ></ion-input>

  </ion-item>

  <ion-button [disabled] = "otp.invalid" (click)="enter_otp(otp.value)">Submit</ion-button>
</div>

.ts

constructor(){


this.firebaseAuthentication.onAuthStateChanged().subscribe(user =>{

        if(user) {
          console.log(user)

          console.log("success")
          // OTP verifired. Do success operation
        }
        else {
          console.log("state not changed")
       // wrong otp
        }
      })

}


    Send(mobile_no){
        console.log(mobile_no) 
        let mobile ="+91" + mobile_no
        console.log(mobile)


        this.firebaseAuthentication.verifyPhoneNumber(mobile, 30000).then(credential =>{
          if(credential){

            console.log(credential)
            this.verificationid = credential
            this.display_otp = true

          }
        })


       }  

       enter_otp(otp){
         console.log(otp)

         this.firebaseAuthentication.signInWithVerificationId(this.verificationid, otp).then(user =>{
          if(user) {
            console.log(user)

          }
          else {
            console.log("no user")
          }
        })

       }