728x90
우선 자신의 폰에 맞게 OTP 앱을 다운로드 받아서 설치합니다.
그리고 여기로 가셔서 파일을 다운로드 받습니다.
실제로 사용할 파일은 PHPGangsta 안에 있는 GoogleAuthenticator.php 이 파일입니다. 그러니 이 파일만 다운로드 받으셔도 됩니다.
설치를 원하는 환경이 PHP 5.6이어서 이 코드들은 PHP 5.5, 5.6에서 정상적으로 실행됩니다.
테스트를 하시려면 아이디/패스워드 모두 test입니다.
아이디와 패스워드를 입력하고 로그인 버튼을 누르면 위처럼 QR 코드가 뜹니다.
디비 연결은 되어 있지 않습니다. 테스트를 위해서...
파일 실행 순서는 이렇습니다.
- google-otp.html
아이디(#user-id), 패스워드(#user-password)를 입력하고(여기에서는 테스트를 위해서 각각 test, test를 입력) 로그인(#btn-submit) 버튼을 클릭하면 line 9 ~ 29까지가 실행이 됩니다. - check-login.php
1번에서 입력한 아이디와 패스워드가 정확한지 line 3에서 체크를 합니다. 물론 실제로 사용을 하시려면 이 라인 위에서 디비와 통신을 해서 입력한 값이 정확한지 검사가 이루어져야 합니다. 여기에선 test/test가 맞다고 가정을 합니다. 코드는 굳이 수정할 부분은 없습니다. 모든 값들을 json 형태로 다시 넘겨줍니다. - check-code.php
1번의 line 19 ~ 27을 보시면 2번에서 보낸 값들을 나눠서 입력합니다. 값이 정상적으로 넘어왔다면 div.otp-popup을 화면에 띄웁니다. 이제 여기에서 뜬 QR 코드를 다운로드 받은 앱으로 비추면 숫자 123 456 이렇게 떨어져서 총 여섯 자리가 나옵니다. 이걸 입력하고 확인(#btn-check-qr) 버튼을 클릭하면 다시 ajax로 이 값이 맞는지 체크합니다. 값이 맞다면 불린값이 리턴되니 true에 맞춰서 무언가 처리를 하면 되지 않을까 싶습니다.
반응형
'Programming > PHP' 카테고리의 다른 글
[Codeigniter3]외부 라이브러리(ex PHPExcel) 연동하기(?) (0) | 2022.11.18 |
---|---|
강제로 404 발생시키기 (0) | 2022.11.09 |
[고도몰5]커스터마이징하기 전에 알아야 할... (2) | 2022.05.11 |
[정규표현식]이미지만 갖고 오기 (0) | 2022.05.02 |
[정규표현식]내용에 html tag가 있는지 확인 (0) | 2022.01.12 |