회원가입 구현, 회원정보 DB에 저장 및 로그인

오늘의 배운점

- 멀티 커서 쓸 때는 확인을 잘하자!
- 프론트 → 백으로 가기 전에 javascript를 통해서 민감한 정보(비밀번호 등)는 암호화를 해준다 (sha256)
- fastApi를 통해서 Form 정보를 간편하게 가져올 수 있음

HTML

 form 태그를 이용하여 정보 입력 후 submit. 비밀번호는 입력할 때 보이지 않게 input type = "password"로 설정해주고, 비밀번호를 서버로 보낼 때는 복호화(암호화를 푸는 것)가 되지 않는 sha256 해쉬를 사용하여 보내준다.

 

JAVASCRIPT

 HTML에서 그린 form 태그에 Event Listener를 추가하여 submit 버튼 클릭 시 해당 정보를 받아와서 서버로 보내주는 역할. 서버로는 데이터가 제대로 옮겨졌지만 콘솔 로그가 찍히지 않는 이상한 현상때문에 이틀을 날렸다... 😭 스택오버플로우에 질문까지 남기게 되었다.. 

서버에서 print 된 아이디와 비밀번호 값은 제대로 찍히는 걸 봐서 연결은 제대로 되어있다는 건데 콘솔 로그가 안 찍히고 화면도 return 화면으로 돌아가서 200이라는 값만 찍혀있었다.

 

하하하하 sha256 안 먹어서 html script 태그에 type을 추가해 뒀던 거 지웠더니 해결이 됐다..

그런데 두 번째 문제로 서버에 던졌을 때 422 Unprocessable Entity 이런 에러가 떴음 한번에 제대로 되는 게 없네 샤..

모두 에브리띵 스트링인데 왜 안 되는 거냐 

 

오우 노우.. 역시 오늘자 교훈 에러메시지를 유심히 보자..

넘긴 form 데이터 오브젝트 포맷이 body에 email이 가있길래 웬 이메일이 들어가있지? 했더니

html에서 email 라벨 한번에 바꾸려고 멀티 커서 해뒀다가 name이 email이라고 들어가 있는 거 발견해서 고쳤더니 해결됐다.. 허허

 

분명 이메일 필드 만들기 전부터 암호화도 안 먹었던 기억이 있는데, 그것까지 말끔히 고쳐진 이유 도대체 뭐임 ,, 후

 

PYTHON

js를 통해서 JSON 형식이 아니라 form 데이터를 그냥 받고 싶으면 Form을 사용해주면 됨. 그러면 필드 자체 값으로 전달 받게 됨.

from fastapi import FastAPI, Form

@app.post("/login/")
async def login (username: Annotated[str, Form()],
                             password:Annotated[str, Form()]):
  return {"username": username}