@capgo/capacitor-passkey을 사용하세요.

code을 Capacitor 앱에 설치하여 브라우저 스타일의 WebAuthn code를 유지하세요. 플러그인은 네이티브 패스키 호출과 네이티브 호스트 패칭을 처리합니다.

브라우저 스타일 API

@capgo/capacitor-passkey __CAPGO_KEEP_0__은 웹에서 이미 사용하는 것과 같은 브라우저 스타일의 WebAuthn 흐름을 유지합니다:

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

네이티브 빌드에서 플러그인은 navigator.credentials.create() 그리고 navigator.credentials.get()네이티브 프로젝트를 설치하고 동기화하세요

__CAPGO_KEEP_0__

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: API shim 및 직접 사용하는 기본 HTTPS 의존성 원본
domains: native 구성에 동기화하는 동안 패치하는 추가 의존성 호스트 이름
autoShim: 기본값 true native 구성과 제어하는 cap sync 자동 구성 hook

설정 앱 구성이 변경되면 다시 동기화 하세요.

bunx cap sync

설치 시미를 부트스트랩期间에 설치하세요

플러그인을 표준 패키지 엔트리 포인트에서 임포트하고 앱 부트스트랩 시에 시미를 설치하세요:

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

await CapacitorPasskey.autoShimWebAuthn();

그 후에, code과 같은 기존 브라우저 스타일의 패스키가 그대로 유지될 수 있습니다.

런타임에 시미를 강제로 호출하거나 구성된 원본을 오버라이드하려면 호출하세요:

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 권한과 associated domains 권한을 연결합니다
Android: asset_statements 메타데이터와 생성된 리소스를 사용하는 매니페스트

네이티브 설정은 여전히 웹사이트 신뢰 파일이 필요합니다

이 플러그인은 앱 내 작업을 줄이지만, 패스키는 여전히 의존하는 웹사이트의 신뢰 파일에 따라서도 여전히 의존합니다. 여전히 다음을 호스팅해야 합니다:

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

이 플러그인은 생성된 네이티브 프로젝트를 동기화 중에 패치할 수 있지만, 의존하는 웹사이트의 신뢰 파일을 생성하거나 호스팅할 수는 없습니다.

다른 공개 메소드

공개 플러그인 API도 API에서 정의된 직접 도우미를 노출합니다. src/definitions.ts:

await CapacitorPasskey.getConfiguration() 해당하는 __CAPGO_KEEP_0__를 반환합니다. origin, domains, autoShim, 현재 platform.
await CapacitorPasskey.createCredential(...) JSON-안전한 WebAuthn 페이로드에서 패스키를 등록합니다.
await CapacitorPasskey.getCredential(...) JSON-안전한 WebAuthn 페이로드에서 존재하는 패스키와 인증합니다.
await CapacitorPasskey.isSupported() 현재 런타임이 패스키를 지원하는지 여부를 보고합니다.
await CapacitorPasskey.getPluginVersion() 현재 네이티브 구현 버전 마커를 반환합니다.

플랫폼 가이드

iOS에 중요한 주의사항

iOS 17.4 이상 버전에서 플러그인은 브라우저 스타일의 client-data API을 사용하므로 구성된 HTTPS 원본이 반영됩니다. clientDataJSON.

Android Credential Manager는 Digital Asset Links가 구성된 경우 웹사이트와 동일한 의존성 파트너와 패스키를 공유할 수 있지만 네이티브 어설션 원본은 브라우저 원본과 동일하지 않습니다. 백엔드가 엄격하게 유효성을 검사하는 경우

백엔드가 웹사이트 원본과 함께 Android 앱 원본을 수용하도록 확인하십시오. clientDataJSON.origin전체 참조

__CAPGO_KEEP_0__:

https://GitHub.com/Cap-go/__CAPGO_KEEP_1__-passkey/ https://github.com/Cap-go/capacitor-passkey/
Docs

Using @capgo/capacitor-passkey

만약 사용 중이라면 Using @capgo/capacitor-passkey 인증 및 계정 흐름을 계획하기 위해 사용 중이라면 @capgo/capacitor-passkey @capgo/capacitor-passkey Getting Started Getting Started @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 두 단계 인증 두 단계 인증 구현에 대한 세부 정보

패스키

Passkey에 대한 튜토리얼