Ionic 3 Firebase电话身份验证无法正常工作

时间:2018-01-08 17:09:48

标签: angular typescript firebase firebase-authentication ionic3

我将使用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);
} )
}

}

我不明白我错过了什么......

1 个答案:

答案 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);
  });

}