이 페이지는 Cloud Translation API를 통해 번역되었습니다.

오리진 트라이얼: 원활한 로그인을 위한 WebAuthn 즉시 미디에이션

José Luis Zapata

게시일: 2025년 8월 19일

WebAuthn 즉시 중재는 사용자 로그인 흐름을 간소화하도록 설계된 새로운 웹 기능입니다. 이 오리진 트라이얼에서는 기능, 이점, 구현 세부정보를 간략하게 설명하며, 여러분의 참여를 통해 웹 인증의 미래를 만들어 나가고자 합니다.

배경

웹에서의 인증은 사용자 로그인에 마찰을 일으켜 복잡하게 만드는 경우가 많습니다. 기존 WebAuthn 흐름은 강력하지만 특히 사용자 인증 정보를 즉시 사용할 수 없는 경우 '로그인' 버튼에 문제가 있어 표준 양식 대체로 이어집니다.

즉시 중재 흐름의 예

이 새로운 기능은 모바일의 preferImmediatelyAvailableCredentials API와 유사한 마찰 없는 로그인 흐름을 도입합니다. 마찰을 줄이고 사용자 환경을 개선하여 표준 로그인 양식보다 먼저 로그인하는 경우가 많아 로그인 절차가 간소화됩니다.

작동 방식

WebAuthn 즉시 중재를 사용하면 더 직접적이고 효율적인 로그인 환경을 사용할 수 있습니다. 이를 통해 브라우저는 사용 가능한 사용자 인증 정보를 즉시 제공하거나 기기 간 또는 보안 키 인증을 묻지 않고 사용자 인증 정보가 없음을 즉시 알릴 수 있으므로 개발자의 구현이 간소화됩니다.

`immediate` 미디에이션 유형

navigator.credentials.get() 요청에 immediate 미디에이션 유형이 도입됩니다. 이 옵션을 설정하면 로컬에서 사용 가능한 사용자 인증 정보를 찾을 수 없는 경우 약속이 NotAllowedError로 거부됩니다. 사용자 인증 정보가 있으면 브라우저에서 인증 프로세스를 정상적으로 처리합니다.

이 유연성을 통해 사이트는 로그인 흐름을 조정하여 즉시 사용할 수 있는 사용자 인증 정보가 없는 경우 대체 방법을 원활하게 제공할 수 있습니다.

중요한 점은 브라우저가 사용자 개인 정보 보호 및 보안을 유지하기 위해 여전히 NotAllowedError를 반환하여 지문 인식이나 추적과 같은 문제를 방지할 수 있다는 것입니다.

기능 감지

PublicKeyCredential.getClientCapabilities()를 사용하여 즉시 미디에이션을 사용할 수 있는지 감지할 수 있습니다. 개발자는 반환된 capabilities 객체에서 immediateGet 기능을 확인할 수 있습니다.

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

참고: 더 광범위한 브라우저 지원을 위해 getClientCapabilities()용 폴리필은 WebAuthn 폴리필 GitHub 저장소에서 제공됩니다.

구현 예

API를 사용하려면 mediation: 'immediate'으로 navigator.credentials.get()를 호출하세요. 대부분의 사용자가 현재 저장된 비밀번호를 가지고 있으며 이 환경을 즉시 활용할 수 있으므로 요청에 password: true를 포함하는 것이 좋습니다.

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

개발자는 catch 블록에서 NotAllowedError를 처리하여 원활한 대체 로그인 환경을 제공해야 합니다.

즉시 조정의 단계별 흐름

WebAuthn 즉시 중재는 사용자의 로그인을 간소화하기 위한 두 가지 기본 사용 사례를 지원합니다. 원치 않는 대체 옵션을 억제하는 전용 '패스키로 로그인' 버튼을 사용 설정하고, 사용자가 중요한 작업을 수행하기 전에 사용자에게 적극적으로 사용자 인증 정보를 제공하는 동적 로그인 흐름을 지원합니다.

사용 사례 1: 로그인 버튼을 사용한 명시적 로그인

이 시나리오에서는 전용 로그인 버튼을 제공하여 예기치 않은 메시지나 로그인 페이지를 거치지 않고 깔끔한 사용자 환경을 보장하는 데 중점을 둡니다.

사용자가 로그인 버튼을 클릭하면 Chrome에서 이미 저장된 사용자 인증 정보를 제공하는 흐름을 보여줍니다.

