[Flask] 간단한 로그인 구현 (HTML, GET)

2023. 1. 20. 16:42

로그인을 할 수 있는 간단한 form을 보자.

<form action="/login" method="get">
  <p>Enter Name:</p>
  <p><input type="text" name="user_name" /></p>
  <p><input type="submit" value="submit" /></p>
</form>

method : HTTP method를 의미하고 여기서는 GET을 사용
action : 버튼이나 입력을 했을 때 가고 싶은 페이지(특정 파일, 라우팅 경로)를 입력하면 됨
name : 위 코드에서 보면 입력한 값이 user_name의 값으로 저장 됨
input의 type이 submit이면 버튼이 생성됨
- 버튼을 누르면 위에서 입력한 변수 값(user_name)이 정해진 URL(action 값)로 전달 됨
- 최종 URL은 '현재 HTML페이지가 실행중인 URL/login?user_name=Sso' (method를 GET으로 지정했기 때문)

실제로 구현해보자.

test.html

html:5 입력 후 tab을 누르면 기본 HTML5 템플릿이 생성됨

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>로그인 TEST</title>
</head>
<body>
  <form method="get" action="http://localhost:8080/login">
    <center>
      <h1>로그인</h1>
      ID : <input type="text" name="id" /> <br />
      PWD : <input type="text" name="pwd" /> <br />
      <input type="submit" />
    </center>
  </form>
</body>
</html>

VScode에서 Live Server를 설치한 후 오른쪽 하단에 생기는 Go Live를 클릭하면 작성한 HTML을 실시간으로 수정해가며 확인할 수 있다.

Go Live를 클릭하여 실행 후 위와 같이 사용중인 포트 번호가 나온다.

이는 별도의 서버(Live Server)를 만들어서 해당 포트(5500)에 HTML을 보여주도록 한 것이다.

위 HTML 코드 설명에서 action이 /login일 경우 127.0.0.1:5500/login으로 가게될 것이다.

하지만 이 서버에는 HTML을 출력하기 위한 것으로 login 라우팅 경로가 있는 것이 아니다!

action에 전체 URL을 적지 않은 경우 해당 HTML 파일을 띄운 서버에 + 라우팅 경로가 된다.

따라서 다른 서버로 이동하기 위해 웹 서버를 띄울 login_test.py 파일을 보자.

login_test.py

from flask import Flask, jsonify, request
app = Flask(__name__)

@app.route('/login')
def login():
    id = request.args.get('id')
    pwd = request.args.get('pwd')

    if id == 'Sso':
        return_data = {'auth': 'success'}
    else:
        return_data = {'auth': 'failed'}
    return jsonify(return_data)

if __name__ == '__main__':
    app.run(host="127.0.0.1", port="8080")

여기서는 웹서버를 127.0.0.1:8080으로 띄웠고, /login 라우팅 처리를 해줬기 때문에

위 HTML action에서 '/login'이 아닌 'http://localhost:8080/login' 로 적어줘야 한다.

현재는 Live Server와 login_test.py에서 띄운 서버가 총 두개 떠져 있는 것이다!

Live Server에서 띄운 HTML에

id : Sso , pwd : 1234을 입력하고 전송해봤다.

위와 같은 결과가 출력된다.

위 URL을 보면 /login?id=Sso&pwd=1234로 전달 됨을 알 수 있다.

'WebFramework > [Flask]' 카테고리의 다른 글

[Flask] Jinja2 사용법 (0)	2023.01.20
[Flask] Bootstrap 사용하기 (로그인) (0)	2023.01.20
[Flask] GET 사용법 (0)	2023.01.20
[Flask] httpi 설치 (0)	2023.01.20
[Flask] 정적, 동적 페이지 라우팅 (1)	2023.01.19

Sso