Ionic Angular+Capacitor社交登录后iOS端黑屏问题求助

排查与解决步骤 #

1. 确保UI操作在Angular NgZone内执行 #

登录成功后的回调逻辑若脱离Angular的变更检测区，会导致UI无法更新，需用NgZone包裹：

import { NgZone } from '@angular/core';
import { Router } from '@angular/router';

constructor(private ngZone: NgZone, private router: Router) {}

// 以Google登录为例的回调处理
async handleGoogleLogin() {
  const response = await GoogleAuth.signIn();
  // 登录成功后在NgZone内执行导航/UI更新
  this.ngZone.run(() => {
    this.router.navigate(['/dashboard']);
  });
}

2. 检查未正确关闭的加载遮罩 #

若登录前开启了加载弹窗，需确保登录完成后无论成功失败都关闭：

import { LoadingController } from '@ionic/angular';

async presentLoading() {
  const loading = await this.loadingController.create({
    message: '登录中...'
  });
  await loading.present();
  return loading;
}

async handleLogin() {
  const loading = await this.presentLoading();
  try {
    // 执行登录逻辑
    await this.authService.login();
    this.ngZone.run(() => this.router.navigate(['/home']));
  } catch (err) {
    // 处理错误
  } finally {
    // 确保关闭加载弹窗
    if (await this.loadingController.getTop()) {
      await loading.dismiss();
    }
  }
}

3. 修复iOS原生视图层级问题 #

社交登录的模态窗口可能未正确关闭，可在iOS的AppDelegate.swift中补充视图关闭逻辑：

import UIKit
import Capacitor

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
        // 处理Capacitor的URL回调
        if CAPBridge.handleOpenUrl(url, options) {
            // 强制关闭所有模态视图
            if let rootVC = window?.rootViewController {
                rootVC.dismiss(animated: true, completion: nil)
            }
            return true
        }
        return false
    }
}

4. 验证社交登录插件配置 #

• Facebook登录：检查Info.plist中是否正确配置FacebookAppID、FacebookDisplayName，且LSApplicationQueriesSchemes包含fbauth2、fbapi等项。
• Google登录：确认GoogleService-Info.plist已添加到iOS项目根目录，且Info.plist的CFBundleURLTypes中包含REVERSED_CLIENT_ID对应的URL Scheme。

5. 更新兼容版本 #

当前使用的插件版本可能存在Capacitor 3.x的兼容性问题，尝试更新：

# 更新社交登录插件
npm update @capacitor-community/facebook-login @codetrix-studio/capacitor-google-auth
# 同步iOS项目
npx cap sync ios

6. 调试视图层级 #

使用Xcode的View Debugging功能（点击调试栏中的Debug View Hierarchy按钮），查看是否有黑色/透明图层覆盖主视图，定位后在代码中移除或隐藏该图层。

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