__CAPGO_KEEP_0__
@capgo/capacitor-passkey 安全 & 认证 开源

Passkey Capacitor插件

在Capacitor中保留浏览器样式的WebAuthn code,同时为您处理本机Passkey调用和宿主补丁

安装

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

在浏览器样式的 WebAuthn code 中,使用一个 Capacitor 应用程序,同时插件处理本机 passkey 调用和本机主机补丁。

浏览器样式 API

@capgo/capacitor-passkey 浏览器样式 __CAPGO_KEEP_0__ 保持您在 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,并返回浏览器样式的凭据对象给您的应用程序。

安装和同步本机项目

bun add @capgo/capacitor-passkey
bunx cap sync

配置主机应用程序一次

在 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 依赖方源
  • domains: 需要在本地配置中同步时补充的额外依赖方主机名
  • autoShim: 默认值 true 并控制本地 cap sync 自动配置钩子

更改配置后再次运行同步:

bunx cap sync

在引导期间安装 shim

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

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

await CapacitorPasskey.autoShimWebAuthn();

然后,您的现有浏览器样式密码 code 可以保持不变。

如果您需要在运行时强制 shim 或覆盖配置的源站,请调用:

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:相关域名权限和 Xcode 权限编排(当需要时)
  • Android: asset_statements 元数据和由清单使用的生成资源

本机设置仍然需要网站信任文件

插件减少了应用侧的工作,但 passkeys 仍然依赖于您的依赖方域的网站信任文件。您仍然需要托管:

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

插件可以在同步期间补丁生成的本机项目,但它无法创建或托管这些网站信任文件给您。

其他公共方法

该公共插件 API 还暴露了在 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及以上版本中,插件使用浏览器样式的客户端数据API,因此配置的HTTPS源站将反映在 clientDataJSON.

Android重要注意事项

Android凭据管理器可以与您的网站共享同一个依赖方和密钥,当数字资产链接配置时,但原生断言源站与浏览器源站不相同。如果您的后端严格验证 clientDataJSON.origin请确保它接受Android应用源站和您的网站源站。

完整参考

继续使用@capgo/capacitor-passkey

如果您正在使用 使用@capgo/capacitor-passkey 用于规划身份验证和帐户流程,连接它 @capgo/capacitor-passkey 有关@capgo/capacitor-passkey的实现细节 开始 有关开始的实现细节 @capgo/capacitor-社交登录 有关@capgo/capacitor-social-login的实现细节 @capgo/capacitor-native-biometric 有关@capgo/capacitor-native-biometric的实现细节,以及 双因素身份验证 有关双因素身份验证的实现细节

FAQ

Passkey 插件 FAQ

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

运行 "bun add @capgo/capacitor-passkey" (或 "npm install @capgo/capacitor-passkey"),然后运行 "bunx cap sync" 以使 iOS 和 Android 项目捕获 native code。从 "@capgo/capacitor-passkey" 导入您的应用 code。

@capgo/capacitor-passkey 与 React、Vue 和 Angular 是否兼容?

是。Passkey 是一个 Capacitor 包,因此它与任何运行在 Capacitor 内部的 web 框架兼容,包括 Ionic、React、Vue、Angular、Svelte 和普通 JavaScript。

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

Capgo 插件遵循 Capacitor 的主要版本:使用与您的 Capacitor 主要版本匹配的插件主要版本(例如插件 v8 与 Capacitor 8)。兼容性表格在 GitHub README 中列出已维护的版本。

是否@capgo/capacitor-passkey 免费且开源?

是。源码code在GitHub上公开,https://github.com/Cap-go/capacitor-passkey/,并且可以从npm免费安装。欢迎bug报告和pull请求。

是否可以在不经过App Store审核的情况下更新code使用Passkey?

安装或升级插件会改变原生code,因此需要新建一个商店构建。之后,使用Capgo实时更新的JavaScript、HTML和CSS代码可以立即部署。

不必等待应用程序审查即可将Passkey更改交付

一旦插件在您的商店构建中,Capgo实时更新将推送您的JavaScript、HTML和CSS更改到用户中几分钟内。

从Capgo开始