암호 없는 로그인을 위한 암호 키 생성

瓢蟲

 패스키는 사용자 계정을 더 안전하고 간단하며 사용하기 쉽게 만듭니다.

이 페이지에서

암호 대신 암호 키를 사용하면 웹 사이트에서 사용자 계정을 더 안전하고 간단하며 사용하기 쉽게 만들 수 있습니다. 암호 키를 사용하면 사용자는 지문, 얼굴 또는 장치 PIN을 사용하여 웹 사이트 또는 앱에 로그인할 수 있습니다.

암호 없는 로그인을 활성화하려면 먼저 암호 키를 만들고 해당 공개 키를 서버에 저장해야 합니다.

사용자가 암호로 로그인할 때 암호를 생성하도록 요청할 기회를 사용하십시오.

또 다른 좋은 옵션은 사용자가 암호를 관리하고 새 암호를 만들 수 있는 전용 설정 페이지를 갖는 것입니다.

전제 조건 #

Android용 Chrome에서 암호를 만들려면 Google Play 서비스 베타 가 필요합니다 . 그렇지 않으면 navigator.credentials.create()아래에 대한 호출이 실패합니다.

새 암호 생성 #

특징 감지 #

사용자에게 새 암호 키를 생성하라는 메시지를 표시하기 전에 다음을 확인하십시오.

  • 브라우저는 WebAuthn 을 지원합니다 .
  • 장치는 플랫폼 인증자를 지원합니다.
  • 브라우저는 조건부 UI를 지원합니다.

// Availability of `window.PublicKeyCredential` means WebAuthn is usable.
if (window.PublicKeyCredential &&
    PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable &&
    PublicKeyCredential.​​isConditionalMediationAvailable) {
  // Check if user verifying platform authenticator is available.
  Promise.all([
    PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable(),
    PublicKeyCredential.​​isConditionalMediationAvailable(),
  ]).then(results => {
    if (results.every(r => r === true)) {
      // Call WebAuthn creation
    }
  });
}

WebAuthn API를 호출하여 비밀번호 생성 #

암호 키를 생성하려면 WebAuthn API를 호출하십시오 navigator.credentials.create(). 각 매개변수에 대한 자세한 내용은 아래를 참조하십시오.

const publicKeyCredentialCreationOptions = {
  challenge: *****,
  rp: {
    name: "Example",
    id: "example.com",
  },
  user: {
    id: *****,
    name: "john78",
    displayName: "John",
  },
  pubKeyCredParams: [{alg: -7, type: "public-key"},{alg: -257, type: "public-key"}],
  excludeCredentials: [{
    id: *****,
    type: 'public-key',
    transports: ['internal'],
  }],
  authenticatorSelection: {
    authenticatorAttachment: "platform",
    requireResidentKey: true,
  },
  timeout: 30000
};

const credential = await navigator.credentials.create({
  publicKey: publicKeyCredentialCreationOptions
});

// Encode and send the credential to the server for verification.

주요 매개변수는 다음과 같습니다.

  • challenge: 이 등록에 대한 서버 생성 챌린지입니다. 이것은 필수 항목이지만 여기에서 다루지 않는 고급 주제인 증명을 수행하지 않는 한 등록 중에는 사용되지 않습니다. 증명이 없으면 으로 설정할 수 new Uint8Array([0])있지만 로그인 중에는 이 작업을 수행하지 마십시오.
  • rp.id: "신뢰 당사자" ID입니다. 신뢰 당사자는 암호 키를 사용하여 사용자를 인증하는 모든 엔터티입니다(예: 웹 사이트). RP ID는 도메인이며 웹사이트는 도메인이나 등록 가능한 접미사를 지정할 수 있습니다. 예를 들어, RP의 출처가 https://login.example.com:1337인 경우 RP ID는 login.example.com또는 가 될 수 있습니다 example.com. RP ID가 로 지정 되면 사용자는 의 모든 하위 도메인에서 example.com인증할 수 있습니다 .login.example.comexample.com
  • rp.name: RP의 이름입니다.
  • user.id: 사용자의 고유 ID입니다. 이것은 이메일 주소나 사용자 이름과 같은 개인 식별 정보를 포함하지 않는 ArrayBuffer여야 합니다. 계정당 생성된 임의의 16바이트 값이 잘 작동합니다.
  • user.name: 이메일 주소나 사용자 이름과 같이 사용자가 인식할 계정의 고유 식별자여야 합니다. 계정 선택기에 표시됩니다. (사용자 이름을 사용하는 경우 비밀번호 인증과 동일한 값을 사용하십시오.)
  • user.displayName: 이것은 계정에 대한 선택적이고 보다 친숙한 이름입니다. 고유할 필요는 없으며 사용자가 선택한 이름일 수 있습니다. 사이트에 여기에 포함할 적절한 값이 없으면 빈 문자열을 전달하십시오. 브라우저에 따라 계정 선택기에 표시될 수 있습니다.
  • authenticatorSelection.authenticatorAttachment: 로 설정합니다 "platform". 이는 플랫폼 장치에 내장된 인증자를 원하고 사용자에게 USB 보안 키와 같은 외부 인증자를 삽입하라는 메시지가 표시되지 않음을 나타냅니다.
  • authenticatorSelection.requireResidentKey: 로 설정합니다 "true". 검색 가능한 자격 증명(상주 키)이 필요하면 로그인 환경이 개선됩니다.
  • excludeCredentials: 이미 등록된 Credential ID의 목록을 제공하여 동일한 인증자가 등록되는 것을 방지합니다. transports멤버는 제공된 경우 각 자격 증명을 등록하는 동안 `를 호출한 결과를 포함해야 합니다 getTransports.

자격 증명 저장 #

성공적으로 해결 되면 응답 멤버가 인 개체를 navigator.credentials.create()반환합니다 . 이 객체는 새로 생성된 암호 키의 요소를 검색하는 , 및 기능을 제공 합니다 . 자격 증명 의 ID를 포함 하는 구성원이 있습니다.PublicKeyCredentialAuthenticatorAttestationResponsegetTransportsgetAuthenticatorDatagetPublicKeyAlgorithmPublicKeyCredentialrawId

서버에서 자격 증명에서 검색한 정보를 나중에 사용할 수 있도록 데이터베이스에 저장합니다. 다음은 저장할 일반적인 속성입니다.

  • 자격 증명 ID(기본 키)
  • 사용자 ID
  • 공개 키
  • 수송

서버 측에서 자격 증명을 처리하려면 자체 코드를 작성하는 대신 서버 측 라이브러리 또는 솔루션을 사용하는 것이 좋습니다. Awesome-webauth GitHub repo 에서 오픈 소스 라이브러리를 찾을 수 있습니다 .

사용자를 인증하려면 양식 autofill을 통해 암호 키로 로그인을 읽으십시오 .

모든 기사로 돌아가기

0 댓글