팀 프로젝트에서 42 oauth를 사용해서 로그인을 구현해야 했다. 아직 백과 연동을 하지 않아서 미완성이지만 사용한 방법을 정리해본다.
⚒️ OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다.
리다이렉트 url은 팀원분이 발급받은 상태였다. 따라서 해당 url을 프론트에서 어떻게 가공했는지에 초점을 두고 글을 작성한다.
사용자가 로그인 버튼을 눌렀을 때 리다이렉트 url로 보낼 수 있게 로그인 페이지를 제작했다. loginUrl
이 리다이렉트 url의 주소이다.
export default function Login(){
const loginUrl = '';
return (
<>
<h2>42ence</h2>
<a href={loginUrl}>Log in</a>
</>
);
};
리다이렉트 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에 저장해서 서버에 저장된 내용이 필요할 때마다 백엔드 서버에 보내주면 토큰을 비교해서 해당 유저의 정보를 받을 수 있다...!
추가로 해야할 것