Question

我只想创建一个带有电话号码验证的离子移动应用程序（使用firebase），但我不知道应该如何继续。有人可以帮助我吗？谢谢。

Answer 1

您需要执行以下步骤：

Activate Phone Number Authentication in your Firebase Console.
Set up reCAPTCHA verifier.
Send the SMS
Sign the user in.

html的

<ion-content padding>
  <div id="recaptcha-container"></div>

  <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)">
    Sign In
  </button>

</ion-content>

.TS

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

}

以下是Great article about it。我从本文中提取了上述代码。

Offical doc

在离子3中使用firebase的电话号码进行身份验证

1 个答案: