[코드캠프]23-1일차_TIL_로그인

윤성해·2023년 4월 17일
0

프론트엔드_TIL

목록 보기
21/27
post-thumbnail

수업 목차

  1. 로그인의 역사
  2. 단방향 암호화(해싱) 양방향 암호화
  3. 토큰을 같이 보내주는 방법
  4. JWT 토큰과 조작 불가능성 이해

오늘의 TIL

쿠키 / 로그인의 역사

첫번째 로그인의 역사

브라우더에서 특정 email, password를 가지고 로그인을 하게되면 백엔드로 loginAPI 요청이 가게되고, 백엔드에서는 해당 유저가 있는지 디비에서 확인후, 있으면 session에 저장해두게 됩니다.
그 후 특정한 id를 부여해서 브라우저로 보내줍니다.
이렇게 보내진 id는 해당 유저가 뭔가를 요청할 때 본인이 누군지 식별 할 수 있도록 id를 함께 넣어서 보내줍니다.

이렇게 유저의 정보(Id)를 백엔드 서버로 받다보니 한번에 여러명의 정보를 받기엔 한계가 있었습니다.
이를 보완하기 위해서 백엔드 컴퓨터를 scale-up을 해주었습니다.

scale-up
→ 컴퓨터의 성능(cpu,memory 등)을 올려주는 것

두번째 로그인의 역사

이렇게 백엔드 컴퓨터의 성능을 올려주었음에도 불구하고 더 많은 유저의 접속이 동시 다발적으로 일어나면, 여전히 서버의 부하를 초래했습니다. 그래서 나온 방법으로 백엔드 컴퓨터를 복사하는 방법 이었습니다. 이 방법은 유저의 정보가 담기는 백엔드 컴퓨터를 복사해 여러대의 컴퓨터로 백엔드 서버의 부하를 분산해주었습니다.

그렇지만, 백엔드 컴퓨터를 복사할때는 세션까지 scale out이 안되기때문에 기존의 로그인 정보를 가지고 있던 백엔드 컴퓨터가 아니면, 로그인 정보가 없습니다.
또한 백엔드 컴퓨터를 복사해도 DB는 하나이기 때문에 결국 DB로 부하가 몰리는 병목현상이 일어납니다.

이 문제를 해결하기 위해 세번째 로그인 방법이 사용됩니다.

scale-out
→ 똑같은 성능의 컴퓨터를 추가하는 것 입니다.

세번째 로그인의 역사

이 방법은 위의 session을 scale-out해오지 못하는 문제점을 보완한 방법이자 DB에 부하가 몰리는 병목현상을 해소한 방법으로, 현재 많이 쓰이고 있는 방법입니다.
session을 복사해오지 못하자 사람들은 로그인 정보를 DB에 저장하기 시작했습니다.
하지만 결국 이것도 백엔드 서버의 부하가 DB로 옮겨진 것 이기 때문에 DB의 부하를 초래합니다.
보완을 위해 “DB를 복사하면 안되나?” 라고 생각하셨을 수 있지만, DB를 복사하는 방법은 비용문제가 발생하기 때문에 비효율적입니다.

따라서 위의 문제점은 데이터를 쪼개면서 해결하게 됩니다.

데이터베이스를 쪼개는데는 2가지의 방법이 있습니다

  • 수직으로 쪼개는 수직파티셔닝
  • 수평으로 쪼개는 수평파티셔닝(샤딩)
    그러나 여기에도 문제점은 있습니다.

DB는 컴퓨터를 껏다 켜도 날아가지 않기 때문에 데이터들이 disk에 저장됩니다.
따라서 안전하지만 느립니다. 우리는 결국 이렇게 disk에 저장된 데이터를 추출해 오는 현상을 DB를 긁는다고(scrapping) 표현합니다.
이를 해결하기위한 방법으로 Redis라는 메모리에 저장하는 임시 데이터베이스에 저장해둡니다. redis는 메모리에 저장하기 때문에 디스크 보다 빠릅니다.
따라서 위의 문제점을 해결 합니다.

Redis
→ 메모리에 저장해두는 임시 데이터 베이스

이렇게 저장된 특정 ID(토큰)을 다시 브라우저로 돌려주게 된다.
돌려받은 토큰은 브라우저 저장공간에 토큰을 저장해두고 어떤 행동을 할때 토큰을 같이 보내주어 사용자가 누구인지 식별한다.

  • stateless → 백엔드 컴퓨터에 상태를 가지고 있지 않음

