25) 42 oauth 로그인 구현

ppparkta·2023년 3월 6일
1

웹개발

목록 보기
26/26

팀 프로젝트에서 42 oauth를 사용해서 로그인을 구현해야 했다. 아직 백과 연동을 하지 않아서 미완성이지만 사용한 방법을 정리해본다.

⚒️ OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.

리다이렉트 url은 팀원분이 발급받은 상태였다. 따라서 해당 url을 프론트에서 어떻게 가공했는지에 초점을 두고 글을 작성한다.

1. 로그인 페이지 제작

사용자가 로그인 버튼을 눌렀을 때 리다이렉트 url로 보낼 수 있게 로그인 페이지를 제작했다. loginUrl 이 리다이렉트 url의 주소이다.

export default function Login(){
    const loginUrl = '';

    return (
        <>
            <h2>42ence</h2>
            <a href={loginUrl}>Log in</a>
        </>
    );
};

2. url로 전달된 인가코드 분리

리다이렉트 url에서 로그인을 했다면 미리 리다이렉트 설정해둔 라우터에 인가코드가 전달된다.

사용하려는 리다이렉트 url에서 로그인에 성공했을 때 프론트엔드에서 만든 라우터로 리다이렉트 되도록 설정했다.

따라서 해당 라우터가 최초로 로딩될 때 url로 전달되는 인가코드를 분리해서 백엔드 서버에 보내줘야 한다.

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function IsLogged() {
	const navigate = useNavigate();

  useEffect(() => {
    const url = new URL(window.location.href);
    const href = url.href;
    if (!href) return;
    const accessToken = href.split("code=")[1];
    console.log(accessToken);
    fetch("http://localhost:3001/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        code: accessToken,
      }),
    }).then((res) => {
      if (res.ok) {
        alert("로그인에 성공했습니다.");
        navigate("/");
      }
    });
  }, []);

  return <div></div>;
}

현재 페이지의 url을 변수로 받아온 뒤에 split함수를 사용해서 파싱했다. 그 값을 accessToken에 저장했다. (인가코드)

const url = new URL(window.location.href);
const href = url.href;
if (!href) return;
const accessToken = href.split("code=")[1];

페이지가 로딩될 때 딱 한번만 실행돼야 하므로 useEffect 안에 코드를 넣었다.

인가코드를 가공없이 프론트엔드에서 그대로 쓰면 보안에 문제가 될 수 있다고 한다. 그래서 인가코드를 백으로 다시 보낸 뒤에 jwt를 사용해서 토큰화 시켜야 한다.

fetch("http://localhost:3001/login", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    code: accessToken,
  }),
}).then((res) => {
  if (res.ok) {
    alert("로그인에 성공했습니다.");
    navigate("/");
  }
});

이 부분은 아직 미완성이지만, 백엔드 서버에 POST를 사용해서 인가코드를 전해주면 백에서 jwt를 사용해서 POST에 대한 return값으로 토큰을 반환한다.

이 토큰값을 localStorage에 저장해서 서버에 저장된 내용이 필요할 때마다 백엔드 서버에 보내주면 토큰을 비교해서 해당 유저의 정보를 받을 수 있다...!

추가로 해야할 것

  • 로그인 성공 여부를 전역으로 관리(성공 시 True로 변경하는 코드 추가)
  • 백에 인가코드 전달할 때 반환 값을 localStorage에 저장
  • 로그아웃은?
profile
겉촉속촉

0개의 댓글