未安装 Ionic Firebase 电话身份验证插件

Posted

技术标签:

【中文标题】未安装 Ionic Firebase 电话身份验证插件【英文标题】:Ionic firebase phone auth plugin not installed 【发布时间】:2019-03-09 00:08:22 【问题描述】:

我在 ionic 上使用以下插件进行电话身份验证:https://github.com/sajTempler/IonicFirebasePhoneAuth,我使用的是我的国家代码 55 和我的运营商号码 15。就我调试而言,我的代码没有任何问题。每当我在真实设备上运行它时,我的控制台都会记录 registerPhone err plugin_not_installed,我不知道它指的是哪个插件。

这是代码

    import Component, ViewChild, OnInit from '@angular/core';
import IonicPage, NavController, AlertController from 'ionic-angular';
import AngularFireAuth from 'angularfire2/auth';
import Firebase from '@ionic-native/firebase';
import * as firebase from 'firebase';

/**
 * Generated class for the LoginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component(
  selector: 'page-login',
  templateUrl: 'login.html',
)
export class LoginPage implements OnInit 

  @ViewChild('phoneNumber') phoneNumber;

  constructor(
    private navCtrl: NavController,
    private fireAuth: AngularFireAuth,
    private alertCtrl: AlertController,
    private fire: Firebase,
  ) 
  

  ngOnInit() 
    console.log('LoginPage ngOnInit');
    this.fireAuth.authState.subscribe(auth => 
      if (!auth) 
        return;
      

      auth.getIdToken()
        .then((token: string) => 
          console.log('LoginPage getIdToken token', token);
          if (token) 
            this.doLogin();
          
        );
    );
  

  // tslint:disable-next-line
  private registerPhone(): void 
    console.log('registerPhone');
    const phone = '+5515' + this.phoneNumber.value;
    console.log('registerPhone phone', phone);
    this.fire.verifyPhoneNumber(phone, 120)
      .then((res) => 
        const verificationId = res;
        console.log('registerPhone verificationId', verificationId);
        alert(verificationId);
        this.showPrompt(verificationId);
      )
      .catch(err => 
        console.log('registerPhone err', err);
      )
  

  private async verifyCode(code: string, verificationId: string) 
    try 
      const credential = await firebase.auth.PhoneAuthProvider.credential(verificationId, code);
      await firebase.auth().signInWithCredential(credential)
        .then(() => 
          this.doLogin();
        )
        .catch(err => 
          console.error('LoginPage verifyCode signInWithCredential err', err);
        )
     catch (err) 
      console.error('LoginPage verifyCode err', err);
    
  

  private showPrompt(verificationId: string) 
    let promptCode = this.alertCtrl.create(
      title: 'Verify',
      message: 'Type code that was received via SMS',
      inputs: [
        
          name: 'code',
          placeholder: 'Code'
        ,
      ],
      buttons: [
        
          text: 'Cancel',
          handler: data => 
            return;
          
        ,
        
          text: 'Verify',
          handler: data => 
            this.verifyCode(data.code, verificationId);
          
        
      ]
    );
    promptCode.present();
  

  private doLogin(): void 
    alert("Você se logou com sucesso!");
    this.navCtrl.setRoot('HomePage');
  

和html:

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <div class="login-verify" id="recaptcha-container"></div>

  <ion-list>
    <ion-item>
      <ion-label>+55</ion-label>
      <ion-input #phoneNumber type="tel" maxlength="9"></ion-input>
    </ion-item>
  </ion-list>

</ion-content>

<ion-footer class="login-footer">
  <button full ion-button class="login-btn" (click)="registerPhone()">Go</button>
</ion-footer>

【问题讨论】:

【参考方案1】:

您一定在使用 Cordova?您是如何安装 Firebase 插件的?它可以通过您的应用程序访问吗?

你是否运行了这个命令(如文档中的here):

ionic cordova plugin add cordova-plugin-firebase

【讨论】:

您是否也尝试过运行“ionic cordova prepare”?我们能否提供更多关于您如何安装插件的信息?

以上是关于未安装 Ionic Firebase 电话身份验证插件的主要内容,如果未能解决你的问题,请参考以下文章

在 Firebase 电话身份验证中未接收代码。

如何在angular4的firebase电话身份验证中重新发送短信验证?

Firebase电话身份验证中的“找不到主机名匹配”错误(使用离子)

未处理的异常:[firebase_auth/unknown] null:使用颤振/firebase 进行电话身份验证时出错

Firebase 使用电话号码进行身份验证:使用未解析的标识符 AuthAPNSTokenTypeProd 和 UIBackgroundFetchResultNoData 错误

Flutter Firebase 电话身份验证未发送短信代码。直接调用 PhoneCodeAutoRetrievalTimeout 方法。这是我的代码