ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Flask로 로그인 구현하기(No Database)
    웹프로그래밍/Flask(Python) 2021. 4. 13. 13:34
    반응형

    저번 시간에 우리는 Flask로 간단한 웹 사이트를 구축 해보았다.

     

    2021.04.12 - [웹프로그래밍/Flask(Python)] - Introduction of Flask & Develop Web Application

     

    Introduction of Flask & Develop Web Application

    Flask는 파이썬 기반 웹 프레임워크로(Web Framework for Python), 소규모 네트워크 기반 웹 어플리케이션을 제작할 때 빠른 시간내에 웹을 구축할 수 있는 큰 장점을 가지고 있다. Armin Ronacher에 의해 개

    insbox.tistory.com

     

    이번 시간에는 Flask를 통해 데이터베이스 없이 로그인을 구현해 보는 시간을 가지도록 하겠다.

     

    대부분 웹사이트의 로그인의 과정은 다음과 같이 이루어진다.

    로그인 정보(ID, PW) 입력 > 로그인 정보 비교 > 로그인 성공 시 메인 화면 보여주기


    먼저 로그인을 하기 위한 템플릿을 만들어야 한다.

     

    1. login.html

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
    </head>
    <body>
        <form method="post" action="/login_confirm">
            I D : <input type="text" name="id_"><br>
            P W : <input type="password" name="pw_"><br>
            <input type="submit" value="확인">
        </form>
    </body>
    </html>

    form을 사용하여, 이 포맷안에 어떠한 데이터가 들어가는지, 어떤 동작을 하는지 선언한다.

     

    - GET or POST -

    get은 url에 &name1=value1&name2=value2 가 포함하여 전송하는 역할을 한다.

    post는 url에 input 값을 숨겨서 전송하는 역할을 한다.

     

    보통은 보안상인 측면에서 Post를 많이 선호하는 편이다.

     

    - Action - 

    action은 submit을 통해 form이 어디로 전송되고, 어디로 redirect 되는지 정하는 역할을 한다.

     

    - Input - 

    text, password type의 입력값을 받고, name을 통해 자신의 이름을 알린다.

    submit type은 form의 제출을 의미하며, 제출 경로는 action이 된다.

     

    id를 admin, password를 12345라고 한다면 JSON 형식으로 Form은 다음과 같은 형태를 지닌다.

    JSON = form : { id_ : "admin", pw_ : "12345" }

     

    그럼 이제 '/login_confirm' 으로 form을 넘겨줬으니 파이썬으로 다뤄보자.

     

    2. login_confirm

    @app.route('/login_confirm', methods=['POST'])
    def login_confirm():
        id_ = request.form['id_']
        pw_ = request.form['pw_']
        if id_ == 'admin' and pw_ == 'admin':
            return redirect(url_for('index'))
        else:
            return redirect(url_for('login'))

    기존과 다르게 app.route 어노테이션에 methods라는 파라미터를 넣어 Form 데이터를 POST로 처리할지 GET으로 처리할지 정해야 한다.

     

    이후 request.form['$']을 통해 id_, pw_ 값을 넘겨받는다.

     

    현재 데이터베이스를 사용하고 있지 않기 때문에, IF 문에서 String 대조를 통해 로그인을 시키는 모습을 볼 수 있다.

    로그인이 성공되면 index 페이지를 보여주는데, 코드상으로는 render_template이 아닌 redirect(url_for)를 사용하고 있다.

     

    더보기

    Redirect vs Render_template

    render_template : url의 변경이 없이, 해당하는 템플릿을 보여주는 역할

    redirect : url로 리다이렉션을 하며, 해당하는 함수를 실행해주는 역할

     

    왜 render_template은 쓰면 안될까?

    이유는 간단하다. render_template를 쓰면 url에서는 "127.0.0.1:8080/login_confirm"이라는 사이트를 가르키고 있지만, 정작 보여주는 것은 인덱스(index) 페이지일 것이다.

    하지만 redirect를 사용하면 url이 변경되어 "127.0.0.1:8080/index"라는 사이트를 가리키며, 올바르게 인덱스 페이지를 보여줄 수 있다.

     

    브라우저 속에서 보이는 홈페이지의 외관은 비슷하나, 로그인 처리와 메인페이지를 동시에 보여주는것과 로그인 처리를 하고 메인페이지를 보여주는 것의 차이다. 

     

    앞서 우리는 로그인의 과정을 다음과 같이 정의했다.

    로그인 정보(ID, PW) 입력 > 로그인 정보 비교 > 로그인 성공 시 메인 화면 보여주기

     

    하지만 render_template를 사용하면 로그인 과정이 다음과 같이 바뀔 것이다.

    로그인 정보(ID, PW) 입력 > 로그인 정보 비교 & 메인 화면 보여주기

     

    그럼 이제 로그인 완료 후에 보여줄 index 페이지를 작성해보자.

     

    3. index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Index</title>
    </head>
    <body>
        로그인에 성공하셨습니다.
    </body>
    </html>

     

     


    실행 화면

    로그인 화면 : password는 식별 불가능한 모습을 보여준다.
    메인 화면 : 로그인이 성공한 상태이며, redirect(url_for)를 통해 index 경로에 있는 것을 알 수 있다.

     

    이로써 우리는 Flask로 웹사이트의 로그인 기능을 완성하였다.

     

    하지만 우리는 웹사이트의 꽃인 'session'을 활용하고 있지 않다.

    session을 활용하면 웹사이트 내에서, 로그인 정보를 지닌 상태로 여러 페이지를 돌아다닐 수 있다.

    또한 session은 인증 측면에서도 뛰어난 모습을 보여주기 때문에, 이를 꼭 활용 할 수 있어야 한다.

     

    따라서 다음 시간에는 이번 시간에 개발한 로그인을 수정하여 session을 활용 할 수 있는 웹사이트로 탄생시켜 보자.

     

     

    [github.com/jaeseok3] 소스코드는 제 깃허브에서 가져가시면 됩니다.

    댓글

Designed by Tistory.