我将使用firebase验证Ionic 3中的电话号码,程序运行没有错误但是当我输入电话号码时没有任何反应..
.html代码在
之下<ion-item>
<ion-label stacked>Phone Number</ion-label>
<ion-input type="number" [(ngModel)]="phoneNumber"></ion-input>
</ion-item>
<button ion-button id="sign-in-button" (click)="signIn(phoneNumber)">Send OTP</button>
<ion-input type="number" placeholder="OTP" [(ngModel)]="code"></ion-input>
<button ion-button id="verify-in-button" (click)="verify()">Sign In</button>
我的.ts文件是
export class HomePage {
veryficationId : any;
code :string = "";
phoneNumber : number;
constructor(public navCtrl:NavController, public
alertCtrl:AlertController) { }
signIn(phoneNumber)
{
(<any>window).FirebasePlugin.verifyPhoneNumber("+91" +phoneNumber,60,(credential)=>{
this.veryficationId = credential.veryficationId;
}, (error)=> {
alert("error" +error);
} );
}
verify()
{
let signInCredential =
firebase.auth.PhoneAuthProvider.credential(this.veryficationId,this.code);
firebase.auth().signInWithCredential(signInCredential).then((info)=>{
}, (error)=>{
alert("error" +error);
} )
}
}
我不明白我错过了什么......
答案 0 :(得分:2)
我强烈建议你阅读great article from Jorge。它具有一步一步的所有细节。
signIn(phoneNumber: number){
const appVerifier = this.recaptchaVerifier;
const phoneNumberString = "+" + phoneNumber;
firebase.auth().signInWithPhoneNumber(phoneNumberString, appVerifier)
.then( confirmationResult => {
// SMS sent. Prompt user to type the code from the message, then sign the
// user in with confirmationResult.confirm(code).
let prompt = this.alertCtrl.create({
title: 'Enter the Confirmation code',
inputs: [{ name: 'confirmationCode', placeholder: 'Confirmation Code' }],
buttons: [
{ text: 'Cancel',
handler: data => { console.log('Cancel clicked'); }
},
{ text: 'Send',
handler: data => {
confirmationResult.confirm(data.confirmationCode)
.then(function (result) {
// User signed in successfully.
console.log(result.user);
// ...
}).catch(function (error) {
// User couldn't sign in (bad verification code?)
// ...
});
}
}
]
});
prompt.present();
})
.catch(function (error) {
console.error("SMS not sent", error);
});
}