<div id="readability-page-1" class="page"><div itemprop="articleBody">신규 프로젝트에 뜬금없이 도입되어있는 패스키 로그인에 대해서 알아보자. 패스키는 비밀번호 대신에 사용자가 보유하는 디바이스에 등록되어있는 지문 그리고 얼굴 인식 또는 보안키 등을 이용하여 로그인하려는 사이트에 대해 인증을 수행하는 방식이다. 패스키는 구글 뿐만 아니라 애플 그리고 개발자가 이용하는 <a target="_blank" rel="noopener" href="https://aws.amazon.com/ko/about-aws/whats-new/2024/06/aws-identity-access-management-passkey-authentication-factor/?nc1=h_ls">아마존 웹 서비스</a>와 <a target="_blank" rel="noopener" href="https://docs.github.com/ko/authentication/authenticating-with-a-passkey/signing-in-with-a-passkey">깃허브</a>까지 <a target="_blank" rel="noopener" href="https://www.passkeys.io/who-supports-passkeys">다양한 서비스</a>에서 MFA 또는 로그인으로 지원하고 있다.<ul><li><a target="_blank" rel="noopener" href="https://www.digitaltoday.co.kr/news/articleView.html?idxno=486373">애플 따라 엑스·링크드인도 ‘패스키’ 도입</a></li><li><a target="_blank" rel="noopener" href="https://www.digitaltoday.co.kr/news/articleView.html?idxno=515236">왓츠앱, iOS용 패스키 지원한다…”더 쉽고 안전할 것”</a></li></ul><h4 id="패스키-로그인이-필요한-이유"><a href="#패스키-로그인이-필요한-이유" title="패스키 로그인이 필요한 이유"></a>패스키 로그인이 필요한 이유</h4>많은 시스템에서 <a target="_blank" rel="noopener" href="https://www.kisa.or.kr/2060305/form?postSeq=14&amp;lang_type=KO">패스워드 선택 및 이용 안내서</a>에 따라 사용자에게 안전한 비밀번호를 설정하도록 요구하고 있다. 비밀번호 규칙은 NIST의 기준이 완화되었음에도 <a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=eJ70IEw4pMU">대소문자와 특수문자 조합을 아직도 적용</a>하고 있어 사용자는 쉽게 비밀번호를 잊어버리고 필요할때마다 비밀번호를 다시 설정하여 계정을 복구하는 과정을 거치고 있는 편이다.그동안 비밀번호가 쉽게 노출되어 2차 인증까지 수행해야했지만 사용자의 보안 장치로 2차 인증없이 한번에 인증을 수행할 수 있으므로 사용자에게 <a target="_blank" rel="noopener" href="https://www.youtube.com/watch?v=moeXZ0rjezQ">로그인에 걸리는 시간을 줄여주는 효과</a>도 보여준다고 한다.<blockquote>패스키를 이용할 수 있는 <a target="_blank" rel="noopener" href="https://www.passkeys.io/compatible-devices">디바이스 목록</a>을 확인해보세요. 삼성 갤럭시에서도 <a target="_blank" rel="noopener" href="https://www.yna.co.kr/view/AKR20231219015400017">One UI 6</a> 부터 삼성 패스를 통해 패스키를 지원합니다.</blockquote><h4 id="패스키-관련-라이브러리"><a href="#패스키-관련-라이브러리" title="패스키 관련 라이브러리"></a>패스키 관련 라이브러리</h4>자바 기반의 <a target="_blank" rel="noopener" href="https://webauthn.io/">WebAuthn</a> 서버 측 구현은 Yubico의 <a target="_blank" rel="noopener" href="https://developers.yubico.com/java-webauthn-server/">java-webauthn-server</a>를 사용하고 클라이언트 측 구현은 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API#webauthn_concepts_and_usage">Web Authentication API</a>에 해당하는 <a target="_blank" rel="noopener" href="https://simplewebauthn.dev/">SimpleWebAuthn</a> 라이브러리를 활용할 수 있다. 아래와 같이 build.gradle과 package.json 에 각각 추가해보자.<pre data-language="bash"><code>implementation 'com.yubico:webauthn-server-core:2.5.2'

pnpm add @simplewebauthn/browser</code></pre><h4 id="패스키-로그인-구현하기"><a href="#패스키-로그인-구현하기" title="패스키 로그인 구현하기"></a>패스키 로그인 구현하기</h4>패스키 로그인 구현을 위해 이해해야할 정보들에 대해서 알아보도록 하자. 대략적으로 RP, Challenge, Authenticator, AAGUID 등이 있다.<h5 id="Relying-Party"><a href="#Relying-Party" title="Relying Party"></a>Relying Party</h5>RP(Relying Party)는 패스키를 통해 사용자의 신원을 확인하고 인증 절차를 수행하는 서비스 제공자를 의미하며 클라이언트에서는 패스키를 생성하기 전에 RP와 챌린지(Challenge)를 포함하여 여러가지 옵션을 서버로 부터 제공받아야 한다. 이때, 서버 응답은 <a target="_blank" rel="noopener" href="https://w3c.github.io/webauthn/#dictdef-publickeycredentialcreationoptions">PublicKeyCredentialCreationOptions</a>로 구성된다. 각 필드 옵션에 대한 자세한 설명은 <a target="_blank" rel="noopener" href="https://webauthn.guide/">webauthn.guide</a>에 나와있으니 참고하길 바란다.<pre data-language="java"><code>RelyingPartyIdentity rpIdentity = RelyingPartyIdentity.builder()
 .id("kdev.ing")
 .name("Passkey Application")
 .build();

