Credential Management API 기능 감지 진단

요약

WebAuthn은 공개 키 사용자 인증 정보 기반 인증을 웹에 제공하여 보안을 강화하는 데 도움이 되며 Chrome, Firefox, Edge에서 곧 지원될 예정입니다 (업데이트된 사양 사용). 새로운 종류의 Credential 객체를 추가하지만, 이로 인해 사용 중인 특정 사용자 인증 정보 유형을 기능 감지하지 않고도 Credential Management API를 사용하는 웹사이트가 중단될 수 있습니다.

현재 특성 감지를 위해 이 작업을 수행 중인 경우

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

수행할 작업

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

예를 보려면 샘플 코드의 변경사항을 참고하세요.

자세한 내용을 알아보려면 계속 읽어보세요.

Credential Management API란 무엇인가요?

Credential Management API(CM API)는 호출 출처의 사용자 인증 정보를 저장/검색할 수 있도록 웹사이트에 사용자 에이전트의 사용자 인증 정보 저장소에 대한 프로그래매틱 액세스 권한을 제공합니다.

기본 API는 다음과 같습니다.

  • navigator.credentials.get()
  • navigator.credentials.store()
  • navigator.credentials.create()
  • navigator.credentials.preventSilentAccess()

원래 CM API 사양은 다음 두 가지 사용자 인증 정보 유형을 정의합니다.

  • PasswordCredential
  • FederatedCredential

PasswordCredential는 사용자의 ID와 비밀번호가 포함된 사용자 인증 정보입니다. FederatedCredential는 사용자 ID와 ID 공급업체를 나타내는 문자열이 포함된 사용자 인증 정보입니다.

이 2가지 사용자 인증 정보를 사용하면 웹사이트에서 다음 작업을 할 수 있습니다.

  • 사용자가 이동하자마자 이전에 저장한 비밀번호 기반 또는 제휴 사용자 인증 정보로 로그인 (자동 로그인)할 수 있도록 합니다.
  • 사용자가 로그인한 비밀번호 기반 또는 제휴 사용자 인증 정보 저장
  • 사용자의 로그인 사용자 인증 정보를 최신 상태로 유지 (예: 비밀번호 변경 후)

WebAuthn이란?

WebAuthn (웹 인증)은 CM API에 공개 키 사용자 인증 정보를 추가합니다. 예를 들어 이 인증은 웹사이트에 FIDO 2.0 호환 인증자 기기를 사용하여 2단계 인증을 구현하는 표준화된 방법을 제공합니다.

기술 수준에서 WebAuthn은 PublicKeyCredential 인터페이스를 사용하여 CM API를 확장합니다.

무엇이 문제인가요?

이전에는 다음 코드를 사용하여 CM API의 기능 감지를 개발자에게 안내했습니다.

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browsers**
<table class="properties with-heading-tint"><tbody><tr>
<th></th>
<th>PasswordCredential / FederatedCredential</th>
<th>PublicKeyCredential</th>
</tr><tr><th>Chrome
</th><td>Available
</td><td>In development
</td></tr><tr><th>Firefox
</th><td>N/A
</td><td>Aiming to ship on 60
</td></tr><tr><th>Edge
</th><td>N/A
</td><td>Implemented with <a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello-in-microsoft-edge/">older API</a>. New API (navigator.credentials) coming soon.
</td></tr></tbody></table>


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

예를 들어 샘플 코드의 실제 변경사항을 참고하세요.

참고로 WebAuthn에 추가된 PublicKeyCredential를 감지하는 방법은 다음과 같습니다.

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

타임라인

WebAuthn을 사용할 수 있는 가장 이른 구현은 Firefox이며 2018년 5월 초에 안정화될 예정입니다.

최종

궁금한 점이 있으면 @agektmr 또는agektmr@chromium.org로 문의하세요.