flask 홈페이지 만들기 + mariadb 활용(3)

by

flask 홈페이지 만들기 세 번째 포스팅 시작합니다! + Mariadb

안녕하세요, Let’s Gil-IT입니다. flask 홈페이지 다들 준비되셨나요!

2번 포스팅을 잘 따라오셨다면, DB 구축 및 회원가입 기능까지 잘 구현하셨을겁니다.

이번 포스팅에서는 회원가입 후 로그인 기능을 구현해보도록 하겠습니다.

간단하니 천천히 잘 따라오시면 됩니다.

1. 로그인 html 만들기

아래의 html 코드를 입력하시면 간단한 로그인 기능이 구현되어 있는 웹 페이지가 만들어집니다.

<html>
    <head>
        <meta charset='utf-8'/>
    </head>
<body>
    <h1>로그인 페이지 입니다.</h1>
    <form action="/login" method="POST">
     <!-- I am not using FlaskForm so type lite this if you want to use FlaskForm use form.csrf_token -->

	    <input type ="hidden" name = "csrf_token" value = "{{csrf_token()}}"/> 
        <p>아이디를 입력하세요:</p>
        <p><input type="text" name="userid" /></p>
        <p>비밀번호를 입력하세요:</p>
        <p><input type="password" name="password" /></p>

        <p><input type="submit" value="submit" /></p>
    </form>
</body>
</html>

여기서 잠깐! csrf 관련한 코드가 들어가 있는데 이게 무엇인지 간단하게 설명드리도록 하겠습니다.

먼저, csrf란 Cross-site Request Forgery로 사이트간 요청 위조입니다. 인증된 사용자가 웹 애플리케이션에 특정 요청을 보내도록 유도하는 공격 방식입니다.

쉽게 말하면 해킹과 비슷한 것입니다. 유저가 보내는 요청을 조작하는 공격으로 예를 들어 이메일 첨부 링크를 클릭 시, 계좌에서 현금이 인출되는 방식이 해킹이 가장 유명한 예입니다.

요청을 실제 클라이언트가 했는지 확인하기 위해서 csrf token 방법을 사용합니다.

클라이언트(토큰X) → 로그인 → 서버 → 로그인 성공의 로직에서 클라이언트(토큰O) → 로그인 → 토큰확인 → 로그인 성공 이렇게 각 클라이언트가 가지고 있는 토큰을 확인하는 형태로 보안을 강화합니다.

이러한 부분을 구현하기위한 코드는 아래와 같습니다. 방법은 두가지입니다. Globally하게 쓸건지 아니면 lazily하게 할 건지 선택하시면 됩니다. 이에 대한 자세한 부분은 여기를 참고하세요.

저는 전역으로 사용하고 싶기에 app.config에 시크릿 키를 미리 저장하여 사용하였습니다. 방법은 여러가지이니 자신에게 맞는걸로 사용하시면 됩니다. 아래 코드는 가장 간단한 예시입니다.

#globally
from flask_wtf.csrf import CSRFProtect

csrf = CSRFProtect(app)

#lazily
csrf = CSRFProtect()

def create_app():
    app = Flask(__name__)
    csrf.init_app(app)

먼저, html 결과를 확인해보겠습니다. 다음과 같이 나오면 정상입니다. html을 이쁘게 꾸미는 방법은 여러가지 있으니 구글 검색 또는 유투브 검색 등을 통하여 로그인, 회원가입 페이지를 커스텀 마이징 하시면 됩니다!

flask mariadb_login_html
flask mariadb_login_html

2. html은 완성이 되었으니 DB – Web을 연결하여 DB에 있는 ID, PWD면 로그인 성공 아닌 경우는 실패라는 결과 값을 돌려주면 됩니다.

어렵지 않으니 천천히 따라오시면 됩니다. app.py에 아래 코드를 추가하시면 됩니다.

#app.py
from flask import session
import pymysql as my
@app.route('/login', methods=['GET','POST'])  
def login():
    msg =''
    if request.method == 'POST' and 'userid' in request.form and 'password' in request.form:
        userid = request.form['userid']
        password = request.form['password']
        cursor = my.connect(host = '127.0.0.1',user ='test',password='Rkddbs23!!', port=3306, database = 'test', cursorclass=my.cursors.DictCursor)
        cursor = cursor.cursor()
        cursor.execute('SELECT * FROM test.register_user WHERE userid = %s AND password = %s', (userid, password,))
        account = cursor.fetchone()
        if account:
            session['loggedin'] = True
            session['userid'] = account['userid']
            session['password'] = account['password']
            msg = 'Success!'
            return msg
        else:
            msg = 'Failed!'
            return msg
    return render_template('login.html', msg=msg)

하나씩 보도록 하겠습니다. 먼저 POST 형식으로 요청이 들어오고 userid와 password가 로그인 화면에서 form안에 존재한다면

userid, password 변수를 request를 통해서 들고온 데이터로 설정합니다. 이후 my.connect 함수를 통해서 DB와 연결합니다.

DB로 연결한 후 DB.TABLE(이전 포스팅을 참고하면 test.register_user가 됩니다.)에서 userid와 password를 가져옵니다.

이후, account라는 변수에 저장한 후, flask 모듈의 session 함수를 통해서 account 에 저장된 id와 session에 저장되어 있는 id가 같으면 성공 아니면 실패라는 메세지를 던집니다.

3. 생각보다 간단하지 않나요? 그러면 이해를 돕기위해서 제가 회원가입부터 로그인까지 보여드리도록 하겠습니다.

서버는 올라가 있는 상태이며 회원가입 페이지는 register, 로그인 페이지는 login으로 되어 있습니다. 사진보다 영상이 이해하시기 좋을 것 같아서 영상으로 제공합니다.

flask 홈페이지 연결

flask 와 mariadb 을 활용하여 로그인 기능을 구현해봤습니다. 오히려 회원가입보다 쉽지 않나요? DB에 있는 데이터와 html에서 request를 통해 받아오는 데이터의 일치여부를 확인하고 통과, 실패만 하면 됩니다!

이것으로 오늘의 포스팅은 마무리하겠습니다. 다음 포스팅은 여러 페이지들을 버튼 기능을 통해 이동하는 방법과 Nas 및 도커에 대해서 알아보도록 하겠습니다. 감사합니다!

Let’s Gil-IT