[포스코x코딩온] 웹 풀스택 과정 7주차 회고

[포스코x코딩온] 웹 풀스택 과정 7주차 회고 | JWT

Codult 2024. 3. 29. 21:46

728x90

📌 OAuth (Open Authorization)

인터넷 사용자들이 비밀번호 제공하지 않아도, 다른 웹사이트 상의 사용자 정보에 대해 웹사이트 및 어플리케이션의 접근 권한을 부여할 수 있는 수단이다. (ex. 타 사이트 내 소셜로그인)

OAuth 2.0

Access Token을 통해 권한을 부여하고, 사용자의 실제 비밀 정보를 공유하지 않는다.
OAuth 2.0에서는 웹 서비스에서 사용되는 사용자 인증 방식 중 하나인 Bearer의Token 인증 방식을 지원한다. JWT를 Bearer Token으로 사용할 수 있는데, Bearer는 JWT 토큰을 헤더의 authorization에 담아 서버로 다른 요청을 보낼 수 있다.

📌 JWT (JSON Web Token)

웹 애플리케이션에 정보를 안전하게 전송하기 위한 간단한 방법이다.
공개되는 정보이며, 누구든지 해석이 가능(jwt.io에 토큰 입력하여 해석 가능)하므로, 인증을 위한 간단한 정보만 포함해야 한다. 비밀번호 등의 주요 정보는 포함하면 안된다.

JWT 작동방식

사용자 로그인
→ 서버에서 확인 후, 로그인 성공 시 JWT 생성 (jwt.sign())
→ 사용자는 생성된 JWT를 응답으로 받음
→ 사용자는 해당 JWT과 함께 다른 데이터를 서버에 요청
→ 서버는 JWT를 검증 (jwt.verify())
→ 검증 결과에 따른 데이터를 사용자에게 응답함

JWT 사용하기

jsonwebtoken 설치 후 불러와야 한다.
npm install jsonwebtoken

const jwt = require('jsonwebtoken');

JWT 주요함수

sign: 서버 측에서 JWT 생성

jwt.sign(payload, secretOrPrivateKey, [options, callback]);

verify: 클라이언트나 서버에서 받은 JWT의 유효성을 검증

jwt.verify(token, secretOrPublicKey, [options, callback]);

payload: 실제 정보 데이터로, 키와 값의 객체 형태로 넣어준다.
secretOrPrivateKey는 토큰을 암호화하는 주요정보이므로, 환경변수로 빼야한다.

JWT verify

header의 authorization으로 토큰을 전달받는 경우, req.headers.authorization으로 해당 토큰 가져올 수 있다.
토큰의 형태는 아래와 같이 'Bearer ----토큰----'의 형태로 출력된다.

따라서, 공백(" ")을 기준으로 split 해주면 배열로 토큰 값만을 뽑아낼 수 있다.

const token = req.headers.authorization.split(" ");
console.log(token[0]); // Bearer
console.log(token[1]); // Token

📌 localStorage

locatStorage는 브라우저에 위치한 저장소로, 간단한 키와 값을 저장할 수 있다.
프로그램이 실행되는 동안만 존재하는 자바스크립트 변수와 달리, 사용자가 지우지 않는 이상 계속 브라우저에 남아있다.

localStorage 주요함수

localStorage.setItem("키", "값"): 키와 값을 지정하여 localStorage 생성
localStorage.getItem("키"): 해당 키의 localstorage를 가져옴 (생성할 때와 달리, 키만 입력해주면 됨)
localStorage.clear(): localStorage 지움

✔ 참고)
script에서 async, await 사용 시, async를 설정할 함수가 없다면, 생략되어 있는 즉시 실행 함수에 async를 넣어 작성해주면 된다.
생략되어 있는 즉시 실행 함수는 아래와 같이 표현할 수 있다.

<script>
  (function () {
		// 명령
}) ()
</script>

※ async, await 사용 시, try~catch 문 함께 작성하도록 습관들이기.

728x90