Passkeys: 더 간단하고 안전한 로그인 - I/O Extended 2023 Incheon

8월 26일 인천 스타트업파크에서 열린 Google I/O Extended 2023 Incheon에서 Passkeys를 주제로 발표했던 자료를 공유드립니다.

Transcript

1. WEB Passkeys: 더 간단하고 안전한 로그인
2. - Opensurvey Frontend Engineer - GDG Korea WebTech Organizer - GDSC KNU Founder & 1st, 2nd Lead - TypeScript, React 좋아해요! 강종연 연사자 소개 Phone | 010-5131-0408 GitHub | Climier-code Instagram | @alt_._f4___yeon email | jongyeon.dev@gmail.com LinkedIn | Jongyeon Kang
3. 기존 비밀번호와 다단계 인증을 대체하는 새로운 인증 방법 Passkeys 패스키에 대해
4. 사용자는 로그인할 계정을 선택할 수 있습니다. 사용자 이름은 입력하지 않아도 됩니다. 사용자는 지문 센서, 얼굴 인식 또는 PIN과 같은 기기의 화면 잠금을 사용하여 인증할 수 있습니다. 계정 선택 생체 인증 패스키를 생성하고 등록한 후에는 각 기기에서 설정이 필요한 기존의 생체 인식 인증과 달리 사용자가 새 기기로 원활하게 전환하고 재등록하지 않고도 즉시 사용할 수 있습니다. 원활한 기기 전환 패스키는 더 간단합니다. 패스키에 대해
5. 개발자는 비밀번호 대신 공개 키만 서버에 저장합니다. 즉, 악의적인 행위자가 서버를 해킹할 가치가 훨씬 적으며, 해킹을 당했을 때는 정리하는 것이 훨씬 덜 걸립니다. 패스키는 사용자를 피싱 공격으로부터 보호합니다. 패스키는 등록된 웹사이트와 앱에서만 작동합니다. 브라우저나 OS에서 인증을 처리하므로 사용자를 속여서 사기성 사이트를 인증하도록 속일 수 없습니다. 공개 키 암호화 피싱 방지 패스키는 더 안전합니다. 패스키에 대해
6. 지원 환경 패스키에 대해
7. 패스키에 대해 패스키를 활용하고 있는 서비스들
8. 패스키 만들기 Passkey Public Key Client Server 패스키에 대해
9. 패스키로 로그인 하기 Passkey Signature Client Server Public Key 패스키에 대해
10. 패스키를 웹 서비스에 적용해보기 패스키 with 웹 Web Authentication API
11. 108 16 108 2023년 이내 웹 브라우저의 지원 버전 (with WebAuthn) 패스키 with 웹
12. // 패스키 생성 const credential = await navigator.credentials.create({ publicKey: { challenge: ******, rp: { id: “google.com” }, user: { id: ******, name: “Jongyeon” }, excludeCredentials: [], authenticatorSelection: { authenticatorAttachment: “platform”, requireResidentKey: true, }, … } });
13. // 패스키 생성 const credential = await navigator.credentials.create({ publicKey: { challenge: ******, rp: { id: “google.com” }, user: { id: ******, name: “Jongyeon” }, excludeCredentials: [], authenticatorSelection: { authenticatorAttachment: “platform”, requireResidentKey: true, }, … } });
14. // 패스키 생성 const credential = await navigator.credentials.create({ publicKey: { challenge: ******, rp: { id: “google.com” }, user: { id: ******, name: “Jongyeon” }, excludeCredentials: [], authenticatorSelection: { authenticatorAttachment: “platform”, requireResidentKey: true, }, … } });
15. // 패스키 생성 const credential = await navigator.credentials.create({ publicKey: { challenge: ******, rp: { id: “google.com” }, user: { id: ******, name: “Jongyeon” }, excludeCredentials: [], authenticatorSelection: { authenticatorAttachment: “platform”, requireResidentKey: true, }, … } });
16. // 패스키로 로그인 const credential = await navigator.credentials.get({ publicKey: { challenge: ******, rp: “google.com”, }, mediation: “conditional”, });
17. // 패스키로 로그인 const credential = await navigator.credentials.get({ publicKey: { challenge: ******, rp: “google.com”, }, mediation: “conditional”, });
18. // 패스키로 로그인 const credential = await navigator.credentials.get({ publicKey: { challenge: ******, rp: “google.com”, }, mediation: “conditional”, });
19. // 패스키 자동입력을 할 수 있도록 만들어주기 <input type=“text” name=“username” autocomplete=“username webauthn” …>
20. 웹 앱에서 양식 자동 완성으로 패스키 직접 구현 해보기 Codelab 패스키 with 웹
21. 패스키 만들기 Backend 패스키 with 웹 Frontend Browser Authenticator navigator.credential.create() Public Key Credential Public key, etc Credential IDs, etc passkey public key
22. Backend 패스키 with 웹 Frontend Browser Authenticator navigator.credential.get() Public Key Credential Signature, etc challenge passkey public key 패스키로 로그인 하기
23. 왜 기존 패스워드 방식 보다 패스키가 더 간단하고 안전한지 우리의 Web App에서 패스키를 어떻게 적용할 수 있는지 Codelab을 통한 패스키 생성 & 인증 구현 01 02 03 Summary
24. 예를 들어 Android에 등록된 패스키는 Android 휴대전화를 다른 기기와 연결하여 다른 플랫폼에서 로그인하는 데 사용할 수 있습니다. 사용자가 두 기기 간에 연결을 설정하려면 사용자가 패스키가 등록되지 않은 기기에서 로그인하려는 사이트를 열고 QR 코드를 스캔한 다음 패스키를 생성한 기기 (이 경우 Android 기기)에서 로그인을 확인해야 합니다. 패스키는 Android 기기를 벗어나지 않으므로 일반적으로 앱은 다음번에 로그인을 위해 다른 기기에 새 패스키를 생성하도록 제안합니다. 이 흐름은 다른 플랫폼에서도 비슷한 방식으로 작동합니다. 한 플랫폼 (예: Android)에 등록된 패스키를 사용하여 다른 플랫폼 (예: 웹 또는 iOS)에서 로그인할 수 있나요? FAQ 아니요. 이는 패스키를 저장하는 제공업체와 RP (신뢰 당사자)에 따라 다르지만 패스키 만료에 관한 일반적인 관행은 없습니다. 패스키가 만료될 수 있나요? 예. 사용자 생체 인식 데이터는 기기 외부로 유출되지 않으며 유출로 인해 도난당할 수 있는 중앙 서버에 저장되지 않습니다. 사용자의 생체 인식 정보는 안전한가요? 개발자는 당분간 앱의 기존 로그인 옵션을 유지하여 패스키를 지원하지 않는 기기 및 표시 경로에서 계속 사용할 수 있도록 하는 것이 좋습니다. 개발자는 패스키를 지원하지 않는 기기 및 플랫폼에 대해 어떻게 해야 하나요?
25. Thank You Jongyeon Kang he/him GDG Korea WebTech Organizer