JWT 로그인

네번째 로그인의 역사

“로그인 정보를 굳이 서버나 DB에 저장해야 할까?” 생각으로 탄생한 것이 JWT 토큰입니다.

JWT 토큰은 유저 정보를 담은 객체를 문자열로 만들어 암호화한 후 암호화된 키(accessToken)를 브라우저에 줍니다.
받아온 암호화된 키는 브라우저 저장소에 저장해두었다가 유저의 정보가 필요한 API를 사용할 때 보내주게 되면,해당 키를 백엔드에서 복호화해서 사용자를 식별한 후 접근이 가능하도록 합니다.
JWT 토큰에는 해당 토큰이 발급 받아온 서버에서 정상적으로 발급을 받았다는 증명을하는 signature를 가지고 있습니다.
따라서 사용자의 정보를 DB를 열어보지 않고도 식별할 수 있게 되었습니다.

단방향 암호화(해싱) 양방향 암호화

우리가 로그인을하고, 로그인 정보를 fetch해왔을 때 브라우저에 비밀번호를 fetch 할 수 없어야 합니다.
즉, 비밀번호를 알아내는게 불가능해야 합니다.
DB에 있는 비밀번호를 알아낼 수 있게되면, 해킹을 잘하는 사람이 DB를 해킹해왔을때 유저의 비밀번호를 알아낼 수 있게 되면 민감한 정보에 접근이 가능하게 됩니다.
비밀번호나 계좌번호같은 민감한 정보는 백엔드에 저장할때 그대로 저장하지 않습니다.

양방향 암호화

양방향 암호화는 JWT같은 복호화가 되는 암호화를 말합니다.
즉, 암호화와 복호화 모두할 수 있는 암호화 입니다.

단방향 암호화(hash)

단방향 암호화는 암호화는 되지만 복호화는 안되는 것을 의미합니다.

(예제)
275719 —암호화—> 779
앞에서 부터 2개씩 끊어가지고 10으로 나눈 나머지를 적어놓은 것이 779가 되겠습니다.
10으로 나눴을 때 나머지가 7이 되는 숫자는 27,37,47 등등 너무나도 많기 때문에 원래 정보가 뭔지 모르게 만드는 것 입니다.

이를 다대일 이라고 하는데, 이는 레인보우 테이블로 무작정 다 대입해서 복호화 하는 경우도 있습니다.
이부분을 보완하기위해서 조금더 어려운 알고리즘을 추가하기도 합니다.
따라서 민감한 정보를 저장할때는 해킹을 당해도 알아볼 수 없도록 단방향 암호화를 사용하여 저장하게 됩니다.

💡tip
authentication과 authorization
→ authentication(인증) : 로그인을해서 토큰을 받아오는 과정
→ authorization(인가) : 리소스에 접근 할 수 있도록 토큰을 확인하는 과정

토큰을 같이 보내주는 방법

http header에 토큰을 넣어서 보내기!

HTTP HEADERS에 “Authorization”을 보내주시면 됩니다.
위에서 사용되는 Bearer는 관례상 사용하는 것 일 뿐 반드시 사용하는 것 이 아닙니다.
이부분은 백엔드와 상의해서 사용해야 합니다. 만일 백엔드에서 Bearer가 아닌 Basic으로 받고있다면, Basic으로 보내주면 됩니다.

JWT토큰과 조작 불가능성 이해

회원가입 진행

로그인 진행 (회원가입 먼저 하기!)

Docs를 보시면 우리가 받아와야 하는것에 accessToken이 있습니다.
그리고 받아온 accessToken 안에는 유저가 로그인 한 기록이 저장되어있습니다.
따라서 우리는 유저정보를 확인해야 하는 API를 사용할 때, accessToken을 첨부해 보내주시면 백엔드에서 유저정보를 확인후 해당 API를 사용할 수 있도록 해줍니다.

JWT의 이상한 점

jwt.io 를 열고 Encoded 부분에 우리가 받아온 accessToken을 넣어보도록 하겠습니다.


우리가 받아온 토큰을 넣어보니 decoded부분에 토큰에대한 정보가 모두 보이고 있습니다.
이처럼 누군가 우리의 토큰을 탈취해 해당 사이트에 넣어보면 토큰의 정보를 알 수 있습니다.
즉, JWT토큰은 암호화는 했지만 누구든 열어볼 수 있다는 것 입니다.

따라서 중요한 데이터는 JWT 토큰에 저장해서는 안됩니다!!❗️

Encoded ⇒ 암호화
decoded ⇒ 복호화(암호를 푸는 것)

💡 tip
JWT 토큰의 구성
1. header : 토큰의 타입, 암호화시 사용한 알고리즘 정보
2. payload : 토큰 발행정보(누구인지, 언제 발행되었는지, 언제 만료될 것 인지)
3. signature : 토큰의 비밀번호

그럼 JWT는 사용하면 안되나요?

누구든지 복호화가 가능하기 때문에 보안을 위해 토큰의 만료시간을 짧게 주었습니다.
그러나 복호화된 정보에는 토큰의 만료시간이 명시되어있었습니다. 즉 조작을 할수도 있다는 것 이지요.
하지만 이런 조작을 미연에 방지하기 위해 JWT는 signature(토큰의 비밀번호)를 사용합니다.
토큰의 내용을 조작하기 위해선 토큰의 비밀번호를 알아야 한다는 것 입니다.
해당 비밀번호는 백엔드에서 생성하며, 알 수 없습니다.

로그인과 Recoil 연결

로그인 기능을 연결해봅시다.
로그인 폴더, 로그인이 성공하면 이동할 폴더 두개를 만들것입니다.

// login 폴더의 index.tsx 화면 그려주기
import {useMutation,gql} from "@apollo/client"
import {ChangeEvent} from "react"

cosnt LOGIN_USER = gql`
	mutation loginUser($email:String){
		loginUser(email: $email, password: $password){
			accessToken
		}
	}
`

export default function LoginPage(){
	const [email,setEmail]=useState("")
	const [password,setPassword]=useState("")
	const [loginUser] = useMutation<Pick<IMutation,'loginUser'>,IMutationLoginUserArgus>(LOGIN_USER)

	const onChangeEmail = (event:ChangeEvent<HTMLInputElement>)=>{
		setEmail(event.target.value)
		}
	const onChangePassword = (event:ChangeEvent<HTMLInputElement>)=>{
    setPassword(event.target.value)
		}

	const onClickLogin = async()=>{
	try{
		cosnt result = await loginUser({
			variables:{
					email : email,
					password : password
				}
			})
		const accessToken = result.data?.loginUser.accessToken
		}catch(error){
			// alert(error.message)을 사용하셔도 무방합니다.
			Modal.error({content : error.message})
		}
	} 

	return(
		<div>
			이메일 : <input type="text" onchange={onChangeEmail}/> <br/>
			비밀번호 : <input type="password" onchange={onChangePassword}/> 
			<button onClick={onClickLogin}>로그인하기!!</button>
		</div>
	)
}

loginUser같은 경우엔 타입 추론이 불가능 합니다.
이럴때 우리는 앞에는 받아올 타입을 , 뒤에는 보내줄 타입을 직접 적어주었습니다.
입력하는 방법으로는 IMutation에서 로그인 유저의 타입을 Pick 해주셔야 합니다.

pick과 같이 쓰이는 타입 omit과 patial
→ pick, omit, patial 은 모두 utility 타입입니다.
omit은 특정 데이터를 빼고 모두 데려와주는 역할을 하고, patial은 모두 가지고 오지만 모두 ?를 붙여서 가지고 오는 것 입니다.

catch부분에 에러가 뜬다면?(타입스크립트 버전에 따라)

...코드
catch(error){
	if(error instanceof Error)Modal.error({content : error.message})
	}

이제 만들어둔 회원정보를 가지고 로그인을 해보겠습니다.
로그인을 하면 아래와 같이 accessToken을 잘 받아가지고 옵니다.

그런데 우리는 loginsuccess에서 로그인 한 유저의 정보를 가지고 오고있습니다.
따라서 우리는 유저의 정보를 가지고 오는 api를 사용할 것 인데, 사용을 위해 http header부분에 accessToken을 첨부해서 요청하셔야 합니다.
그렇다면 vscode에서 accessToken을 첨부하는 방법을 알아보도록 하겠습니다.

accessToken global state(Recoil)에 저장하기

