사용자가 패스키를 더 원활하게 채택하도록 지원

Eiji Kitamura

게시일: 2025년 5월 9일

패스키는 강력한 피싱 방지 인증을 제공합니다. 하지만 사용자가 이를 채택하도록 하는 데는 어려움이 있을 수 있습니다. 자동 패스키 생성을 사용하면 사용자가 사이트에 저장된 비밀번호를 이미 보유하고 있는 경우 적절한 시점에 사용자의 패스키를 생성할 수 있습니다. 패스키 자동 생성을 지원하는 조건부 생성은 WebAuthn 사양의 일부입니다.

작동 방식

사용자가 더 편리하게 패스키를 채택할 수 있도록 조건부 생성이라는 WebAuthn API 기능을 사용하세요. 조건부 생성 기능을 사용하면 사용자의 조치 없이 사이트에서 사용자의 패스키를 요청할 수 있습니다.

이 흐름은 다음 조건을 충족할 때 작동합니다.

  • 사용자가 기본 비밀번호 관리자에 저장된 비밀번호를 가지고 있습니다.
  • 비밀번호가 최근에 사용되었습니다. 성공적인 비밀번호 기반 로그인 직후에 조건부 생성을 호출하는 것이 좋습니다.

두 조건이 모두 충족되면 조건부 생성을 호출하여 비밀번호 관리자에게 사용자의 패스키를 생성하도록 요청할 수 있습니다. 패스키를 성공적으로 만든 후 비밀번호 관리자에 따라 사용자에게 알림이 전송됩니다.

조건부 생성을 사용하는 패스키 요청 흐름

호환성

조건부 생성은 macOS의 Safari 및 iOS의 모든 브라우저와 데스크톱의 Chrome, Android의 Chrome에서 지원됩니다.

조건부 생성 구현

자동 패스키 생성은 조건부 생성이라는 WebAuthn API 기능을 기반으로 합니다. 이는 mediation 매개변수가 "conditional"로 설정된 일반 WebAuthn create() 요청으로, get() 요청의 패스키 자동 완성 기능과 유사하게 작동합니다.

사용자가 비밀번호로 로그인한 후 조건부 생성을 사용합니다. 생성 성공 여부는 비밀번호 관리자와 특정 조건 충족 여부에 따라 달라집니다. 이러한 조건은 비밀번호 관리자에 따라 다를 수 있으며 시간이 지남에 따라 변경될 수 있습니다. 예를 들어 Google 비밀번호 관리자 (GPM)가 있는 Chrome에서 사용자는 사이트의 저장된 비밀번호를 사용하여 최근에 로그인해야 합니다.

브라우저가 패스키를 성공적으로 생성하면 공개 키 사용자 인증 정보를 반환합니다. 등록을 완료하고 향후 인증을 사용 설정하려면 이 사용자 인증 정보를 백엔드로 전송하세요.

기능 감지

PublicKeyCredential.getClientCapabilities()를 호출하여 브라우저에서 조건부 생성을 사용할 수 있는지 확인할 수 있습니다. 반환된 객체에 conditionalCreate 속성의 true이 포함되어 있는지 확인합니다.

if (window.PublicKeyCredential && PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalCreate) {
    // Conditional create is available
  }
}

getClientCapabilities을 사용할 수 없으면 조건부 생성도 사용할 수 없습니다.

조건부로 패스키 생성

자동 패스키 생성을 실행하려면 다음과 같이 mediation: "conditional"을 사용하여 navigator.credentials.create()를 호출합니다.

const cred = await navigator.credentials.create({
  publicKey: options,
  // Request conditional creation
  mediation: 'conditional'
});

사용자가 로그인한 직후 자동 패스키 생성을 사용하여 자동 생성에 관한 비밀번호 관리자 기준을 충족할 가능성을 극대화해야 합니다.

결과 공개 키 사용자 인증 정보를 서버로 전송하여 패스키를 확인하고 등록할 수 있습니다. 서버에서 사용자가 로그인되어 있는지 확인합니다.

주의사항

조건부 생성 자체는 구현하기 어렵지 않지만 실제로 이 기능을 기존 시스템에 통합할 때는 몇 가지 주의사항이 있습니다.

서버에서 사용자 존재 및 사용자 확인 무시

등록 응답은 '사용자 존재'와 '사용자 확인'을 모두 false로 반환하므로 서버는 인증 정보 확인 중에 이러한 플래그를 무시해야 합니다.

자동 패스키 생성을 실행하기 전에 진행 중인 WebAuthn 호출 중단

RP가 사용자가 패스키 또는 비밀번호로 로그인할 것으로 예상하는 경우 조건부 가져오기를 실행하는 것이 가장 좋습니다. 이로 인해 조건부 생성 실행 전에 조건부 가져오기 호출이 취소될 수 있습니다.

이렇게 하려면 AbortController을 사용하고 .abort()을 호출해야 합니다.

// To abort a WebAuthn call, instantiate an AbortController.
const controller = new AbortController();

const cred = await navigator.credentials.get({
  publicKey: options,
  signal: controller.signal,
  // Request conditional get
  mediation: 'conditional'
});

// Abort the call
controller.abort();

예외를 적절하게 무시

조건부 패스키 생성이 실행될 때 예외를 무시해야 하는 몇 가지 경우가 있습니다.

  • InvalidStateError: 패스키 제공자에 패스키가 이미 있습니다 (excludeCredentials를 지정해야 함).
  • NotAllowedError: 패스키를 만드는 것은 조건을 충족하지 않습니다.
  • AbortError: WebAuthn 호출이 중단되었습니다.

이러한 경우 오류를 표시하면 브라우저에서 자동으로 처리하므로 사용자에게 혼동을 줄 수 있습니다. 성공 시에만 알림이 표시되고 실패 시에는 표시되는 메시지가 트리거되지 않습니다.

패스키 등록이 실패할 때 신호

패스키가 생성되었지만 서버에 등록되지 않은 경우 사용자는 로그인 시도 실패를 경험하게 됩니다. 이 문제는 패스키 제공업체와 서버 간의 패스키 목록이 일치하지 않을 때 발생할 수 있습니다.

이러한 상황을 방지하려면 신호 API를 사용하여 일관성을 유지하세요.

비밀번호 없는 로그인에서 업그레이드는 지원되지 않음

이 시점에서 조건부 패스키 생성은 사용자가 유효한 비밀번호를 입력하는 경우에만 허용됩니다. 즉, 매직 링크, 전화번호 인증, ID 제휴와 같은 비밀번호 없는 로그인 방식은 조건을 충족하지 않습니다.

요약

자동 패스키 생성은 웹사이트에서 패스키 도입을 가속화하여 사용자가 비밀번호에서 더 안전한 인증 방법으로 전환하도록 지원할 수 있습니다.

패스키에 대해 자세히 알아보려면 패스키를 사용한 패스워드리스 로그인을 참고하세요.