[React/GraphQL/Prisma] 로그인 만들기 #3.Backend 로그인

회원가입에서 create.graphql파일과 create.js 파일을 만들었다

로그인도 똑같은 형식으로 login.graphql 과 login.js 파일을 만든다

 

login.graphql은 회원가입과 똑같은 형식으로 한다 create.graphql를 모두 복사해서 몇개만 고쳐도 되지만

직접 써보면서 익숙해지는게 중요하다(직접)

login.graphql에는 email과 password만 받는다 (로그인은 다른 사이트에서도 그렇게 하니까)

회원가입의 반환값은 참, 거짓이었지만 login은 jsonwebtoken을 반환해야 하므로 String을 반환값으로 준다

 

 

로그인 하기위해서는 모든 사이트에서 그렇듯 email(id) 이랑 password를 받아서 email(id)가 존재하는지 찾고 password가 일치하는지 검사하고 로그인이 된다

 

 

 먼저 email이 존재하는지 검사하기 때문에

user에 email로 찾은 유저를 넣는다 근데 vsc에서 email을 찾지를 못한다

 

 

id는 는 찾아주는데 

email이 중복값이 가능하게 테이블을 설정해서 그런것이다

 

 

datamodel.prisma에서 name 과 email에 @unique 추가해서 중복값이 없게 한다

 

 

그러고 yarn prisma로 배포한다

 

 

아까와 달리 e만 써도 email이 찾아진다

 

 

if 문으로 user 가 없으면 Error를 출력한다

 

 

이제 비밀번호를 비교해야 한다

로그인할때 넣은 password와 회원가입때 bcrypt hash로 넣었던 값을 가져오기 위해 user.password를 가져오고

bcrypt compare로 비교한다 bcrypt가 알아서 검사한다

 

 

비교해서 if문으로 passwordMatch가 false면 Error를 출력한다 

 

 

로그인의 반환값으로 jsonwebtoken을 반환해야 하므로 추가해준다 터미널로가서 추가해준다

jsonwebtoken은 회원들이 로그인할때 암호화된 토큰을 주고 로그인이 필요한 작업들(댓글쓰기,글쓰기,좋아요 등등..)을 검증할때 도와준다 쉽게 말해 "학생증" 같은느낌이다

 

 

login.js 파일 위에 jsonwebtoken을 불러온다

 

 

jwt.sign은 토큰을 반환해준다

process.env.SECRET을 사용하기 위해서는 dotenv 패키지를 사용해야 한다

dotenv는 배포할때 비밀값이 있는 파일을 가상의 파일? 값? 으로 만들어 준다

 

 

터미널로 가서 dotenv를 추가한다

 

 

src에는 env.js를 만들고 login-back 폴더에 .env파일을 만든다

js파일은 dotenv를 설정하고 .env는 비밀로 하고싶은 것들을 넣어준다

 

 

env.js를 설정해준다 dotenv.config()는 대충 dotenv를 사용한다는 뜻인거 같다

 

 

SECRET은 해쉬값으로 해야 안전하겠지만 여기서는 그냥 아무거나 넣어준다

env를 사용하기위해서는 process.env.비밀값 으로 사용하면 된다

비밀값은 .env에서 써준 SECRET으로 한다

 

 

 

마지막으로 dotenv를 설정한 env.js가 실행이되야 process.env. 를 사용할 수 있기때문에 server.js에  위에처럼 넣어준다 

 

 

login 기능을 만들었다 이제 서버를 실행하고 저번글에서 회원가입한 이메일로 로그인을 해보면 된다

 

 

회원가입에서 만들었던 내역이 있다

 

 

복붙에서 로그인만 바꿔주고 이름을 지워준다

 

 

정상적으로 토큰이 발급되었다

로그인시 할 수 있는 작업(댓글쓰기,좋아요누르기 등..)들은 여기서 발급한 토큰을 사용한다

더 자세한 내용은 prisma tutorials 확인할 수 있다

참고자료 : prisma tutorials

                nomadcoders