패스키의 WebAuthn 기능 감지 간소화

getClientCapabilities()로 WebAuthn 기능을 감지하고 사용자에게 맞게 인증 워크플로를 조정하는 방법을 알아보세요.

게시일: 2025년 1월 22일

인증 워크플로가 사용자의 브라우저와 기기에 원활하게 적응하도록 하려면 어떻게 해야 하나요?

Chrome 133부터 getClientCapabilities() WebAuthn API를 사용하면 브라우저에서 지원되는 인증 기능을 확인할 수 있습니다. 개발자는 PublicKeyCredential.getClientCapabilities()를 호출하여 지원되는 기능 목록을 가져오고 그에 따라 인증 워크플로를 조정할 수 있습니다.

이 개선사항을 통해 개발자는 사용자 환경에 맞게 더 강력하고 사용자 친화적인 인증 흐름을 만들 수 있습니다.

구현 방법은 다음과 같습니다.

if (window.PublicKeyCredential &&
    PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalGet === true &&
      capabilities.passkeyPlatformAuthenticator === true) {
    // The browser supports passkeys and conditional mediation.
  }
}

이 메서드를 사용하면 패스키, 조건부 미디에이션 (대화상자의 패스키 자동 완성), 하이브리드 전송 (블루투스를 사용한 교차 기기 인증), 확장 프로그램과 같은 지원되는 기능을 식별하여 사용자에게 적합한 인증 환경을 조정할 수 있습니다.

기능 감지가 중요한 이유

클라이언트 기능을 이해하면 다음 작업을 할 수 있습니다.

  • 클라이언트에서 지원되는 기능에 맞게 구현을 조정하여 더 원활한 사용자 환경을 만들고 인증 안정성을 개선하세요.
  • 지원되지 않는 WebAuthn 기능으로 인한 오류를 줄입니다.

getClientCapabilites()를 사용하면 다양한 기기와 브라우저에서 작동하는 인증 환경을 확신할 수 있습니다.

탐색 시작

시작할 준비가 되면 getClientCapabilities()를 사용한 간편한 WebAuthn 기능 감지에서 기능의 전체 목록, 자세한 안내, 권장사항을 확인하세요.

패스키 및 패스워드리스 로그인에 대해 자세히 알아보려면 패스키 Chrome 페이지를 방문하세요.