RelyingParty rp = RelyingParty.builder()
 .identity(rpIdentity)
 .credentialRepository(new MyCredentialRepository())
 .build();</code></pre><pre data-language="json"><code>{
 challenge: *****,
 rp: {
 id: "kdev.ing",
 },
 user: {
 id: *****,
 name: "mambo",
 displayName: "Mambo",
 },
 pubKeyCredParams: [{
 alg: -7, type: "public-key"
 },{
 alg: -257, type: "public-key"
 }],
 excludeCredentials: [{
 id: *****,
 type: 'public-key',
 transports: ['internal', 'hybrid'],
 }],
 authenticatorSelection: {
 authenticatorAttachment: "platform",
 requireResidentKey: true,
 }
}</code></pre><ul><li>rp.id: 웹 사이트 출처에 대한 도메인</li><li>pubKeyCredParams: RP 에서 지원하는 공개키 알고리즘 종류</li><li>excludeCredentials: 동일한 기기 중복 등록 방지를 위한 이미 등록된 패스키 목록</li></ul><h5 id="Authenticator"><a href="#Authenticator" title="Authenticator"></a>Authenticator</h5>등록된 패스키의 Authenticator는 인증 장치를 의미하며 AttestedCredentialData에 포함된 인증 장치를 제공하는 업체에 대한 식별자를 <code>AAGUID</code> 라고 한다. <a target="_blank" rel="noopener" href="https://github.com/passkeydeveloper/passkey-authenticator-aaguids/blob/main/aaguid.json">aaguid.json</a> 으로 AAGUID에 대한 <a target="_blank" rel="noopener" href="https://web.dev/articles/webauthn-aaguid?hl=ko">인증 장치 제공업체 이름을 확인</a>할 수 있다. 사용자의 인증으로 생체 인증 정보가 포함된 <a target="_blank" rel="noopener" href="https://developer.mozilla.org/en-US/docs/Web/API/PublicKeyCredential">공개키 크레덴셜(PublicKeyCredential)</a>을 서버에 저장하도록 요청해야한다.<h5 id="브라우저-패스키-지원-여부"><a href="#브라우저-패스키-지원-여부" title="브라우저 패스키 지원 여부"></a>브라우저 패스키 지원 여부</h5>@simplewebauthn/browser에 포함된 <a target="_blank" rel="noopener" href="https://simplewebauthn.dev/docs/packages/browser#browsersupportswebauthn">browserSupportsWebAuthn</a> 함수를 통해 현재 사용자의 브라우저가 패스키를 지원하는지 여부를 쉽게 확인할 수 있다.<pre data-language="javascript"><code>import {startRegistration, startAuthentication, browserSupportsWebAuthn} from '@simplewebauthn/browser';

const isSupportedPasskey = () =&gt; {
 if (typeof PublicKeyCredential === 'undefined') {
 return false;
 }

 return browserSupportsWebAuthn()
}

export default {
 isSupportedPasskey
}</code></pre>일단 패스키 로그인 도입이 완료되었다면 <a target="_blank" rel="noopener" href="https://fidoalliance.org/ux-guidelines-for-passkey-creation-and-sign-ins/?lang=ko">패스키 생성 및 로그인을 위한 FIDO 얼라이언스 UX 가이드라인</a>에 따라 조금 더 사용자 친화적인 패스키 로그인을 도입해보도록 하자. 예를 들어, 깃허브에서 제공하는 패스키 관리의 경우 등록된 패스키에 대해 사용자가 기억할 수 있게 이름을 설정할 수 있도록 안내하고 있다.<ul><li><a target="_blank" rel="noopener" href="https://developers.google.com/identity/passkeys/ux/user-interface-design?hl=ko">패스키 사용자 인터페이스 디자인</a></li><li><a target="_blank" rel="noopener" href="https://developers.google.com/identity/passkeys/ux/communicating-passkeys?hl=ko">사용자에게 패스키 전달</a></li></ul></div></div>

Mambo

