라라벨 프로젝트에 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포트에 대해서 설정해주겠습니다.

Listen 443
SSLProtocol all -SSLv2 -SSLv3
SSLHonorCipherOrder on
SSLCipherSuite "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !EDH !RC4"
SSLPassPhraseDialog  builtin
SSLSessionCache "shmcb:/Applications/mampstack-7.3.13-0/apache2/logs/ssl_scache(512000)"
SSLSessionCacheTimeout  300
<VirtualHost _default_:443>
 DocumentRoot "라라벨 프로젝트/public"
  SSLEngine on
SSLCertificateFile "/Applications/mampstack-7.3.13-0/apache2/conf/server.crt"
SSLCertificateKeyFile "/Applications/mampstack-7.3.13-0/apache2/conf/server.key"
  <Directory "라라벨 프로젝트/public">
    Options Indexes FollowSymLinks
    AllowOverride All
    <IfVersion < 2.3 >
      Order allow,deny
      Allow from all
    </IfVersion>
    <IfVersion >= 2.3 >
      Require all granted
    </IfVersion>
  </Directory>
  # Error Documents
  ErrorDocument 503 /503.html
  # Bitnami applications installed with a prefix URL (default)
  Include "/Applications/mampstack-7.3.13-0/apache2/conf/bitnami/bitnami-apps-prefix.conf"
</VirtualHost>
 

 

Laravel Project를 생성하고 초기화해줍시다 ㅎㅎ

composer create-project --prefer-dist "laravel/laravel" temp "5.8.*"
cd temp/
 
cp .env.example .env
php artisan key:generate
php artisan session:table

 

그 후 .env파일을 설정해줍시다. 저는 다음과 같이 설정했습니다.

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=https://localhost
 
LOG_CHANNEL=stack
 
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=DB명
DB_USERNAME=DB유저명
DB_PASSWORD=DB패스워드
 
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=database
SESSION_LIFETIME=120
 
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
 
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
 
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
 
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1
 
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
 

 

자 이제 데이터베이스를 마이그레이션하고 https://localhost를 확인해봅시다. https로 접속되는 것을 꼭 확인해주세요 ㅎㅎ

php artisan migrate:fresh

 

다음은 asbiin/laravel-webauthn를 참고하여 라라벨 프로젝트에 asbiin의 laravel-webauthn 패키지를 설치하겠습니다.

composer require asbiin/laravel-webauthn

 

그 후 Laravel에 기본 인증과 WebAuthn을 달아주기 위해서 다음 명령어를 입력해주세요

php artisan make:auth
php artisan laravelwebauthn:publish
php artisan migrate:fresh

 

자 이제 마이그레이션과 프로젝트 설정은 끝났습니다. (참 쉽죠? asbiin님께 감사를 드립니다) https://localhost를 들어가서 회원가입과 로그인이 정상적으로 이루어지는지 확인해주세요. 현재까지는 Laravel의 기존 Authentication을 이용하고 있습니다.

 

이제 WebAuthn Register를 작성해줄 차례입니다.  /home  라우트가 가리키고 있는  HomeController@index  컨트롤러의  resources/views/home.blade.php  파일을 수정해주겠습니다.

 

먼저 asbiin/laravgel-webauthn의 라우트를 확인해보겠습니다.

• GET /webauthn/auth / route('webauthn.login') The login page.

• POST /webauthn/auth / route('webauthn.auth') Post datas after a WebAuthn login validate.

• GET /webauthn/register / route('webauthn.register') Get datas to register a new key

• POST /webauthn/register / route('webauthn.create') Post datas after a WebAuthn register check

• DELETE /webauthn/{id} / route('webauthn.destroy') Get register datas

 

저희는 현재 WebAuthn 등록을 하고있기 때문에  /webauthn/register 로 연결해주겠습니다.  home.blade.php 의 적당한 곳에 아래의 코드를 추가해주세요.

<a href="{{ route('webauthn.register') }}">WebAuthn 등록하기</a>    

 

그 후 테스트해봅시다

 

(GET) /home

(GET) /webauthn/register

 

 

키가 정상적으로 생성되었는지 데이터베이스를 확인해주세요

DB/webauthn_keys

 

정상적으로 등록된 모습입니다. 이제 WebAuthn 인증을 라라벨의 미들웨어에 넣어 인증과정을 추가해주도록 하겠습니다.

 

먼저 라우트 미들웨어에 laravel-webauthn패키지를 등록해줍니다.

 

 app/Http/Kernel.php  > $routeMiddleware

'webauthn' => \LaravelWebauthn\Http\Middleware\WebauthnMiddleware::class,

 

그 후  /home  라우트에 webauthn 미들웨어를 등록해줍시다.

Route::middleware(['auth', 'webauthn'])->group(function () {
    Route::get('/home', 'HomeController@index')->name('home');
});

 

 

이제 로그인하고  /home  라우트로 접속해볼까요? WebAuthn 인증을 추가적으로 필요로 한다면 성공입니다.

(GET) /home

 

만약 정상적으로 WebAuthn이 사용이 안되는 PC의 경우 https로 접속되어있는지 확인해주세요.

 

 

 

성공적으로 Laravel 프로젝트에 WebAuthn을 도입했습니다! WebAuthn은 다음과같이 사용될 수 있습니다.

 

• 초기로그인 부터 비밀번호를 필요로 하지 않는 Fast Login
• 자동로그인 상태에서 간편 로그인 진행시 활용

 

이후에는 위의 두가지 사항과 Fido 서버를 분리하는 작업을 포스팅하겠습니다.

 

 

 

깃허브 : https://github.com/labyu/laravel-webauthn-practice