내맘대로 로그인

회원가입을 구현시켰으니 로그인이다!
생각보다 회원가입은 디비에 데이터를 저장하면 되는 일이라 쉬웠는데 로그인이 이 데이터에 있는 값이 있을 때와 없을 때를 구분해야해서 어려웠다.(당연..한..건가..?ㅎ)
무튼! 여러 블로그와 다른 스터디원분들의 코드를 보고 시도해보았을때 로그인 자체를 구현하는 것은 어렵지 않았는데 내가 원하는 것이 잘 이루어지지 않았다.

🐯 내가 구현하고자 했던 것

• 로그인 실패 시 alert를 띄워 회원가입으로 자연스럽게 유도할 수 있게끔 하는 것.

단순 return 값만 주는 게 아닌 alert로 선택권을 주고싶은데 찾아본 결과 사람들은 form을 이용하거나 여러 다른 기능들을 사용하여 구현하였으나 아직 내 실력으로는 블로그 자체의 내용을 이해하는 것도 모르는 기술들이 많아 하나하나 찾아보느라 머릿속에 잘 들어오지도 않고 이해도 되지 않았다ㅠㅠ 그래서 나는 나만의 방법으로 실행해봄..! 어쨋든 정답은 없는거라고 생각함..! ㅎㅎㅎㅎㅎㅎㅎ

🥭app.py

## flask에서 세션을 사용하기 위한 설정값
app.secret_key='skdud'

## 로그인
@app.route('/login', methods=['GET','POST'])
def login():
    if request.method=='GET':
        return render_template('login.html')
    else:
        id = request.form['id']
        pw = request.form['pw']
        users = db.surfusers.find_one({'id': id, 'pw': pw})

        if users is None :
            return redirect('loginfail')
        else:
            session['user'] = id
            return redirect('/')

🚩 session과 redirect를 사용하기 위해서는 꼭꼭 import 후 사용!

서버에서 세션값을 주기 위해서는 시크릿키를 설정해야한다!

🚨 여기서 잠깐! 세션? 쿠키?

쿠키(cookie)

쿠키?

• 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일
• 사용자 인증이 유효한 시간을 명시할 수 있고, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다.
• 클라이언트에 300개까지 쿠키 저장이 가능하며 하나의 도메인당 20개의 값만 가질 수 있고, 하나의 쿠키값은 4KB까지 저장한다.
• response header에 set-cookie속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
• 사용자가 따로 요청하지 않아도 브라우저가 요청 시 request header를 넣어 자동으로 서버에 전송한다.

동작방식

1. 클라이언트가 페이지를 요청
2. 서버에 쿠키를 생성
3. http 헤더에 쿠키를 포함 시켜 응답
4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관
5. 같은 요청을 할 경우 http 헤더에 쿠키를 함께 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 http 헤더에 포함시켜 응답

예시

• 로그인 시, '아이디와 비밀번호를 저장하시겠습니까?'
• 장바구니
• 자동로그인
• 팝업 ' 오늘 더 이상 이 창을 보지 않음'

세션(session)

세션?

• 쿠키를 기반하고 있지만, 쿠키와는 달리 서버 측에서 관리한다.
• 서버에서는 클라이언트를 구분하기 위해 세션id를 부여하고 웹 브라우저가 서버에 접속해 브라우저를 종료할 때까지 인증상태를 유지한다.
• 사용자 정보를 서버에 두기 때문에 쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지한다 = 동시 접속자가 많은 웹사이트의 경우 서버 과부하로 성능 저하의 요인이 된다.
• 세션id : 클라이언트가 request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 id를 부여하는 것.

동작 방식

1. 클라이언트가 서버에 접속 시 세션 id를 발급 받는다.
2. 클라이언트는 세션 id에 대해 쿠키를 사용하여 저장한다.
3. 클라이언트는 서버에 요청할 때, 이 쿠키의 세션 id를 전달하여 사용한다.
4. 서버는 세션 id를 전달 받아 해당 id로 클라이언트 정보를 가져온다.
5. 해당 정보를 가지고 요청을 처리하여 클라이언트에게 응답한다.

예시

• 로그인과 같이 보안상 중요한 작업을 수행할 때 사용

저장한 db에서 하나의 데이터를 찾아 해당 데이터가 없을 경우(회원가입이 되지 않은 경우) 알림창을 띄우고 싶었으나 잘 되지 않았다..ㅠㅠ
🚨 해결 방법 : 로그인이 되지 않았을 때의 파일을 하나 더 생성하여 위 데이터가 없을 경우 이 파일로 연결될 수 있도록 하였다.

        if users is None :
            return redirect('loginfail')

🥭loginfail.html

    <script>
         $(document).ready(function () {
             alert('회원 정보가 일치하지 않습니다.')
             moveletin()
            });

         function moveletin() {
             let result = confirm('회원가입 하시겠습니까?');
             if(result) {
                 window.location.href = 'letin'
             } else {
                 window.location.href = 'login'
             }
         }

    </script>