20220214_TIL : 로그인 절차

권지현·2022년 2월 14일
0
post-thumbnail

브라우저에서 로그인이 이루어지기 위해 프론트엔드, 벡엔드에서 요청이 이루어졌을때 발생하는 상황에 대해 배웠다.

로그인을 위해 회원정보가 입력되면 벡엔드로 정보가 전송이 되고 이때 유저의 정보가 DB에 저장되어있는 정보와 동일할 경우(=인증 과정) 문자열 Access Token을 전달받는다. 이 토큰으로 회원 정보에 대해 판별하고 프로필 수정, 게시물 등록 등의 절차가 진행 되는 것이다.

const uploadLink = createUploadLink({
    uri: "http://backend05.codebootcamp.co.kr/graphql",
    headers: { Authorization: `Bearer ${accessToken}` },
  // 로그인 시 받아온 토큰 자리(graph-ql)
});

AccessToken이 유효하다면 사용자가 로그인되었다고 판단하고 계정이 필요한 요청에 대한 처리를 진행하게 된다.

개발자 모드에서 Request Headers 부분을 확인해보면, authorization 의 이름으로 AccessToken 이 담겨서 전송

벡엔드에서는 회원 정보에 대해서 DB에 온전히 저장해둘경우 개인정보 유출, 해킹 등 보안문제에 취약하기 때문에 회원 정보를 객체 형태로 암호화하고 브라우저에서 전송받은 토큰을 다시 복호화해서 로그인된 유저 정보 확인이 가능하다.

이때 토큰을 만들기 위해 사용하는 표준 방식을 JWT (JSON Web Token).
JWT 문제점은 누구나 토큰을 해독할 수 있기 때문에 회원임을 알 수 있는 아이디와 짧은 범위의 로그인 만료 시점 정도만 저장한다.

DB에서 사용자 정보를 저장할 때 개인 정보 유출이나 해킹 시에도 원본 데이터에 대한 보안을 위해 서버 관리자도 확인할 수 없도록 hasing처리가 필요하다.

👩🏻‍💻 오늘의 TIL ...
앞으로 등록 회원만 가능한 기능을 구현하는 등 오늘 배운 개념을 확실히 정리해 둘 필요가 있을 것 같다. 전체적인 개념 정리를 꼭 해두자.

profile
FE 개발자 성장 기록 👩🏻‍💻

0개의 댓글