Question

我正在尝试使用 firebase 执行phone authentication(i,e OTP)。现在，我从 firebase 收到了OTP，但是我想验证OTP，并且在成功验证之后，它应该路由另一个名为home的页面。我无法执行进行验证过程。

下面是我的代码：

HTML

<ion-content padding>
  <ion-item>
    <ion-label position="floating">Phone</ion-label>
    <ion-input type="text" [(ngModel)]="phone"></ion-input>
  </ion-item>
  <ion-button expand="full" (click)="send()">Send</ion-button>
  <ion-item>
      <ion-label position="floating">Enter OTP</ion-label>
      <ion-input type="text" [(ngModel)]="code"></ion-input>
    </ion-item>
  <ion-button expand="full" (click)="verify()">Verify</ion-button>
</ion-content>

TS

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import * as firebase from 'firebase';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  verificationId: any;
  code = '';
  phone: number;

  constructor(public navCtrl: NavController) { }

   ngOnInit() {}

  send() {
    const tell = '+91' + this.phone;
    (<any> window).FirebasePlugin.verifyPhoneNumber(tell, 60, (credential) => {
      console.log(credential);
       this.verificationId = credential.verificationId;
    }, (error) => {
      console.error(error);
      alert(error);
     });
  }

  verify() {
    const signInCredential = firebase.auth.PhoneAuthProvider.credential(this.verificationId, this.code);
    firebase.auth().signInWithCredential(signInCredential).then((info) => {
      console.log(info);
      // this.navCtrl.navigateRoot('/home'); 
    }, (error) => {
      console.log(error);
    });
    }
}

在冲浪时我得到了这个 solution ，但他们也在执行 CAPTCHA 的验证，因此我不需要此功能。我只想要OTP验证。

注意：：我也收到了OTP和verificationId。但是 verify 方法不起作用。我的代码有什么问题。

Ionic 4中的Firebase电话身份验证

0 个答案: