未安装离子火基手机身份验证插件

Question

我正在使用以下插件在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>

Answer 1

你一定在使用科尔多瓦吗？您是如何安装 Firebase 插件的？是否可通过您的应用程序访问？

您是否运行了此命令(如此处所述(：

ionic cordova plugin add cordova-plugin-firebase