[반딧불반] Cookie, Session, Token, OAuth2.0

🦋 Cookie/Session 튜토리얼

1. 로그인 버튼 클릭 : 서버로 로그인 요청 axios
1.1 axios : fetch대신 확장성 좋은 프론트앤드ㅡ백앤드 통신도구

    return axios
      .post('http://localhost:4000/login', { loginInfo, checkedKeepLogin 		})
      .then((res) => {
        setIsLogin(true);
        setUserInfo(res.data);
      })
      .catch((err) => {
        if (err.response.status === 401) {
          setErrorMessage('로그인에 실패했습니다.');
        }
      });

2. 요청을 처리해서 응답

    res.cookie('cookieId', userInfo.id, cookieOptions); // Expires 옵션이 없는 Session Cookie
    res.redirect('/userinfo');

4. Mypage 표시

module.exports = (req, res) => {
  const cookieId = req.cookies.cookieId;
  const userInfo = { ...USER_DATA.filter((user) => user.id === cookieId)[0] };
  if (!cookieId || !userInfo.id) {
    res.status(401).send('Not Authorized');
  } else {
    delete userInfo.password;
    res.json(userInfo);
  }
};

5. 로그아웃 요청

  const logoutHandler = () => {
    return axios
      .post('http://localhost:4000/logout')
      .then((res) => {
        setUserInfo(null);
        setIsLogin(false);
      })
      .catch((err) => {
        alert(err);
      });
  };

🦋 Token 튜토리얼

1. AccessToken검증

    let result = {
      accessToken: sign(payload, process.env.ACCESS_SECRET, {
        expiresIn: '1d', // 1일간 유효한 토큰을 발행합니다.
      }),
    };
	return result;

2. RefreshToken

  const refreshToken = req.cookies['refresh_jwt'];
  if (refreshToken) {
    res.clearCookie('refresh_jwt', {
      domain: 'localhost',
      path: '/',
      sameSite: 'none',
      secure: true,
    });
  }

3. RefreshToken 검증

  if (refreshToken) {
    res.cookie('refresh_jwt', refreshToken, {
      domain: 'localhost',
      path: '/',
      sameSite: 'none',
      httpOnly: true,
      secure: true,
      expires: new Date(Date.now() + 24 * 3600 * 1000 * 7), // 7일 후 소멸되는 Persistent Cookie
    });
  }

🦋 OAuth 2.0

2. 로그인

  const loginRequestHandler = () => {
    return window.location.assign(
      `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}`
    );
  };

5. /callback + Authorization code

  const getAccessToken = async (authorizationCode) => {
    try {
      const result = await axios.post('http://localhost:4000/callback', {
        authorizationCode,
      });
      const { accessToken } = result.data;
      setIsLogin(true);
      setAccessToken(accessToken);
    } catch (err) {
      alert(err);
    }
  };

9. 로그인 처리, userinfo로 사용자 정보 받아오기

  useEffect(() => {
    axios
      .post('https://localhost:4000/userinfo', { accessToken })
      .then((res) => {
        setIsLoading(true) //loading indicator 켜고 시작
      
        const {githubUserData, serverResource} = res.data; 
        setGithubUser(githubUserData) 
        setServerResource(serverResource)
      
        setIsLoading(false) //loading indicator 종료
      })
      .catch((err) => console.log(err))
  }, []);