본문 바로가기

Fido2/WebAuthn

(4)
라라벨 프로젝트에 WebAuthn 도입하기 (4) 등록 Flow 3 (Registration Flow) Parsing and Validation check, Store 오늘은 이전의 메소드들을 통해 만든 데이터들을 어떻게 처리하는지 알아보려고 합니다. 먼저 아래 플로우를 봐주세요. webuahtn.guide 문서와 위의 플로우를 함께 보시면서 데이터를 만들어가시면 더욱 좋을 것 같습니다. FLOW는 대략적으로 위와 같고 마지막에 authData는 디테일하게 적지 않았는데 Spec문서에 좋은 이미지가 있어서 첨부합니다. ( Figure중 하나의 이미지입니다 ) 이제 간단하게 설명해보겠습니다. navigator.credential.create()함수를 통해 얻은 값들 중 clientDataJson과 attestationObject는 각각 다음과 같은 데이터를 제공합니다. clientDataJson - challenge ( 처음 publicKeyCredentialCreati..
라라벨 프로젝트에 WebAuthn 도입하기 (3) 등록 Flow 2 (Registration Flow) navigator.credentials.create 안녕하세요. 이전시간에는 PublicKeyCredentialCreationOptions에 대해서 알아보았는데요. 오늘은 navigator.credentials.create을 위해서 서버로부터 받은 publicKeyCredentialCreationOption을 디코딩하고 navigator.credentials.create메소드를 통해 publicKeyCredentail을 만드는 과정을 보겠습니다. 먼저 제가 발급한 publicKeyCredentialCreationOption입니다. 이후 이 publicKeyCredentialCreationOption이 어떻게 decode되는지 보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Web..
라라벨 프로젝트에 WebAuthn 도입하기 (2) 등록 Flow 1 (Registration Flow) PublicKeyCredentialCreationOptions 안녕하세요. 이전시간에는 asbiin/laravel-webauthn 패키지를 자신의 프로젝트에 도입하는 실습을 해보았는데요. 오늘은 이 패키지가 어떻게 이루어져있고 어떤 Flow로 등록이 되는지 탑다운 방식으로 파헤쳐보겠습니다. 먼저 resources/vendor/webauthn/register.blade.php 를 보겠습니다. HTML부분은 자신이 원하는 디자인에 맞게 커스텀해주시면 될 것 같고 유심히 볼 것은 태그와 부분입니다. 먼저 부분을 보도록 하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var publicKey = {!! json_encode($publicKey) !!}; ... var webauthn = new WebAuthn((nam..
라라벨 프로젝트에 WebAuthn 도입하기 (1) 시작하기 안녕하세요. 오늘은 Fido2에서 추가된 WebAuthn을 라라벨 프로젝트에 도입하는 포스트를 작성해보겠습니다. 먼저 제 개발환경은 다음과 같습니다. 깃허브(https://github.com/labyu/laravel-webauthn-practice) macOS Mojave Apache2 PHP 7.3 Laravel 5.8 MySQL 8.0 asbiin/laravel-webauthn (https://github.com/asbiin/laravel-webauthn) 서버구축은 Bitnami amp를 이용하여 구축했습니다. 먼저 이 프로젝트는 https를 지원해야하기 때문에 Apache2설정에서 ssl과 443포트에 대해서 설정해주겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ..