첫 개발이었다.
팀으로 어떤 프로젝트를 만드는 것이 두렵기도 했지만, 설렌다 라는 마음으로 받아들여보는 것이 더 좋을 듯.
내가 맡은 파트
나는 로그인 파트를 맡게 되었다.
로그인 페이지에서 form 태그에서 들어오늘 ID PW가 데이터베이스에 있는 ID PW와 같다면 로그인이 성공적으로 되고, 또 로그인이 되었다면 다른 페이지에 로그인이 되어서 생기는 변화를 보이는 것이 목표! 이다.
코드
app.py
@app.route("/login", methods=["GET", "POST"])
def login():
if request.method == "POST":
data = request.json
email = data.get("email")
password = data.get("password")
# Check if the entered credentials are valid
user = Member.query.filter_by(email=email).first()
if user and check_password_hash(user.password_hash, password):
# Successful login
response = {"success": True}
else:
# Failed login
response = {"success": False}
return jsonify(response)
# For GET requests, render the login form
member_list = Member.query.all()
return render_template("login.html", data=member_list)login.html
<body class="d-flex align-items-center py-4 ">
<main class="form-signin px-4 py-5 my-5">
<form onsubmit="processLogin(event)">
<img class="mb-4"
src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/webjong/images/sparta-logo.svg"
alt width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<button class="btn btn-primary w-100 py-2" type="submit">로그인</button>
<p class="mt-5 mb-3 text-body-secondary">whatsYourStack</p>
</form>
</main>
<script>
// Login part
async function processLogin(event) {
event.preventDefault(); // Prevent form submission
var email = document.getElementById("floatingInput").value;
var password = document.getElementById("floatingPassword").value;
// Perform client-side validation (you should also perform server-side validation)
if (email && password) {
try {
// Send login data to the server for verification
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email: email, password: password }),
});
if (response.ok) {
// Successful login
const result = await response.json();
if (result.success) {
alert("Login successful!");
// You can redirect the user to another page after successful login
} else {
alert("Login failed. Please check your email and password.");
}
} else {
alert("Error during login. Please try again.");
}
} catch (error) {
console.error('Error during login:', error);
}
} else {
alert("Please enter both email and password.");
}
}
</script>ChatGPT의 도움을 많이 받았지만, 그래도 해보려고 노력을 했다,,
근데 생각한 것처럼 로그인이 안 되더라
일단 패스워드를 보내는 방식이 패스워드 그 자체를 보내는 것이 아니라, 패스워드를 한번 해싱해서? 보내는 방식으로 바꿔야 정상 작동하는 것으로 보여서 수정을 해야할 것 같다.
Plus - 좋았던 점, 유지했으면 좋은 점
- 처음으로 팀원들과 만나서 협업하게 됐는데, 팀원들이 다들 열심히 해서 좋았다. 나도 더 열심히 해야겠다고 느꼈다.
- 오랜만에 피그마 써보니까 재밌었다
- Minus - 아쉬웠던 점, 고쳤으면 하는 점*
- 조금 더 알았더라면... 이라는 아쉬움은 있지만, 그걸 원동력으로 더 열심히 배워봐야겠다.
- Interesting - 뇌리에 번뜩, 신선하고 흥미로웠던 점*
- 서비스 서버랑 DB서버 따로 사용한다는게 신기했어요. 또 비용도 DB서버 따로 쓰는게 더 절감된다는게 신기했습니다.
- 로그인에도 알아야 할 게 많다는걸 알았다.
- (예시) jwt, cookie, session, local storage
- 비밀번호 해싱이 신기했다. 더 알아봐야지
'항해99 > [항해99] 웹미니프로젝트' 카테고리의 다른 글
| [항해99] 웹 미니 프로젝트-개발일지 (2) (0) | 2023.12.07 |
|---|---|
| [항해 99] 웹 미니 프로젝트 SA (0) | 2023.12.06 |