Programming/PHP / / 2022. 6. 23. 10:28

관리자 로그인에 구글 OTP 적용하기

728x90

우선 자신의 폰에 맞게 OTP 앱을 다운로드 받아서 설치합니다.

그리고 여기로 가셔서 파일을 다운로드 받습니다.

실제로 사용할 파일은 PHPGangsta 안에 있는 GoogleAuthenticator.php 이 파일입니다. 그러니 이 파일만 다운로드 받으셔도 됩니다.

설치를 원하는 환경이 PHP 5.6이어서 이 코드들은 PHP 5.5, 5.6에서 정상적으로 실행됩니다.

[테스트 페이지입니다.]

테스트를 하시려면 아이디/패스워드 모두 test입니다.

아이디와 패스워드를 입력하고 로그인 버튼을 누르면 위처럼 QR 코드가 뜹니다.

디비 연결은 되어 있지 않습니다. 테스트를 위해서...

파일 실행 순서는 이렇습니다.

  1. google-otp.html
    아이디(#user-id), 패스워드(#user-password)를 입력하고(여기에서는 테스트를 위해서 각각 test, test를 입력) 로그인(#btn-submit) 버튼을 클릭하면 line 9 ~ 29까지가 실행이 됩니다.
  2. check-login.php
    1번에서 입력한 아이디와 패스워드가 정확한지 line 3에서 체크를 합니다. 물론 실제로 사용을 하시려면 이 라인 위에서 디비와 통신을 해서 입력한 값이 정확한지 검사가 이루어져야 합니다. 여기에선 test/test가 맞다고 가정을 합니다. 코드는 굳이 수정할 부분은 없습니다. 모든 값들을 json 형태로 다시 넘겨줍니다.
  3. check-code.php
    1번의 line 19 ~ 27을 보시면 2번에서 보낸 값들을 나눠서 입력합니다. 값이 정상적으로 넘어왔다면 div.otp-popup을 화면에 띄웁니다. 이제 여기에서 뜬 QR 코드를 다운로드 받은 앱으로 비추면 숫자 123 456 이렇게 떨어져서 총 여섯 자리가 나옵니다. 이걸 입력하고 확인(#btn-check-qr) 버튼을 클릭하면 다시 ajax로 이 값이 맞는지 체크합니다. 값이 맞다면 불린값이 리턴되니 true에 맞춰서 무언가 처리를 하면 되지 않을까 싶습니다.
반응형