[18일차] 로그인 / 1. AccessToken

0

로그인 과정을 정리하려면 토큰의 개념을 먼저 파악해야한다.

wiki 설명
JSON 웹 토큰(JSON Web Token, JWT, "jot”[1])은 선택적 서명 및 선택적 암호화를 사용하여 데이터는 만들기 위한 인터넷 표준으로, 페이로드는 몇몇 클레임(claim) 표명(assert)을 처리하는 JSON을 보관하고 있다.

쉽게 말해 회원 인증 혹은 정보 전달에 사용되는 암호화된 문자열
요렇게 생김

header(헤더), payload(내용), signature(서명) 3가지로 구성되어있다.

주로 회원 인증 및 로그인 수단.

인증 과정
1.아이디 비번 입력
2.백엔드를 거쳐 토큰을 만들고 -> DB 서버에 저장.
3.다시 백엔드로 돌려주기
4.프론트로 AccessToken 돌려받기
5.AccessToken 저장

이번 글에서는 AccessToken 활용만 다룰 것임. refreshToken을 통한 AccessToken 재발급은 다음 글에 작성할 것.

로그인 관련 gql을 확인해보자

이메일과 비밀번호를 입력하면 토큰을 돌려받는 API가 있다.


이렇게 값을 넣으면

토큰을 결과 값으로 뿌려준다. 객체 안에 잘 들어가있다.

회원만 글을 남길 수 있는 중고판매사이트가 있다고 가정하고, 뮤테이션을 시도해보자.


회원정보 인증에 실패.
아래쪽을 보자.

이 형태는 앞으로 자주 보게 될 것. 저 Bearer은

bearer는 JWT와 OAuth를 타나내는 인증 타입입니다.
라는데 무슨 말인지 잘 모르겠다. 일단 쓰면서 알아보자.
여튼 bearer 뒤에 토큰을 넣으면

playground에서 글 작성에 성공했다.
이걸 내 홈페이지에서도 적용할 것임.


1._app.tsx
accrssToken은 전역에서 쓰이기 때문에 _app.tsx 설정이 중요.
npm의 apollo-upload-client 를 활용

2.accessToken을 담아놓을 state 작성

3.gql연결 부분에 header~부분 추가

4.createContext사용. _app.tsx함수 밖에서 사용. userInfo는 유저정보임

5. 4에서 선언한 LayoutContext를 컴포넌트 최상위 범위에 놓기. 이제 어디서든 accessToken을 꺼내 쓸 수 있다.

6.login.constainer.tsx 에서 useContext사용

7.6에서 꺼낸 setAccessToken 에 로그인 뮤테이션으로 받을 accessToken 담기

refreshToken 및 권한 분기는 다음 로그인 편에 작성할 예정.


profile
코린이의 코딩 성장기

0개의 댓글