离子防火墙手机认证短信代码已经过期。请重新发送验证代码再试一次。

Question

我正在使用这个插件进行电话身份验证.https://ionicframework.com/docs/native/firebase-authentication

我已经成功地将顶部发送到移动号码，但每次检索时都会收到以下错误。

短信代码已经过期。请重新发送验证代码再试一次。

我还想自动验证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时，它会给出一个错误“代码过期”。

因此，解决方案是在安卓设备上，听onAuthStateChanged方法，在成功的电话身份验证之后重定向用户，对于旧设备或ios进入otp手动工作。

这是完整的代码

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")
          }
        })

       }