用 Ionic 和 Firebase 实现电话号码验证(iOS)

简介

在移动应用中，电话号码验证是一个常见的功能。它可以确保用户输入的电话号码是正确的，并且可以减少虚假信息的存在。本文将介绍如何在 iOS 应用中使用 Ionic 和 Firebase 实现电话号码验证。

准备环境

在开始之前，您需要安装以下软件：

• Node.js 和 NPM
• Ionic CLI
• Firebase CLI

您还需要一个 Firebase 帐户，并在 Firebase 控制台中创建一个新项目。在这个项目中，您需要启用 Firebase Authentication 服务。

创建 Ionic 应用

首先，我们需要创建一个 Ionic 应用。打开终端并运行以下命令：

ionic start myApp blank --type=angular

这将创建一个基础的 Ionic 应用。我们需要还原 Firebase 平台的依赖项和安装相关依赖项：

cd myApp
npm install firebase @angular/fire rxjs --save

配置 Firebase

现在，让我们将 Firebase 集成到我们的应用程序中。在 Firebase 控制台中，找到您的项目，并选择“Web应用程序”选项。将应用程序名称设置为“myApp”，并复制自动生成的配置。

在应用程序中，在“src/environments”文件夹中创建一个新文件“environment.ts”，并使用以下代码替换其内容：

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "your-app.firebaseapp.com",
    databaseURL: "https://your-app.firebaseio.com",
    projectId: "your-app",
    storageBucket: "your-app.appspot.com",
    messagingSenderId: "123456789"
  }
};

请将“apiKey”等字段替换为从 Firebase 控制台中复制的值。

现在，我们需要在对应的地方注入 Firebase 的配置，比如说在“app.module.ts”和“app.component.ts”中：

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

...

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

实现电话号码验证

有了 Firebase 依赖项和配置，我们可以实现电话号码验证了。我们需要创建一个名为“phone-authentication”的服务，并在其中实现身份验证逻辑。

首先，我们需要引入 Firebase 的库：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import { User } from '../models/user.model';

我们定义 User 模型作为用户数据的容器。

接下来，我们需要注入 AngularFireAuth，并在构造函数中初始化该服务。

@Injectable({
  providedIn: 'root'
})
export class PhoneAuthenticationService {
  user: User = {};

  constructor(
    private afAuth: AngularFireAuth
  ) {}
}

接着，我们需要实现验证码发送的逻辑。在“phone-authentication”服务中添加以下代码：

sendVerificationCode(phoneNumber: string) {
  const appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
  return this.afAuth.auth.signInWithPhoneNumber(phoneNumber, appVerifier);
}

其中，“recaptcha-container”是指在 HTML 模板中定义的包含 reCAPTCHA 元素的容器。

在“app.module.ts”中引入 RecaptchaModule 模块:

import { RecaptchaModule } from 'ng-recaptcha';

然后，在对应的地方添加它：

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    RecaptchaModule.forRoot()
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

这个函数会返回一个 Promise 对象，您需要在控制器中使用 Promise 解决方案来捕获验证码。

接下来，我们需要实现验证逻辑：

async verifyCode(verificationId: string, verificationCode: string) {
  const credential = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
  return await this.afAuth.auth.signInWithCredential(credential);
}

这个函数会返回一个 Promise 对象，您也需要在控制器中使用 Promise 解决方案来捕获授权标记。

与此同时，我们还需要添加一个变量，以记录当前用户：

async setUser(user: firebase.User) {
  this.user.uid = user.uid;
  this.user.displayName = user.displayName || user.phoneNumber;
  this.user.photoURL = user.photoURL || './assets/icon/favicon.png';
  this.user.isAnonymous = user.isAnonymous;
}

在控制器中，我们需要实现发送验证码和验证逻辑：

async sendCode(phoneNumber: string) {
  try {
    const sent = await this.phoneAuth.sendVerificationCode(phoneNumber);
    if (sent) {
      alert('验证码发送成功');
      this.showInput = true;
      this.verificationId = sent.verificationId;
    }
  } catch (err) {
    alert(`验证码发送失败: ${err.message}`);
  }
}

async verifyCode() {
  try {
    const verified = await this.phoneAuth.verifyCode(this.verificationId, this.verificationCode);
    if (verified) {
      alert('您已通过身份验证');
      await this.authentication.setUser(verified.user);
      await this.router.navigateByUrl('/');
    }
  } catch (err) {
    alert('身份验证失败');
  }
}

其中，“showInput”是指在 HTML 模板中定义的布尔变量，用于显示输入框。

同时，我们还需要在 HTML 模板中添加如下元素：

<ion-header>
  <ion-toolbar>
    <ion-title>
      电话号码验证
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content>
  <div *ngIf="!verificationId">
    <ion-item>
      <ion-label position="floating">手机号</ion-label>
      <ion-input [(ngModel)]="phoneNumber"></ion-input>
    </ion-item>
    <ion-button (click)="sendCode(phoneNumber)">发送验证码</ion-button>
  </div>
 
  <div *ngIf="verificationId && showInput">
    <ion-item>
      <ion-label position="floating">验证码</ion-label>
      <ion-input [(ngModel)]="verificationCode"></ion-input>
    </ion-item>
    <ion-button (click)="verifyCode()">验证</ion-button>
  </div>
 
  <div hidden *ngIf="user">
    <ion-card>
      <ion-card-header>
        <ion-card-title>{{user.displayName}}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>User ID: {{user.uid}}</p>
        <img [src]="user.photoURL" alt="User Profile Picture">
      </ion-card-content>
    </ion-card>
  </div>
 
  <script src="https://www.google.com/recaptcha/api.js"></script>
  <div id="recaptcha-container"></div>
</ion-content>

最后，在“app-routing.module.ts”中定义此组件的路线：

import { PhoneAuthenticationComponent } from './phone-authentication/phone-authentication.component';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then((m) => m.TabsPageModule),
    canActivate: [AuthGuard],
  },
  {
    path: 'login',
    component: PhoneAuthenticationComponent,
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full',
  },
];

现在，运行应用并输入您的电话号码，您应该会看到一个验证码。输入验证码后，您将成功验证电话号码，并将被重定向到主页。

结论

在本文中，我们介绍了使用 Ionic 和 Firebase 实现电话号码验证的步骤。我们使用 AngularFire2 库简化了 Firebase 依赖项的操作，并将其集成到 Ionic 应用程序中。同时，我们还创建了一个“phone-authentication”服务，以实现身份验证逻辑。最后，我们在组件和 HTML 模板中实现了电话号码验证的完整逻辑。