사용자가 로그인 시작: 사용자가 '로그인' 버튼을 클릭합니다. 그런 다음 신뢰 당사자는 mediation: "immediate"로 navigator.credentials.get()을 호출합니다.
사용 가능한 경우 사용자 인증 정보 선택을 위한 브라우저 프롬프트: 브라우저가 로컬에서 사용 가능한 패스키 또는 요청된 비밀번호가 있는지 확인합니다. 계정을 찾으면 사용자가 계정을 선택할 수 있는 모달 UI를 즉시 표시합니다. 계정은 마지막 사용 타임스탬프를 기준으로 순위가 매겨진 후 알파벳순으로 정렬됩니다. 참고: 동일한 계정에 대해 여러 비밀번호 관리자의 비밀번호와 패스키가 모두 발견되면 브라우저에서 패스키를 우선시합니다. 서로 다른 제공업체의 동일한 계정에 여러 개의 패스키가 있는 경우 마지막으로 사용한 패스키가 우선순위가 높습니다.
로그인 성공: 사용자가 브라우저 UI에서 패스키를 선택합니다. 브라우저에서 인증이 필요한 경우 이전에 설정한 방법 (예: PIN, 생체 인식 입력, 패턴)을 사용하여 본인 인증을 하라는 메시지가 사용자에게 표시됩니다. 로그인이 완료됩니다.
대체 경로: 패스키 없음 또는 사용자 닫기: 사이트에 사용할 수 있는 로컬 패스키나 요청된 비밀번호가 없거나 사용자가 브라우저 UI를 닫으면 브라우저가 신뢰 당사자에게 NotAllowedError를 던지고 브라우저에 교차 기기 또는 보안 키 옵션용 UI가 표시되지 않습니다. 그러면 신뢰 당사자는 표준 로그인 페이지를 진행하거나 대체 인증 메커니즘을 제공할 수 있습니다.

사용 사례 2: 사용자 작업 전의 암시적 로그인 흐름

이 시나리오를 사용하면 사용자가 결제와 같이 인증된 상태가 필요한 작업을 실행하기 전에 패스키와 비밀번호를 제공하여 사전 로그인 환경을 지원할 수 있습니다.

사용자가 로그인해야 하는 작업을 실행할 때 Chrome에서 이미 저장된 사용자 인증 정보를 제공하는 흐름을 보여줍니다.

사용자가 로그인해야 하는 작업을 시작함: 사용자가 로그인해야 하는 작업의 버튼 (예: '결제' 버튼)을 클릭합니다. 그러면 신뢰 당사자가 mediation: "immediate"을 사용하여 navigator.credentials.get()을 호출합니다.
사용 가능한 경우 사용자 인증 정보 선택을 위한 브라우저 프롬프트: 브라우저가 로컬에서 사용 가능한 패스키 또는 비밀번호를 확인합니다. 이러한 계정을 찾으면 사용자에게 계정을 선택할 수 있는 모달 UI를 즉시 표시합니다. 계정은 마지막 사용 타임스탬프, 알파벳순으로 순위가 지정되고 계정당 하나의 항목을 표시하기 위해 중복이 삭제됩니다. 참고: 동일한 계정에 여러 비밀번호 관리자의 비밀번호와 패스키가 모두 있는 경우 브라우저에서 패스키를 우선시합니다. 다른 제공업체의 동일한 계정에 여러 패스키가 있는 경우 마지막으로 사용한 패스키가 우선순위가 됩니다.
로그인 성공: 사용자가 브라우저 UI에서 사용자 인증 정보를 선택합니다. 브라우저에 인증이 필요한 경우 이전에 설정한 방법 (예: PIN, 생체 인식 입력, 패턴)을 사용하여 본인 인증을 하라는 메시지가 사용자에게 표시됩니다. 로그인이 완료됩니다.
대체 경로: 사용자 인증 정보 없음 또는 사용자 닫기: 사이트에 사용할 수 있는 로컬 사용자 인증 정보가 없거나 사용자가 브라우저 UI를 닫으면 브라우저가 신뢰 당사자에게 NotAllowedError를 발생시키고 브라우저에 UI가 표시되지 않습니다. 사용자의 로그인 환경은 현재와 동일하게 유지됩니다. 그러면 신뢰 당사자는 사용자에게 세부정보 (예: 이메일 주소)를 요청하거나 비밀번호 양식, SMS 인증, 교차 기기 인증자를 지원하는 WebAuthn 모달 요청과 같은 대체 인증 메커니즘을 표시할 수 있습니다.

이점

WebAuthn 즉시 미디에이션은 개발자와 사용자에게 다음과 같은 몇 가지 주요 이점을 제공합니다.

원활한 로그인: 브라우저나 비밀번호 관리자에 저장된 패스키나 비밀번호를 즉시 사용할 수 있는 사용자에게 더 원활하고 마찰이 적은 로그인 환경을 제공합니다.
지능형 로그인: 사용자가 로그인해야 하는 활동을 수행하려고 할 때 API가 로그인 흐름을 지원합니다. 이러한 버튼은 사용자의 사용자 인증 정보 상태에 따라 지능적으로 조정됩니다. 가능한 경우 즉시 인증을 제공하여 불필요한 리디렉션을 방지하고 흐름을 간소화합니다.
인증 정보 관리 개선: 여러 비밀번호 관리자가 동일한 계정의 인증 정보를 제공하는 경우 브라우저에서 가장 적절한 옵션을 지능적으로 선택하여 사용자의 인증 정보 관리를 간소화합니다.
사용자 혼동 감소: 알려진 사용자 인증 정보를 직접 표시하여 이 기능은 여러 로그인 옵션이나 표준 양식과 관련된 사용자 혼동을 최소화합니다.
원활한 대체: 즉각적인 사용자 인증 정보가 없는 사용자를 위해 표준 로그인 페이지로 원활하게 대체되므로 현재 흐름과 동일한 환경이 유지됩니다.

