올해 Google I/O에서는 Chrome이 브라우저 API의 기능을 통해 웹에서 사용자 인증 및 신원 확인을 재구성하는 방법을 공유했습니다. 비밀번호, 패스키 또는 제휴를 사용하든 Chrome에서는 더 간편하고 안전하며 사용자 친화적인 통합 로그인 및 가입 환경을 제공합니다.
웹사이트에서 가입 및 로그인을 개선하기 위한 최신 도구와 권장사항을 알아보세요.
세션 페이지를 확인하거나 계속 읽어 주요 내용을 자세히 알아보세요.
로그인 도우미인 브라우저
웹 인증이 진화하고 있습니다. 사용자 기대치가 높아지고 새로운 규제가 도입되고 디지털 ID 도구 생태계가 확장됨에 따라 개발자는 안전하고 원활하며 개인 정보를 보호하는 로그인 및 가입 흐름을 제공해야 합니다. Chrome이 도와드리겠습니다.
세 가지 주요 초점 영역이 있습니다.
- 사용자 인증: 제휴 인증 관리 (FedCM)를 통한 더 나은 비밀번호 관리, 더 쉬운 패스키 채택, ID 제휴에 대한 기본 제공 지원으로 강력한 로그인 흐름을 지원할 수 있습니다.
- 신원 확인: 모바일 지갑의 디지털 사용자 인증 정보를 사용하여 연령 또는 신분증 소유권과 같은 확인된 사용자 세부정보를 요청할 수 있습니다.
- 세션 관리: 기기 전용 세션 사용자 인증 정보로 세션을 기기에 바인딩하여 로그인 후 사용자를 보호하는 데 도움이 됩니다.
이 모든 것을 가능하게 하는 도구와 API를 살펴보세요.
웹용 사용자 인증 정보 관리자: 모든 사용자 인증 정보에 하나의 로그인 UI
로그인은 편리해야 합니다. 하지만 비밀번호, 패스키, 제휴 옵션이 모두 사용되면서 사용자는 혼란스러운 선택에 직면하는 경우가 많습니다.
Chrome에서는 Credential Manager API를 확장하여 유형과 관계없이 하나의 일관된 인터페이스를 사용하여 브라우저에서 사용자 인증 정보를 요청할 수 있도록 합니다. 비밀번호 관리자에서 사용자 인증 정보를 사용할 수 있는 경우 Chrome은 사용자 인증 정보를 단일 대화상자로 사용자에게 표시하여 사용자의 복잡성을 줄입니다.
Chrome에서 사용자 인증 정보를 찾지 못하면 알려주며 자체 로그인 흐름으로 대체할 수 있습니다.
이 새로운 환경은 불편을 줄이고 로그인을 더욱 원활하게 만듭니다.
이 기능은 개발자 체험판 버전입니다. password 사용자 인증 정보와 publicKey 사용자 인증 정보를 모두 포함하는 chrome://flags#enable-experimental-web-platform-features 플래그를 사용 설정하고 mediation: "immediate"를 사용하여 즉시 미디에이션을 사용 설정하여 로컬에서 시작할 수 있습니다.
다음 코드 스니펫은 표시되는 방식을 보여줍니다.
const cred = await navigator.credentials.get({
password: true,
publicKey: {
challenge,
rpId: 'example.com'
},
mediation: 'immediate',
});
Chrome에서 즉시 미디에이션 테스트에 관한 문서에서 자세히 알아보세요.
비밀번호: 더 스마트하고 안전하게
비밀번호는 여전히 전 세계에서 가장 일반적인 인증 방법입니다. 브라우저와 비밀번호 관리자는 비밀번호로 로그인 환경을 개선하는 도구를 제공하지만 사이트에서 항상 이를 채택하는 것은 아닙니다.
Chrome은 Google 비밀번호 관리자를 통해 로그인 양식의 비밀번호 생성이나 비밀번호 유출 검사와 같은 기능을 통해 사용자에게 사용자 인증 정보 유출을 경고하는 등 더 안전한 관행을 지원합니다.
다음은 사이트에서 비밀번호를 사용하는 환경을 개선하는 데 도움이 되는 몇 가지 도구입니다.
비밀번호 자동 변경: 클릭 한 번으로 유출된 비밀번호를 수정할 수 있습니다.
올해 말 일부 웹사이트에 출시될 자동 비밀번호 변경을 사용하면 사용자 인증 정보가 도용될 위험이 있을 때 사용자가 더 쉽게 대응할 수 있습니다.
Chrome에서 로그인 중에 비밀번호 유출을 감지하면 Google 비밀번호 관리자가 사용자에게 자동으로 문제를 해결할 수 있는 옵션을 표시합니다.
지원되는 웹사이트에서 Chrome은 강력한 대체 비밀번호를 생성하고 사용자의 비밀번호를 자동으로 업데이트할 수 있습니다.
이렇게 하면 불편을 줄이고 사용자가 계정 설정을 찾아보거나 절차를 중단하지 않고도 계정 보안을 유지할 수 있습니다.
브라우저 및 비밀번호 관리자와 함께 작동하도록 웹사이트를 최적화할 수 있는 방법이 있습니다.
- 자동 완성 최적화:
autocomplete="current-password"및autocomplete="new-password"를 사용하여 자동 완성 및 저장을 트리거합니다. 로그인 및 가입 가이드를 참고하세요. - 비밀번호 변경 URL:
<your-website-domain>/.well-known/change-password에서 웹사이트의 비밀번호 변경 양식(잘 알려진 비밀번호 변경 URL)으로 리디렉션합니다. 취약한 비밀번호가 감지되면 비밀번호 관리자가 사용자를 비밀번호 변경 페이지로 안내할 수 있습니다.
원활한 사용자 인증 정보 공유: 앱과 웹에서 하나의 로그인
비밀번호 관리자는 비밀번호를 저장하는 것 외에도 다양한 기능을 제공합니다. 도메인이 일치하는 경우에만 사용자 인증 정보를 제공하여 피싱을 방지하는 데 도움이 됩니다. 하지만 서비스가 여러 도메인과 플랫폼에 걸쳐 있는 경우에도 사용자에게 문제가 발생할 수 있습니다.
예를 들면 다음과 같습니다.
- 사용자가 Android 앱에서 가입한 후 나중에 노트북에서 웹사이트를 방문합니다.
- 또는 동일한 로그인을 허용하는 여러 도메인 또는 앱을 제공하는 경우
공유 사용자 인증 정보가 없으면 저장된 비밀번호가 제공되지 않으므로 사용자가 로그인하는 데 어려움을 겪을 수 있습니다.
원활한 사용자 인증 정보 공유를 사용하면 이 문제를 해결할 수 있습니다. 앱과 사이트를 연결하면 Google 비밀번호 관리자가 이러한 애셋 간에 비밀번호를 원활하게 공유하여 보다 원활하고 간소화된 로그인 환경을 제공할 수 있습니다.
eBay는 성공적인 로그인율을 10% 높였습니다. eBay가 원활한 사용자 인증 정보 공유로 로그인 성공률을 10% 개선한 방법에 관한 사례를 자세히 알아보세요.
패스키: 더 간편하고 안전한 로그인 방법
패스키는 사용자가 생체 인식 (예: 지문 또는 얼굴), PIN 또는 패턴과 같은 기기 잠금 해제 메커니즘으로 웹사이트 및 앱에 안전하게 로그인할 수 있도록 지원하는 비밀번호보다 강력한 대안입니다. 피싱 방지 기능이 있고 사용자 친화적이며 브라우저와 운영체제 전반에서 널리 채택된 표준입니다.
여러 플랫폼에서 패스키 동기화
사용자가 비밀번호 관리자에 패스키를 저장하지만 일부 관리자는 패스키를 동기화하지 않습니다. 따라서 패스키를 사용할 수 없는 기기에서 사용자가 로그인을 시도할 때 문제가 발생할 수 있습니다. 이 경우 Chrome에는 사용자가 사용자 인증 정보가 있는 다른 기기에서 로그인을 완료할 수 있도록 QR 코드가 표시됩니다.
이러한 불편을 줄이기 위해 Chrome은 Google 비밀번호 관리자에 패스키 동기화 지원을 추가했습니다.
이제 iOS까지 지원이 확장되어 Google 비밀번호 관리자의 패스키를 Android, Windows, macOS, ChromeOS, Linux를 비롯한 모든 주요 플랫폼에서 동기화할 수 있습니다. 지원되는 환경 도움말에서 자세히 알아보세요.
즉시 미디에이션: 사용 가능한 사용자 인증 정보만 요청
일부 사용자는 모든 기기에 패스키를 동기화하지 않았습니다. 로컬에서 패스키를 찾을 수 없는 경우 Chrome에 QR 코드가 표시되어 사용자가 사용자 인증 정보를 보유한 다른 기기를 사용할 수 있습니다. 이 방법은 효과가 있지만 불편을 줄 수 있습니다.
이러한 불편을 줄이기 위해 Chrome에서는 새로운 옵션인 mediation: 'immediate'를 지원합니다.
이렇게 하면 사이트에서 현재 기기에서 이미 사용 가능한 사용자 인증 정보만 요청할 수 있습니다. 찾을 수 없는 경우 사용자에게 아무것도 표시되지 않습니다. 프롬프트, QR 코드, 중단이 없습니다. Chrome에서 알려주므로 평소 로그인 UI를 대신 표시할 수 있습니다.
이렇게 하면 사용자 인증 정보가 없는 사용자의 QR 코드 흐름을 방지하여 환경이 개선됩니다.
사용자가 로그인 또는 결제 버튼을 클릭하는 등 의미 있는 작업을 실행할 때 이 접근 방식을 사용하세요. mediation: 'immediate'와 함께 navigator.credentials.get()를 사용하면 현재 기기에서 패스키를 사용할 수 있는 경우 Chrome에서 사용자에게 즉시 메시지를 표시합니다. 그렇지 않은 경우 사용자는 중단 없이 계속 진행할 수 있으며 비밀번호 필드, 일회용 코드 또는 다른 방법을 표시할 수 있습니다.
password: true를 설정하여 사용자가 로그인할 가능성을 높일 수도 있습니다. 이렇게 하면 Chrome에서 저장된 비밀번호와 패스키(있는 경우)를 함께 반환할 수 있습니다.
다음 예는 즉시 미디에이션으로 패스키를 요청하는 방법을 보여줍니다.
navigator.credentials.get({
publicKey: {
challenge: new Uint8Array([/* your challenge here */]),
rpId: 'example.com'
},
mediation: 'immediate',
//< password: true == enable this to request passwords alongside passkeys
}).t>hen(credential = {
// Use the credential for sign in
>}).catch(error = {
if (error.name === 'NotAllowedError') {
// No credential found on this device, fall back to another method
} else {
console.error('Error during sign-in', error);
}
});
이 기능은 개발자 트레일에서 사용할 수 있으며 WebAuthn 즉시 미디에이션 설명에서 자세히 알아볼 수 있습니다.
자동 패스키 생성
여전히 많은 사용자가 비밀번호로 로그인합니다. 패스키를 채택하는 데 도움이 되도록 Chrome에서는 비밀번호 로그인이 완료된 후 사용자의 패스키를 자동으로 만드는 데 도움이 되는 API를 도입합니다.
패스키 생성을 요청하기만 하면 됩니다. 사용자가 최근에 사용한 저장된 비밀번호가 있는 경우 비밀번호 관리자가 패스키를 만들고 패스키 생성에 성공했는지 알려줍니다. 패스키를 사용할 수 있게 되면 사용자에게 알림이 전송될 수 있습니다. 이렇게 해도 사용자의 비밀번호는 삭제되지 않습니다.
패스키가 생성되지 않으면 브라우저가 사용자를 방해하거나 UI를 표시하지 않습니다.
이렇게 하면 사용자가 로그인 흐름을 중단하지 않고도 패스키를 점진적으로 도입할 수 있습니다.
이 기능은 Chrome 136부터 사용할 수 있으며 사용자가 패스키를 더 원활하게 채택하도록 지원하기 도움말에서 자세히 알아볼 수 있습니다.
Signal API로 패스키 정리
사용자가 사이트 또는 앱에서 패스키를 삭제해도 비밀번호 관리자가 로그인 중에 패스키를 계속 제공하여 실패와 혼란을 야기할 수 있습니다. Signal API를 사용하면 앱에서 패스키가 삭제될 때 비밀번호 관리자에게 알림을 보내 사용자 인증 정보 목록을 깔끔하고 정확하게 유지할 수 있습니다.
알려진 패스키 목록을 비밀번호 관리자에게 전송하여 패스키를 최신 상태로 유지하는 데 도움을 줄 수도 있습니다. 이렇게 하면 사용자의 사용하지 않는 패스키를 정리할 수 있습니다.
Signal API는 Chrome 132부터 사용할 수 있습니다. Signal API를 사용하여 패스키를 서버의 사용자 인증 정보와 일치시키기에서 자세히 알아보세요.
가져오기 및 내보내기: 사용자 인증 정보 가져오기
비밀번호 관리자 간에 전환하는 사용자는 사용자 인증 정보를 전송하는 데 어려움을 겪는 경우가 많습니다. Chrome에서 FIDO 표준을 기반으로 패스키 및 비밀번호의 가져오기 및 내보내기 지원을 추가합니다. 사용자는 파일을 처리할 필요가 없습니다.
자동 완성 개선사항
저장된 사용자 인증 정보를 사용자 친화적인 방식으로 표시하기 위해 Chrome은 로그인 양식이 준비되면 자동 완성 드롭다운을 자동으로 표시할 수 있습니다. 양식에서 비밀번호와 패스키를 모두 지원하고 입력란에 자동 포커스를 적용하기만 하면 됩니다.
이는 사용자가 필드를 클릭하지 않아도 사용자 인증 정보가 표시되므로 유용합니다. 대신 사용자는 사용하려는 사용자 인증 정보를 탭하기만 하면 되므로 불편함이 줄어듭니다.
양식 자동 완성을 통해 패스키로 로그인 도움말에서 자세히 알아보세요.
업데이트된 학습 리소스
개발자가 사용자에게 최상의 패스키 환경을 제공할 수 있도록 패스키 학습 리소스를 전면 개편했습니다.
FedCM: 제휴 ID 개선
Federated Credential Management API (FedCM)를 사용하면 개인 정보 보호 및 사용자 환경을 최우선으로 하는 브라우저 매개 흐름을 사용하여 사용자가 신뢰할 수 있는 ID 공급업체에 로그인할 수 있습니다. FedCM을 사용하면 웹에서 가입 및 로그인 환경을 간소화할 수 있으므로 개발자는 더 적은 노력으로 원활한 인증을 지원할 수 있습니다.
스마트한 UI
이제 FedCM을 통해 로그인 메시지가 표시되는 방식과 시기를 더 세부적으로 관리할 수 있습니다. 두 가지 모드를 지원합니다.
- 패시브 모드: 사용자가 사이트로 돌아오면 브라우저에 알려진 ID 제공업체의 로그인 메시지가 자동으로 표시됩니다. 익숙한 사용자에게는 효과적이지만 너무 일찍 표시되면 방해가 될 수 있습니다.
- 활성 모드: 사용자가 로그인 버튼을 클릭한 후에만 메시지가 표시되므로 더 신중한 환경을 만들 수 있습니다.
이는 혼란을 줄이고 사용자를 놀라게 하지 않기 때문에 중요합니다. 활성 모드를 사용하면 사용자가 사이트에 머물면서 리디렉션이나 다른 대화상자가 표시되지 않도록 할 수 있습니다.
Chrome은 수동 모드를 더 스마트하게 만드는 작업도 진행하고 있습니다. 향후 업데이트에서는 사이트 및 사용자 신호를 통합하는 머신러닝 기법을 실험하여 최적의 사용자 환경을 제공하기 위해 UI를 표시할 시점과 방법을 결정할 것입니다.
더 유연한 API
FedCM을 사용하면 사용자가 제휴 ID로 로그인하는 방식을 더욱 유연하게 제어할 수 있습니다.
예를 들어 다중 ID 공급자 지원을 사용하면 사용자에게 하나가 아닌 여러 공급자 목록을 표시할 수 있습니다. 즉, 사용자는 자신에게 적합한 계정을 선택하고 강력한 사용자 개인 정보 보호를 유지하면서 로그인율을 개선할 수 있습니다.
브라우저는 여전히 모든 단계를 중재합니다. ID 제공업체는 사용자가 명시적으로 허용하는 항목만 볼 수 있으며 흐름이 진행되는 동안 개인 정보 보호가 유지됩니다.
디지털 사용자 인증 정보: 빠르고 비공개인 온라인 신분증 확인
디지털 인증서는 전 세계적으로 점점 더 보편화되고 있습니다. 이를 통해 사용자는 디지털 지갑을 통해 연령, 학생 신분, 신원과 같은 속성을 확인할 수 있습니다. Digital Credentials API를 사용하면 사용자가 모바일 지갑에서 연령 또는 라이선스 상태와 같은 확인된 정보를 웹사이트와 직접 공유할 수 있습니다.
Google은 W3C 및 업계 리더와 협력하여 이를 표준으로 만들고 있습니다. Google의 목표는 플랫폼 전반에서 사용자 친화적이고 안전하며 비공개이고 일관된 환경을 제공하는 것입니다.
몇 가지 흥미로운 기능은 다음과 같습니다.
- 교차 기기 지원 사용자는 모든 기기에서 안전하게 사용자 인증 정보를 제공할 수 있습니다.
- 선별적 공개 사용자는 불필요한 정보를 공개하지 않고도 '18세 이상'과 같은 세부정보를 확인할 수 있습니다.
- 확인 가능한 정보 발급자는 데이터에 디지털 서명을 하여 간편하게 확인할 수 있도록 합니다.
- 발행 Google은 사용자가 이러한 사용자 인증 정보를 지갑 앱에 프로비저닝할 수 있도록 Digital Credentials API를 확장하기 위해 노력하고 있습니다.
기기 결합 세션 사용자 인증 정보: 로그인 상태 유지 및 보호
사용자 세션은 쿠키로 식별되는 경우가 많으며 멀웨어는 사용자의 기기에서 쿠키를 훔칠 수 있습니다.
기기 결합 세션 사용자 인증 정보는 세션을 특정 기기에 연결합니다. 이렇게 하면 세션 도용 위험이 줄어들고 이메일 또는 소셜 미디어 계정에 로그인하거나 정부 서비스에 액세스할 때 보호가 강화됩니다.
DBSC를 사용하면 개발자가 로그인 중에 사용된 기기에 인증을 연결하여 더 안전하고 안정적인 세션을 만들 수 있습니다.
의견
공유해 드린 내용에 대한 의견을 보내주세요. 기능을 사용해 보고 이 문서의 링크를 살펴본 후 의견을 알려주세요.