Ionic+Angular+Capacitor应用Firebase手机号认证iOS模拟器报错auth/internal-error

问题背景 #

基于Ionic、Angular、Capacitor的项目，Firebase手机号认证在Web、Android环境正常，但iOS模拟器中触发auth/internal-error，核心表现为模拟器无法加载ReCAPTCHA。谷歌登录功能在iOS模拟器中可正常工作，目前无法测试真机，需用真实手机号完成模拟器端验证。

已执行操作：

• Firebase控制台启用iOS应用，GoogleService-Info.plist放置于Info.plist同目录，包含CLIENT_ID和REVERSED_CLIENT_ID
• Xcode中添加URL Schemes（取自Firebase控制台Encoded app ID）
• capacitor.config.json设置server.allowNavigation: [*]

项目依赖片段：

...
"dependencies": {
    "@angular/animations": "^13.4.0",
    "@angular/common": "^13.4.0",
    "@angular/compiler": "^13.4.0",
    "@angular/core": "^13.4.0",
    "@angular/fire": "7.2",
    "@angular/forms": "^13.4.0",
    "@angular/platform-browser": "^13.4.0",
    "@angular/platform-browser-dynamic": "^13.4.0",
    "@angular/router": "^13.4.0",
    "@capacitor/android": "^5.0.5",
    "@capacitor/app": "5.0.6",
    "@capacitor/core": "5.5.1",
    "@capacitor/haptics": "5.0.6",
    "@capacitor/ios": "^5.5.1",
    "@capacitor/keyboard": "5.0.6",
    "@capacitor/status-bar": "5.0.6",
    "@ionic/angular": "^6.7.5",
    "firebaseui-angular": "^6.1.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0"
  },
...

核心代码：

• environment.ts：使用开发环境配置构建（ng build --configuration development）
• app.module.ts：

@NgModule({
  ...,
  imports: [
    ...
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
  ],
  ...
})
export class AppModule {}

• home.module.ts：

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        size: 'invisible', // 切换其他尺寸仍报错
        badge: 'bottomright',
      },
      defaultCountry: 'IN',
    },
  ],
  tosUrl: '...',
  privacyPolicyUrl: '...',
};

@NgModule({
  imports: [
    ...,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig),
  ],
  declarations: [HomePage],
})

• home.page.html：

...
<firebase-ui></firebase-ui>
...

额外尝试：测试过Capacitor Firebase认证Demo，Web端同样出现auth/internal-error且无ReCAPTCHA；尝试cordova-plugin-firebasex，因兼容问题无法使用。

解决方案 #

1. 修复ReCAPTCHA模拟器兼容性 #

iOS模拟器对不可见ReCAPTCHA支持有限，切换为可见模式并配置WebView权限：

• 修改home.module.ts的ReCAPTCHA配置：

recaptchaParameters: {
  size: 'normal', // 替换为normal/compact，避免invisible模式失效
  badge: 'bottomright',
},

• 在Xcode的Info.plist中添加App Transport Security配置，允许加载ReCAPTCHA资源：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>google.com</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
    <key>recaptcha.net</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

2. 完善Firebase iOS配置 #

• 确认Xcode的URL Schemes使用GoogleService-Info.plist中的REVERSED_CLIENT_ID：
  1. 进入Xcode App目标 -> Info -> URL Types
  2. 新增URL Scheme，将REVERSED_CLIENT_ID的值填入URL Schemes字段，Identifier设为com.googleusercontent.apps.xxx（与REVERSED_CLIENT_ID前缀一致）
• 同步Capacitor配置：运行npx cap sync ios后重新构建项目

3. 调整FirebaseUI登录流程 #

popup模式在iOS模拟器WebView中存在兼容性问题，改为redirect模式：

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'redirect', // 替换popup为redirect
  signInOptions: [
    // 保持原有配置不变
  ],
  tosUrl: '...',
  privacyPolicyUrl: '...',
};

4. 验证基础配置正确性 #

• 检查Firebase控制台iOS应用的Bundle ID与Xcode中完全一致（大小写敏感）
• 确认Firebase Auth手机号认证已启用，且无区域限制（如印度区域是否在允许范围内）

5. 开启调试定位具体错误 #

在environment.ts中启用Firebase调试模式，查看Xcode控制台的详细错误日志：

export const environment = {
  // 其他配置不变
  firebase: {
    // 你的Firebase配置
    debug: true,
  },
};

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