跳转至正文
@capgo/capacitor-passkey 身份验证与安全 开源

通行密钥 Capacitor 插件

在 Capacitor 中保留浏览器风格的 WebAuthn code,原生 passkey 调用和 host patching 交给我们处理

安装

bun add @capgo/capacitor-passkey bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-passkey
  • pnpm add @capgo/capacitor-passkey
  • yarn add @capgo/capacitor-passkey

指南

如何在 Capacitor 中使用 Passkey

使用 @capgo/capacitor-passkey

在 Capacitor 应用中保留浏览器风格的 WebAuthn code,同时由插件处理原生 passkey 调用和原生宿主补丁。

浏览器风格的 API

@capgo/capacitor-passkey 沿用您在 Web 端已经在用的 WebAuthn 流程:

await navigator.credentials.create({ publicKey: registrationOptions });
await navigator.credentials.get({ publicKey: requestOptions });

在原生构建中,该插件会安装一个 shim 来 navigator.credentials.create() 以及 navigator.credentials.get()将请求转发至 iOS 和 Android 的 passkey API,并向您的 App 返回类似浏览器的凭据对象。

安装并同步原生项目

bun add @capgo/capacitor-passkey
bunx cap sync

配置一次宿主 App

在以下位置添加插件配置 capacitor.config.ts 或 capacitor.config.json:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'app.capgo.passkey.example',
  appName: 'My App',
  webDir: 'dist',
  plugins: {
    CapacitorPasskey: {
      origin: 'https://signin.example.com',
      autoShim: true,
      domains: ['signin.example.com'],
    },
  },
};

export default config;

插件配置的作用

配置读取自 plugins.CapacitorPasskey 中的 capacitor.config.*.

  • origin:shim 和直接 API 使用的主要 HTTPS relying-party origin
  • domains: 在同步期间将其补丁到原生配置中的额外 relying-party 主机名
  • autoShim: 默认为 true 并控制原生 cap sync 自动配置钩子

修改配置后请再次运行 sync:

bunx cap sync

在启动阶段安装 shim

从标准包入口导入插件,然后在应用启动期间安装 shim:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

await CapacitorPasskey.autoShimWebAuthn();

之后,您现有的浏览器风格 passkey code 可以保持不变。

如果需要在运行时强制使用 shim 或覆盖已配置的 origin,请调用:

import { CapacitorPasskey } from '@capgo/capacitor-passkey';

CapacitorPasskey.shimWebAuthn({
  origin: 'https://signin.example.com',
});

保留原有的 WebAuthn 流程

const credential = await navigator.credentials.create({
  publicKey: registrationOptions,
});

const assertion = await navigator.credentials.get({
  publicKey: requestOptions,
});

同步补丁能为你做什么

在...期间 bunx cap sync,该插件会更新生成的原生宿主项目:

  • iOS:按需配置 associated domains 权限和 Xcode entitlements
  • Android: asset_statements 用于 manifest 的元数据及生成的资源

原生配置仍需网站信任文件

该插件减少了 App 端的工作量,但 Passkey 仍依赖你 Relying Party 域名的网站信任文件。你仍需托管:

  • https://your-domain/.well-known/apple-app-site-association
  • https://your-domain/.well-known/assetlinks.json

插件可以在 sync 期间修补生成的原生项目,但无法替你创建或托管这些网站信任文件。

其他公开方法

公开插件 API 还暴露了定义在以下位置的直接辅助函数: src/definitions.ts:

  • await CapacitorPasskey.getConfiguration() 返回解析后的 origin, domains, autoShim,以及当前的 platform.
  • await CapacitorPasskey.createCredential(...) 通过 JSON 安全的 WebAuthn payload 注册 Passkey。
  • await CapacitorPasskey.getCredential(...) 通过 JSON 安全的 WebAuthn payload 使用现有的 passkey 进行身份验证。
  • await CapacitorPasskey.isSupported() 报告当前运行时环境是否支持 passkeys。
  • await CapacitorPasskey.getPluginVersion() 返回当前原生实现的版本标识。

平台指南

iOS 重要说明

在 iOS 17.4 及更高版本中,该插件使用浏览器风格的 client-data API,因此配置的 HTTPS origin 会反映在 clientDataJSON.

Android 重要注意事项

配置 Digital Asset Links 后,Android Credential Manager 可以与您的网站共享相同的 relying party 和 passkeys,但原生断言 origin 与浏览器 origin 并不完全相同。如果您的后端严格校验 clientDataJSON.origin,请确保它同时接受你的网站 Origin 和 Android 应用 Origin。

完整参考

继续阅读:使用 @capgo/capacitor-passkey

如果你正在使用 使用 @capgo/capacitor-passkey 用来规划身份验证和账户流程,并将它与 @capgo/capacitor-passkey 有关 @capgo/capacitor-passkey 的实现细节, 快速入门 有关“入门指南”中的实现细节, @capgo/capacitor-social-login 在 @capgo/capacitor-social-login 中查看实现细节, @capgo/capacitor-native-biometric 以及 @capgo/capacitor-native-biometric 中的实现细节, 双因素认证 有关双重身份验证的实现细节。

常见问题

Passkey 插件常见问题

如何在 Capacitor 应用中安装 Passkey 插件?

运行 "bun add @capgo/capacitor-passkey"(或 "npm install @capgo/capacitor-passkey"),然后运行 "bunx cap sync",让 iOS 和 Android 项目引入原生 code。再在你的应用 code 中从 "@capgo/capacitor-passkey" 导入。

@capgo/capacitor-passkey 是否支持 React、Vue 和 Angular?

支持。Passkey 是一个 Capacitor 包,因此它可以与任何在 Capacitor 中运行的 Web 框架配合使用,包括 Ionic、React、Vue、Angular、Svelte 以及纯 JavaScript。

@capgo/capacitor-passkey 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-passkey 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-passkey/,并且你可以通过 npm 免费安装该包。欢迎提交 Bug 报告和 Pull Request。

我能否在无需经过 App Store 审核的情况下,更新使用了 Passkey 的 code?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待 App 审核,即可发布 Passkey 变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo