@capgo/capacitor-passkey 사용

code 브라우저 스타일 WebAuthn을 Capacitor 앱에 유지하는 동안 플러그인이 native passkey 호출 및 native 호스트 패칭을 처리합니다.

브라우저 스타일 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(), iOS와 Android passkey API로 요청을 전달하고, 브라우저와 같은 자격 증명 객체를 앱에 반환합니다.

네이티브 프로젝트를 설치하고 동기화하세요.

bun add @capgo/capacitor-passkey
bunx cap sync

호스트 앱을 한번만 구성하세요.

__CAPGO_KEEP_0__에 플러그인 구성 추가 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;

플러그인 구성이 무엇을 하는지

__CAPGO_KEEP_0__에서 구성이 읽어집니다. plugins.CapacitorPasskey in capacitor.config.*.

origin: primary HTTPS relying-party origin 사용하는 shim 및 직접 API
domains: native config에 동기화하는 동안 패치하는 추가 Relying-Party 호스트 이름
autoShim: 기본값으로 true native config을 제어하는 자동 구성 Hook cap sync 설정 변경 후 다시 동기화 하기:

설치 중에 shim을 설치:

bunx cap sync

표준 패키지 엔트리 포인트에서 플러그인을 임포트하고 앱 부트스트랩 중에 shim을 설치:

그 후에, 브라우저 스타일의 existing passkey __CAPGO_KEEP_0__는 여전히 그대로 유지할 수 있습니다.

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

await CapacitorPasskey.autoShimWebAuthn();

After that, your existing browser-style passkey code can stay the same.

normal WebAuthn 흐름을 유지:

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

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

동기화에 대한 sync 패치

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

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

sync patches for you

애플리케이션 bunx cap sync, 플러그인은 생성된 네이티브 호스트 프로젝트를 업데이트합니다:

iOS: 필요할 때 Xcode 권한과 associated domains 권한을 연결합니다.
Android: asset_statements 메타데이터와 생성된 리소스

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

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

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

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

다른 공개 메서드

공개 플러그인 API도 src/definitions.ts:

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

플랫폼 가이드

iOS에 중요한 주의사항

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

Android에 중요한 주의사항

Android Credential Manager는 Digital Asset Links가 구성된 경우 웹 사이트와 동일한 신뢰할 수 있는 당사자와 패스키를 공유할 수 있지만 네이티브 진술 기원은 브라우저 기원과 동일하지 않습니다. clientDataJSON.origin백엔드가 앱 기원과 웹 사이트 기원과 함께 앱 기원을 수락하는지 확인하는지 확인하세요.

Full Reference

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

capgo를 사용하여 계속 진행하세요. @capgo/capacitor-passkey

__CAPGO_KEEP_0__를 사용하는 경우 capgo/capacitor-passkey를 사용하여 인증 및 계정 흐름을 계획하고 __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-passkey와 연결하세요. capgo/capacitor-passkey의 implementation detail을 @capgo/capacitor-passkey에서 확인하세요. for the implementation detail in @capgo/capacitor-passkey, Getting Started Getting Started 구현에 대한 세부 정보 @capgo/capacitor-social-login @capgo/capacitor-social-login 구현에 대한 세부 정보 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 구현에 대한 세부 정보, 그리고 두 단계 인증 두 단계 인증 구현에 대한 세부 정보

패스키

Passkey에 대한 튜토리얼