使用Ionic Capacitor在iOS上实现Passkey/WebAuthn遇阻求助

以下是针对性的排查和修复步骤：

1. 确认包版本兼容性 #

@joyid/capacitor-native-passkey可能存在Capacitor 5适配问题，先检查当前安装的包版本：

npm list @joyid/capacitor-native-passkey

如果版本低于最新版，执行升级：

npm install @joyid/capacitor-native-passkey@latest

升级后重新同步iOS项目：

npx cap sync ios

2. 验证iOS关联域名配置 #

虽然你已经配置了域名关联，但需确保格式完全正确：

• 关联域名必须以webcredentials:开头，比如webcredentials:your-domain.com
• 在Xcode中，打开项目的Signing & Capabilities，确认Associated Domains已添加且格式无误
• 检查apple-app-site-association文件是否放置在域名根目录或.well-known目录，文件内容需包含正确的App ID和WebAuthn相关配置，且文件无后缀名

3. 检查iOS项目的Info.plist配置 #

确保Info.plist中添加了WebAuthn所需的权限描述：

<key>NSFaceIDUsageDescription</key>
<string>用于Passkey无密码登录验证身份</string>
<key>NSBiometricUsageDescription</key>
<string>用于Passkey无密码登录验证身份</string>

如果你的App使用Face ID，必须添加上述权限描述，否则可能导致WebAuthn功能被系统禁用。

4. 替换为社区维护的WebAuthn插件（备选方案） #

如果@joyid的包仍无法解决问题，可以尝试使用Capacitor社区维护的WebAuthn插件：

npm install @capacitor-community/webauthn
npx cap sync ios

修改代码适配新插件：

import { WebAuthn } from '@capacitor-community/webauthn';

async passkeyRegister() {
  const resp = await this.utilService.get('req_register_passkey_otp');
  try {
    const attResp = await WebAuthn.create({
      publicKey: resp.data.passkeyRegOption
    });
    // 处理返回结果
  } catch (error) {
    console.error('注册失败:', error);
  }
}

5. 确认iOS 16环境配置 #

iOS 16正式支持WebAuthn，但需确保：

• 设备已升级到iOS 16.0或更高版本
• Safari浏览器的自动填充密码功能已开启（设置>密码>自动填充密码）

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