Capacitor应用能否在iOS设备调用Passkey？是否需要插件？

可行性结论 #

完全可行，但不能直接在Capacitor的WebView中使用网页端的WebAuthn API，必须借助原生插件桥接iOS系统的Passkey能力。

为什么移动端卡在create credentials？ #

iOS的WKWebView（Capacitor默认使用的WebView）对非浏览器环境下的WebAuthn API做了限制，直接调用navigator.credentials.create()无法触发系统的Passkey选择弹窗，导致流程卡住。而Safari浏览器属于原生信任的环境，所以网页端可以正常运行。

是否需要额外插件？ #

需要。推荐使用社区维护的Capacitor WebAuthn插件（如@capacitor/webauthn），这类插件会封装原生层的Passkey调用逻辑，让你在App中安全触发系统的Passkey创建/验证流程。

解决方案步骤 #

1. 安装并配置插件
   执行命令安装插件并同步到原生项目：

   npm install @capacitor/webauthn
   npx cap sync
   

   同时在Apple开发者后台和Xcode中配置关联域名（Associated Domains），添加格式为webcredentials:your-server-domain.com的条目，确保App与WebAuthn服务器域名绑定（Passkey同步和验证的必要条件）。

2. 替换WebAuthn API调用
   把原来直接调用navigator.credentials.create()的代码，替换为插件提供的API：

   import { WebAuthn } from '@capacitor/webauthn';
   
   async function createPasskey() {
     // 从服务器获取WebAuthn挑战数据
     const challengeRes = await fetch('/api/webauthn/get-challenge');
     const challengeData = await challengeRes.json();
   
     try {
       // 调用插件触发原生Passkey创建
       const credential = await WebAuthn.createCredential({
         challenge: challengeData.challenge,
         rp: challengeData.rp,
         user: challengeData.user,
         pubKeyCredParams: challengeData.pubKeyCredParams,
         timeout: 60000
       });
   
       // 将凭证数据传给服务器完成验证
       await fetch('/api/webauthn/verify-credential', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(credential)
       });
     } catch (err) {
       console.error('Passkey创建失败:', err);
     }
   }
   

3. 真机测试
   尽量使用iPhone真机测试，iOS模拟器对Passkey的支持存在局限性，可能无法正常触发弹窗。

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