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，手动输入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")
          }
        })

       }

ionic firebase电话身份验证SMS代码已过期。请重新发送验证码，然后重试

1 个答案: