[파이썬] FastAPI - 메모 앱 프로젝트 18(최종): 자동 로그아웃

이전 내용

[파이썬] FastAPI - 메모 앱 프로젝트 17: 소셜 로그인 탈퇴

---

자동 로그아웃 구현하기

 
마지막으로 로그인 후, 보안을 위해 자동으로 로그아웃이 구현되도록 기능을 보완해 보려 한다.
먼저, 로그인 유지 시간의 경우 main.py에서 SessionMiddleware 에서 세션 만료 시간(max_age)을 설정해 주었기 때문에 특별히 수정할 것은 없다.

# FastAPI 애플리케이션 생성
app = FastAPI()
app.add_middleware(
    SessionMiddleware, 
    secret_key="your-secret-key",
    max_age=60 * 60,  # 1시간 후 세션 만료
    same_site="lax", # same_site가 없으면 세션 쿠키가 인증 흐름 중 브라우저에서 차단될 수 있음
    https_only=False, # 로컬 환경에서 HTTPS가 아니라면, 브라우저가 Secure 속성이 있는 쿠키를 저장하지 않을 수 있으므로, https_only=False
    session_cookie="session",
)

▶ max_age = 60 * 60: 1시간(3600초) 후 세션이 만료되며 로그아웃 되도록 설정
 
여기에다 사용자가 아무 동작도 안 하고 브라우저만 켜놓은 경우 자동 로그아웃 되도록 설정해 준다.
필자의 경우, 10분간 아무런 활동도 없을 경우 자동으로 로그아웃 되도록 처리하려고 한다.
 
◆ memos.html
자바스크립트로 사용자의 활동을 감지 후 타이머가 동작하도록 <script> </script> 사이에 하단의 내용을 추가해 준다.

// 비활동 시 자동 로그아웃 설정
let timer;
const logoutTime = 10 * 60 * 1000 // 10분

function resetTimer() {
    clearTimeout(timer);
    timer = setTimeout(() => {
        alert("10분 동안 활동이 없어 자동 로그아웃됩니다.");
        fetch('/logout', {method: 'POST'})
            .then(() => window.location.href = '/login');
    }, logoutTime);
}

window.onload = resetTimer;
// 사용자 활동 감지
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
document.ontouchstart = resetTimer;

• onmousemove, onkeypress, ontouchstart: 사용자 활동 감지
• setTimer: 타이머 시작 (10분 후 로그아웃)
• fetch('/logout'): 서버에 로그아웃 요청 후 리디렉션

---

로그아웃 타이머 추가하기

 
그리고 로그인 했을 때 (비 활동 시) 로그아웃까지 남은 시간이 오른쪽 상단에 표시되도록 보완해 준다.
◆ memos.html

// 비활동 시 자동 로그아웃 설정 <script 부분>
let timer;
let countdown = 10 * 60 // 10분(초단위)

function startTimer() {
    timer = setInterval(() => {
        countdown--;

    const minutes = String(Math.floor(countdown / 60)).padStart(2, '0');
    const seconds = String(countdown % 60).padStart(2, '0');
    document.getElementById('logout-timer').textContent = `${minutes}:${seconds}`;

    if (countdown <= 0) {
        clearTimeout(timer);
        alert("10분 동안 활동이 없어 자동 로그아웃됩니다.");
        fetch('/logout', {method: 'POST'})
            .then(() => window.location.href = '/login');
        }
    }, 1000);
}

function resetTimer() {
    countdown = 10 * 60; // 다시 10분으로 리셋
}

window.onload = () => {
    startTimer();
};

// 사용자 활동 감지
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
document.ontouchstart = resetTimer;
        
        
// body 부분에 타이머 표시
<div style="position: fixed; top: 10px; right: 20px; font-weight:bold;">
    자동 로그아웃까지 남은 시간: <span id="logout-timer">10:00</span>
</div>

 

키워드	설명
setInterval	일정 시간마다 함수를 반복 실행
clearInterval	타이머 중지
padStart()	시/분을 2자리로 고정할 때 사용
DOM 요소 접근	document.getElementById 등

 
 
서버를 실행하여 로그인해보면, 로그아웃 타이머가 잘 실행되는 것을 확인할 수 있다.

---

최종 프로젝트 구조

 
메모 앱 생성 및 주요 구현 기능

• 회원 관련 기능 (회원 가입, 회원 탈퇴, 비밀번호 수정, 임시비밀번호 발급, 아이디 찾기, 로그인, 로그아웃 등)
• 소셜 로그인 기능 (소셜 계정 가입, 소셜 로그인, 로그아웃, 회원 탈퇴 등)
• 메모 관련 기능 (메모 생성, 메모 조회, 메모 수정, 메모 삭제 등)
• 이메일 발송 기능 (회원 가입, 회원 탈퇴, 임시비밀번호 발급, 비밀번호 수정, 아이디 찾기 등)
• 자동 로그아웃 관련 (자동 로그아웃 시간, 비활동 시 자동 로그아웃 타이머 설정, 타이머 표시 등)

 
◆ controllers 디렉터리: 사용자의 요청을 처리하고 적절한 응답 반환

• main_controller.py: 메인 페이지, about 페이지 라우터
• memos_controller.py: 메모 관련 함수 구현 + 각 기능별 라우터 설정
• users_controller.py: 사용자(회원) 관련 함수 구현 + 각 기능별 라우터 설정

◆ oauth 디렉터리

• google.py: 구글 로그인 및 콜백 관련 기능 구현 및 라우터 설정
• kakao.py: 카카오 로그인 및 콜백 관련 기능 구현 및 라우터 설정
• naver.py: 네이버 로그인 및 콜백 관련 기능 구현 및 라우터 설정
• unlink_services.py: 각 소셜 연동 해제 기능 구현 및 라우터 설정

◆ service 디렉터리

• email_class.py: 회원 가입, 탈퇴, 아이디 찾기, 임시 비밀번호 발급, 비밀번호 수정 관련 이메일 발송에 대한 클래스 생성
• email_service.py: 이메일 클래스에서 생성된 클래스들의 인스턴스를 생성 후 호출하여 기능 구현 (이메일 발송 실행)

◆ templates 디렉터리 (html, Java Script)

• change_pw.html: 비밀번호 변경 관련 프런트 엔드 페이지
• find_account.html: 아이디 찾기, 임시비밀번호 발급 관련 프런트 엔드 페이지
• login.html: 로그인 프런트 엔드 페이지
• memos.html: 로그인 후 메모가 표시되는 페이지 (메모 조회, 메모 생성, 메모 수정, 로그아웃, 회원 탈퇴, 자동 로그아웃 타이머)
• signup.html: 회원 가입 프런트 엔드 페이지

◆ py 파일 및 그외

• .env: 소셜 (구글, 카카오, 네이버) 로그인 관련 ID, SECRET_KEY, REDIRECT_URI 저장, 이메일 발송 용 계정 설정(gmail)
• alembic.ini: 데이터베이스 업데이트 시 필요
• database.py: DB 연동 기능 수행
• dependencies.py: 사용자 인증을 위한 비밀번호 해시 및 검증 기능 구현
• main.py: FastAPI 애플리케이션의 진입점으로서, 애플리케이션 인스턴스를 생성하고 API 라우팅을 정의하며 서버를 실행하는 역할
• models.py: 데이터베이스의 테이블과 관계를 정의하는 모델 담당
• requirements.txt: 프로젝트에 필요한 패키지와 그 버전을 명시하는 파일로, 프로젝트의 의존성을 관리하고 설치하기 위해 사용. 다른 PC나 환경에서 사용 시, pip install -r requirements.txt 명령어로 필요한 라이브러리를 한 번에 설치할 수 있다.
• run.bat: main.py를 실행하여 서버를 실행하기 위한 파일. 터미널에 run.bat를 입력하면 서버가 실행된다.

• schemas.py: 데이터 검증 및 직렬화 기능 수행 ▶ 클라이언트로부터 받은 데이터의 유효성을 검사하고, API 응답 형식 정의.

 
이제 해당 파일을 깃허브에 업로드하면 된다.
단, requirements.txt의 경우 현재 로컬 주소로 되어 있는 것들을 install 하게 되면 에러가 발생하므로, 버전만 표시되도록 해주기 위해 터미널에 아래의 명령어를 입력한다.

pip list --format=freeze > requirements.txt

 
이렇게 하면, 모듈과 라이브러리의 버전만 저장되므로 다른 환경에서 사용하여 requirements 설치 시 매우 유용하다.

 
그리고 .gitignore 파일을 만들어서 중요한 정보가 담긴 .env 파일이 업로드 되지 않도록 설정해 준다.

---