개인 정보 보호 및 보안

WebAuthn 즉시 중재를 사용하면 사용자가 로그인 시도를 명시적으로 승인하기 전에 사이트에서 즉시 사용 가능한 사용자 인증 정보의 존재를 식별할 수 있습니다. 사용자 개인 정보를 보호하고 잠재적인 오용을 방지하기 위해 Google에서는 다음과 같은 몇 가지 중요한 조치를 시행합니다.

사용자 동작 요구사항: API 호출에는 사용자 동작 (일시적인 사용자 활성화)이 필요합니다. 따라서 사이트에서 무음 프로브 및 지문 채취를 실행하기가 어려워집니다.
시크릿 및 비공개 세션: 시크릿 또는 비공개 세션에서 즉각적인 미디에이션 요청은 NotAllowedError를 발생시킵니다.
allowCredentials 목록에 대한 제한사항: allowCredentials 목록을 사용하는 요청은 NotAllowedError를 발생시킵니다. 이렇게 하면 사이트에서 사용자 상호작용 기록을 추론하거나 세션 간에 사용자를 추적할 수 없습니다.
취소: 즉시 중재가 있는 요청에서 signal 매개변수를 설정하는 것은 유효하지 않습니다. 이렇게 하면 사이트에서 프로그래매틱 방식으로 브라우저 UI를 닫을 수 없습니다.

사용해 보기

WebAuthn 즉시 중재를 실험해 보시기 바랍니다.

Chrome의 상태

이 기능은 Chromium 개발 주기를 거치고 있습니다.

데스크톱: Chrome 136에서 개발자 트라이얼이 진행되며 Chrome 139~141에서 오리진 트라이얼이 진행됩니다.
Android: Chrome 140에서 개발자 트라이얼이 진행됩니다.

로컬 테스트용

WebAuthn 즉시 중재를 로컬에서 테스트하려면 다음 단계를 따르세요.

Chrome 139 다운로드: 데스크톱에서 최신 버전의 Chrome을 다운로드하고 엽니다.
즉시 미디에이션 플래그 사용 설정: 주소 표시줄에서 chrome://flags/#web-authentication-immediate-get로 이동하여 'Web Authentication Immediate Get' 플래그를 사용 설정합니다.
사용자 인증 정보 준비: 사용할 수 있는 패스키와 비밀번호가 저장되어 있는지 확인합니다.
- Google 비밀번호 관리자에 저장된 비밀번호
- Google 비밀번호 관리자 (Google 계정으로 로그인하고 Chrome을 동기화해야 함), Windows Hello 또는 iCloud 키체인에 저장된 패스키

공개 테스트 (오리진 트라이얼)

공개 환경에서 오리진 트라이얼을 사용하여 WebAuthn 즉시 미디에이션을 테스트하려면 다음 단계를 따르세요.

가입: Chrome Origin Trials 페이지를 방문하여 'WebAuthn 즉시 중재' 트라이얼에 가입합니다.
HTTP 헤더에 토큰 추가: 사이트의 HTTP 헤더에 제공된 트라이얼 토큰을 포함합니다. HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

참고: JavaScript를 사용하여 프로그래매틱 방식으로 토큰을 제공할 수도 있습니다.

테스트 시나리오

참조 구현이 제공되므로 다양한 시나리오를 테스트하기 위해 자체 프로토타입을 빌드하는 것이 좋습니다.

참조 데모: https://deephand.github.io/webauthn-immediate-demo/에서 참조 구현을 사용해 볼 수 있습니다.
- 프로토타입 구현: 사이트에서 프로토타입을 구현할 때 사용자가 클릭한 후 (예: '로그인' 버튼 또는 사용자가 로그인해야 하는 상호작용) mediation: 'immediate'를 사용하여 navigator.credentials.get() 호출을 실행해야 합니다.
흐름 1: 비밀번호 또는 패스키 없이 로그인: 사이트에서 사용할 수 있는 패스키나 비밀번호가 없는 경우 '로그인'을 클릭하면 브라우저 UI가 표시되지 않고 표준 로그인 페이지로 바로 이동합니다.
흐름 2: 즉시 사용 가능한 로컬 패스키로 로그인: 사이트에 저장된 패스키가 있는 경우 '로그인'을 클릭하면 즉시 중재 UI가 트리거되어 선택할 수 있는 패스키가 제공됩니다.
흐름 3: 로컬 패스키 또는 비밀번호로 로그인: 패스키와 비밀번호가 모두 저장되어 있는 경우 코드에서 password: true를 설정하여 '비밀번호 요청' 옵션을 사용 설정합니다. '로그인'을 클릭하면 즉시 중재 UI에 패스키와 비밀번호 옵션이 모두 표시됩니다.

오리진 트라이얼: 원활한 로그인을 위한 WebAuthn 즉시 미디에이션 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

배경