신규 프로젝트에 뜬금없이 도입되어있는 패스키 로그인에 대해서 알아보자. 패스키는 비밀번호 대신에 사용자가 보유하는 디바이스에 등록되어있는 지문 그리고 얼굴 인식 또는 보안키 등을 이용하여 로그인하려는 사이트에 대해 인증을 수행하는 방식이다. 패스키는 구글 뿐만 아니라 애플 그리고 개발자가 이용하는 아마존 웹 서비스와 깃허브까지 다양한 서비스에서 MFA 또는 로그인으로 지원하고 있다.
애플 따라 엑스·링크드인도 ‘패스키’ 도입
왓츠앱, iOS용 패스키 지원한다…”더 쉽고 안전할 것”
패스키 로그인이 필요한 이유
많은 시스템에서 패스워드 선택 및 이용 안내서에 따라 사용자에게 안전한 비밀번호를 설정하도록 요구하고 있다. 비밀번호 규칙은 NIST의 기준이 완화되었음에도 대소문자와 특수문자 조합을 아직도 적용하고 있어 사용자는 쉽게 비밀번호를 잊어버리고 필요할때마다 비밀번호를 다시 설정하여 계정을 복구하는 과정을 거치고 있는 편이다.그동안 비밀번호가 쉽게 노출되어 2차 인증까지 수행해야했지만 사용자의 보안 장치로 2차 인증없이 한번에 인증을 수행할 수 있으므로 사용자에게 로그인에 걸리는 시간을 줄여주는 효과도 보여준다고 한다. 
패스키를 이용할 수 있는 디바이스 목록을 확인해보세요. 삼성 갤럭시에서도 One UI 6 부터 삼성 패스를 통해 패스키를 지원합니다.
패스키 관련 라이브러리
자바 기반의 WebAuthn 서버 측 구현은 Yubico의 java-webauthn-server를 사용하고 클라이언트 측 구현은 Web Authentication API에 해당하는 SimpleWebAuthn 라이브러리를 활용할 수 있다. 아래와 같이 build.gradle과 package.json 에 각각 추가해보자.
implementation 'com.yubico:webauthn-server-core:2.5.2'pnpm add @simplewebauthn/browser
패스키 로그인 구현하기
패스키 로그인 구현을 위해 이해해야할 정보들에 대해서 알아보도록 하자. 대략적으로 RP, Challenge, Authenticator, AAGUID 등이 있다.
Relying Party
RP(Relying Party)는 패스키를 통해 사용자의 신원을 확인하고 인증 절차를 수행하는 서비스 제공자를 의미하며 클라이언트에서는 패스키를 생성하기 전에 RP와 챌린지(Challenge)를 포함하여 여러가지 옵션을 서버로 부터 제공받아야 한다. 이때, 서버 응답은 PublicKeyCredentialCreationOptions로 구성된다. 각 필드 옵션에 대한 자세한 설명은 webauthn.guide에 나와있으니 참고하길 바란다.
RelyingPartyIdentity rpIdentity = RelyingPartyIdentity.builder()    .id("kdev.ing")    .name("Passkey Application")    .build();RelyingParty rp = RelyingParty.builder()    .identity(rpIdentity)    .credentialRepository(new MyCredentialRepository())    .build();
{  challenge: *****,  rp: {    id: "kdev.ing",  },  user: {    id: *****,    name: "mambo",    displayName: "Mambo",  },  pubKeyCredParams: [{    alg: -7, type: "public-key"  },{    alg: -257, type: "public-key"  }],  excludeCredentials: [{    id: *****,    type: 'public-key',    transports: ['internal', 'hybrid'],  }],  authenticatorSelection: {    authenticatorAttachment: "platform",    requireResidentKey: true,  }}
rp.id: 웹 사이트 출처에 대한 도메인
pubKeyCredParams: RP 에서 지원하는 공개키 알고리즘 종류
excludeCredentials: 동일한 기기 중복 등록 방지를 위한 이미 등록된 패스키 목록
Authenticator
등록된 패스키의 Authenticator는 인증 장치를 의미하며 AttestedCredentialData에 포함된 인증 장치를 제공하는 업체에 대한 식별자를 AAGUID 라고 한다. aaguid.json 으로 AAGUID에 대한 인증 장치 제공업체 이름을 확인할 수 있다. 사용자의 인증으로 생체 인증 정보가 포함된 공개키 크레덴셜(PublicKeyCredential)을 서버에 저장하도록 요청해야한다.
브라우저 패스키 지원 여부
@simplewebauthn/browser에 포함된 browserSupportsWebAuthn 함수를 통해 현재 사용자의 브라우저가 패스키를 지원하는지 여부를 쉽게 확인할 수 있다.
import {startRegistration, startAuthentication, browserSupportsWebAuthn} from '@simplewebauthn/browser';const isSupportedPasskey = () => {    if (typeof PublicKeyCredential === 'undefined') {        return false;    }    return browserSupportsWebAuthn()}export default {    isSupportedPasskey}
일단 패스키 로그인 도입이 완료되었다면 패스키 생성 및 로그인을 위한 FIDO 얼라이언스 UX 가이드라인에 따라 조금 더 사용자 친화적인 패스키 로그인을 도입해보도록 하자. 예를 들어, 깃허브에서 제공하는 패스키 관리의 경우 등록된 패스키에 대해 사용자가 기억할 수 있게 이름을 설정할 수 있도록 안내하고 있다.
패스키 사용자 인터페이스 디자인
사용자에게 패스키 전달

패스키 로그인

댓글