基于Capacitor的Ionic/Angular iOS应用手机号认证问题求助

一、Web端搞定“recaptchaVerifier must be provided”报错 #

Web端用@capacitor-firebase/authentication做手机号认证时，仍然依赖Firebase Web SDK的reCAPTCHA验证，别误以为用了Capacitor插件就能跳过这一步。

1. 初始化reCAPTCHA验证器
   在认证组件中，通过平台判断仅在Web环境下创建RecaptchaVerifier实例，绑定到页面的DOM容器（哪怕隐藏也可以）：

   import { Component, OnInit } from '@angular/core';
   import { AngularFireAuth } from '@angular/fire/compat/auth';
   import { RecaptchaVerifier } from '@angular/fire/auth';
   import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
   import { Platform } from '@ionic/angular';
   
   @Component({
     selector: 'app-phone-auth',
     templateUrl: './phone-auth.component.html',
     styleUrls: ['./phone-auth.component.scss'],
   })
   export class PhoneAuthComponent implements OnInit {
     recaptchaVerifier: RecaptchaVerifier | undefined;
     phoneNumber = '';
   
     constructor(
       private angularFireAuth: AngularFireAuth,
       private platform: Platform
     ) {}
   
     ngOnInit() {
       if (this.platform.is('web')) {
         this.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
           size: 'invisible', // 不想显示reCAPTCHA就用这个，需要显示则换'normal'
           callback: () => console.log('reCAPTCHA验证通过'),
           'expired-callback': () => console.log('reCAPTCHA过期，请重新发起验证')
         }, this.angularFireAuth.auth);
       }
     }
   
     async getVerificationCode() {
       try {
         const authParams: any = { phoneNumber: this.phoneNumber };
         // 仅Web端需要传入recaptchaVerifier，原生端无需传递
         if (this.platform.is('web') && this.recaptchaVerifier) {
           authParams.recaptchaVerifier = this.recaptchaVerifier;
         }
         const { verificationId } = await FirebaseAuthentication.signInWithPhoneNumber(authParams);
         // 跳转到验证码输入页面，将verificationId传入用于后续验证
       } catch (error) {
         console.error('发送验证码失败:', error);
       }
     }
   
     async confirmCode(verificationId: string, code: string) {
       try {
         const { user } = await FirebaseAuthentication.confirmVerificationCode({
           verificationId,
           code
         });
         // 认证成功，处理用户信息或跳转逻辑
       } catch (error) {
         console.error('验证码验证失败:', error);
       }
     }
   }
   

2. 添加隐藏的DOM容器
   在组件模板中添加reCAPTCHA所需的DOM容器，隐藏即可：

   <div id="recaptcha-container" style="display: none;"></div>
   
   <ion-input type="tel" placeholder="输入手机号" [(ngModel)]="phoneNumber"></ion-input>
   <ion-button (click)="getVerificationCode()" [disabled]="!phoneNumber">获取验证码</ion-button>
   

二、iOS端功能失效的排查步骤 #

iOS端的问题基本都是配置遗漏导致的，按以下步骤逐一排查：

1. 检查Firebase配置文件
   • 确保GoogleService-Info.plist已放入Xcode项目根目录，且右键文件后确认"Add to Targets"已勾选你的应用（未勾选的话Xcode不会将其打包进应用）。
   • 核对Firebase控制台中iOS应用的Bundle ID，必须与Xcode项目中的Bundle ID完全一致，字符差一个都不行。
2. 确保插件版本兼容
   Capacitor V6对应的@capacitor-firebase/authentication需为6.x版本，查看package.json确认：

   "@capacitor-firebase/authentication": "^6.0.0"
   

   版本不符则修改后执行npm install，再运行npx cap sync ios同步到iOS项目，最后在Xcode中执行pod install确保依赖安装完整。
3. 开启Firebase手机号认证
   进入Firebase控制台的Auth模块，在登录方式中启用“电话号码”选项；若为测试环境，将测试手机号添加到“测试号码”列表，避免触发短信频率限制。
4. 使用真实设备测试
   iOS模拟器无法接收真实短信验证码，必须使用真实iOS设备测试，否则无法完成验证码验证流程。
5. 权限与网络无需额外配置
   手机号认证不需要特殊权限，iOS应用默认允许网络访问，无需额外调整。

关键注意事项 #

• 不要同时混用@angular/fire和@capacitor-firebase/authentication的认证API，统一使用Capacitor插件方法，避免冲突。
• 必须区分环境：Web端传入recaptchaVerifier，iOS/Android端则跳过该参数，通过Platform服务判断环境即可。

内容的提问来源于stack exchange，提问作者AlejoDev