// login 폴더의 index.tsx _ accessToken global state에 저장해주기
import {useMutation,gql} from "@apollo/client"
import {ChangeEvent} from "react"
import { useRecoilState } from "recoil";
import {useRouter} from "next/router"

cosnt LOGIN_USER = gql`
	mutation loginUser($email:String){
		loginUser(email: $email, password: $password){
			accessToken
		}
	}
`

export default function LoginPage(){
	const [email,setEmail]=useState("")
	const [password,setPassword]=useState("")
	const [loginUser] = useMutation<Pick<IMutation,'loginUser'>,IMutationLoginUserArgus>(LOGIN_USER)
	const router = useRouter()
	cosnt [accessToken,setaccessToken] = useRecoilState(accessTokenState)

	const onChangeEmail = (event:ChangeEvent<HTMLInputElement>)=>{
		setEmail(event.target.value)
		}
	const onChangePassword = (event:ChangeEvent<HTMLInputElement>)=>{
    setPassword(event.target.value)
		}

	const onClickLogin = async()=>{
	try{
		cosnt result = await loginUser({
			variables:{
					email : email,
					password : password
				}
			})
			const accessToken = result.data?.loginUser.accessToken
			setAccessToken(accessToken)
			router.push('/loginsuccess')
		}catch(error){
			// alert(error.message)을 사용하셔도 무방합니다.
			Modal.error({content : error.message})
		}
	} 

	return(
		<div>
			이메일 : <input type="text" onchange={onChangeEmail}/> <br/>
			비밀번호 : <input type="password" onchange={onChangePassword}/> 
			<button onClick={onClickLogin}>로그인하기!!</button>
		</div>
	)
}

이렇게 토큰을 같이 보내주도록 세팅을 하면, 유저의 정보를 받아와 화면에 “성해님 환영합니다.”와 같이 정보를 띄울 수 있게됩니다.

// loginsuccess 폴더의 index.tsx
const FETCH_USER_LOGGED_IN = gql`
query fetchUserLoggedIn{
	fetchUserLoggedIn{
		email
		name
		}
	}
`
export default function LoginSuccessPage(){
	const {data} = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN)

	return(
		<div>
			{data?.fetchUserLoggedIn.name}님 환영합니다.
		</div>
	)
}

global state에 저장된 accessToken header 연동하기

//app.tsx파일
function MyApp({ component,pageProps }:AppProps){
const [accessToken,setAccessToken] = useState("")
const uploadLink = createUploadLink({
		uri : "백엔드 주소",
		headers : { Authorization : `Bearer ${accessToken}` }
	})

	return (
			<ApolloProvider client={client}>
				<Component {..pageProps}/>
			</ApolloProvider>
	)
}

위의 uploadLink에 저 토큰을 추가했다는 것은 , 모든 컴포넌트에서 로그인 관련 토큰을 추가해서 보내주도록 만든 것 입니다.
로그인을 안한사람은 토큰 자리에 토큰이 없고, 로그인을 한 사람은 토큰을 가지고 있습니다.
그럼 저 토큰자리에 어떻게 토큰을 채워 줄 수 있을까요?
우리는 이전 시간에 global state를 배웠습니다.
즉, Recoil에 accessToken을 저장해두고 사용하고싶은 컴포넌트 전체를 감싸주고 필요한 곳에서 꺼내서 사용하는 것 입니다.

//app.tsx파일
import { RecoilRoot } from "recoil";

function MyApp({ component,pageProps }:AppProps){

	return (
		<RecoilRoot>
        <ApolloSetting>
          <Global styles={globalStyles} />
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ApolloSetting>
      </RecoilRoot>
	)
}
// src/components/commons/apollo/index.tsx

// Apollo Setting 빼주기
import { useRecoilState } from "recoil";
import { accessTokenState } from "../../../commons/store";

export default function ApolloSetting(props) {
	const [accessToken,setAccessToken] =useRecoilState(accessTokenState)

	const uploadLink = createUploadLink({
			uri : "백엔드 주소",
			headers : { Authorization : "Bearer 받아온 토큰" }
		})

	return (
		<ApolloProvider client={client}>
			{props.children}
		</ApolloProvider>
	)
}
profile
윤성해
Slow and steady wins the race.
이전 포스트

[코드캠프]23-2일_TIL_로그인

다음 포스트

[코드캠프]25일차_TIL_카카오맵

0개의 댓글