S3) Unit 7. [실습] OAuth(깃허브) 사용해서 로그인 기능 구현하기

📣  깃허브 로그인 인증 사용해서 로그인 기능 구현하기

- client만 구현

𝟭. client 파일 구조

src

    ㄴ pages

        ㄴ components

            ㄴ Loading.js : 로딩 화면 컴포넌트

            ㄴ UserInfo.js : 로그인 성공 하면 나타나는 유저 정보 컴포넌트

 

        ㄴ Login.js : Authorization code 받아오기

            - Github에 요청을 보내서 Authorization code를 받아온다.

 

        ㄴ MyPage.js : 로컬 서버를 통해 Github 리소스 서버에 유저 정보 요청, 로그아웃

            -  Authorization code를 받아왔다면 App.js의 getAccessToken 함수가 실행된다.

            -  이 함수를 통해 서버의 /callback 엔드포인트로 요청을 보내고, 응답으로 받아온 Access Token은 App 컴포넌트에 state로 저장하고, MyPage 컴포넌트에서 props 받아서 사용한다.

            - 받아온 Access Token을 이용해서 /userInfo로 요청하면 serverResource와 Github Resource 서버에 요청한 리소스인 githubUserData가 응답으로 전달된다.

            - 깃허브 유저 정보와 로컬 서버에 있는 정보가 마이페이지 화면에 담겨야 한다.

            - 로그아웃 구현 : 로컬 서버의 /logout에 액세스 토큰을 이용해 요청을 보내서 유저의 토큰을 지우고, 상태를 업데이트 한다.

 

    ㄴ App.js : Access Token 받아오기

 

서버의 .env : CLIENT_ID와 CLIENT_SECRET 설정

✔️ 깃허브에 내가 구현할 OAuth 앱을 등록하는 과정이 먼저 실행되어야 한다.

➰ Homepage URL 및 Authorization callback URL은 해당 과제의 클라이언트 주소(http://localhost:3000)로 리디렉션 한다.

➰ 이 과정을 통해 CLIENT_ID와 CLIENT_SECRET을 발급받을 수 있다.

---

𝟮. 코드 구현

📌 Login.js

export default function Login() {
  const CLIENT_ID = '내 CLIENT_ID';
  // 받아온 클라이언트 ID를 가져와서 github 페이지로 들어가게 해준다.

  const loginRequestHandler = () => {
    // TODO: GitHub로부터 사용자 인증을 위해 GitHub로 이동해야 합니다. 적절한 URL을 입력하세요.
    // OAuth 인증이 완료되면 authorization code와 함께 callback url로 리디렉션 합니다.
    // 참고: https://docs.github.com/en/free-pro-team@latest/developers/apps/identifying-and-authorizing-users-for-github-apps

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

➰ CLIENT_ID 가져올 때 process.env.CLIENT_ID로 했는데 undefined가 나와서 그냥 하드코딩으로 넣어줬다.. 이렇게 하면 안되는 것 같긴한데 이따 실시간 시간에 설명해주시겠지.. -> 그냥 넣어도 상관 없다고 함

➰ 왜 process.env.CLIENT_ID가 안되냐? -> 환경 변수를 제대로 가져오지 못해서 -> 리액트에서 환경 변수를 쓰려면 .env 파일 설정할 때 REACT_APP_CLIENT_ID 로 써야함(변수 앞에 REACT_APP_ 추가해줘야한다!!)

 

📌 App.js

function App() {
  const [isLogin, setIsLogin] = useState(false);
  const [accessToken, setAccessToken] = useState('');

  const getAccessToken = async (authorizationCode) => {
    // 받아온 Authorization Code로 다시 OAuth App에 요청해서 Access Token을 받을 수 있습니다.
    // Access Token은 보안 유지가 필요하기 때문에 클라이언트에서 직접 OAuth App에 요청을 하는 방법은 보안에 취약할 수 있습니다.
    // Authorization Code를 서버로 보내주고 서버에서 Access Token 요청을 하는 것이 적절합니다.
    // TODO: 서버의 /callback 엔드포인트로 Authorization Code를 보내주고 Access Token을 받아옵니다.
    // Access Token을 받아온 후 state에 Access Token을 저장하세요
    const res = await axios.post("http://localhost:4000/callback", {
    // /callback으로 authorizationCode를 보내주고, 응답으로 Access Token을 받아온다.
      authorizationCode: authorizationCode,
    });
    setAccessToken(res.data.accessToken);
    // 받아온 액세스 토큰을 state에 넣어주고
    setIsLogin(true);
    // 로그인이 성공적으로 완료되었으니 상태도 바꿔준다.
  };
  useEffect(() => {
    // Authorization Server로부터 클라이언트로 리디렉션된 경우, Authorization Code가 함께 전달됩니다.
    // ex) http://localhost:3000/mypage?code=5e52fb85d6a1ed46a51f
    const url = new URL(window.location.href);
    const authorizationCode = url.searchParams.get('code');
    if (authorizationCode) {
      getAccessToken(authorizationCode);
    }
  }, []);
}

 

📌 Mypage.js

export default function Mypage({accessToken, setIsLogin, setAccessToken}) {
  const [githubUser, setGithubUser] = useState(null);
  const [serverResource, setServerResource] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const logoutHandler = () => {
    // TODO: /logout을 통해 사용자가 로그아웃되도록 구현하세요.
    // prop으로 받은 Access Token을 이용해 /logout 엔드포인트로 요청을 보내야합니다.
    // 요청이 성공했다면 isLogin 상태를 false로 업데이트해야 합니다.
    axios
      .delete("http://localhost:4000/logout", { data: {accessToken} })
      // 로그아웃은 서버에서 delete 메서드로 받고 있으므로 delete로 요청을 보낸다.
      .then((res) => {
        setIsLogin(false);
        setAccessToken("");
        setGithubUser(null);
        setServerResource(null);
        // 로그아웃이 성공했으므로 로그인 상태를 바꿔주고, 모두 초기화 시켜준다.
      })
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    // TODO: /userinfo를 통해 사용자 정보를 받아오세요.
    // prop으로 받은 Access Token을 이용해 /userinfo 엔드포인트로 요청을 보내야합니다.
    // 응답으로 받은 데이터를 githubUser, serverResource의 상태로 업데이트해야합니다.
    // isLoading 상태를 false로 업데이트해야 합니다.
    axios
      .post("http://localhost:4000/userInfo", { accessToken })
      // 유저 정보를 받아오기 위해서 userInfo로 요청을 보낸다.
      .then((res) => {
      // 성공적으로 유저 정보를 받아오면
        const { githubUserData, serverResource } = res.data;
        // 받아온 데이터에서 필요한 정보만 뽑아서 저장한다.
        setGithubUser(githubUserData);
        // state에 각각 저장해주고
        setServerResource(serverResource);
        setIsLoading(false);
        // 로딩을 끝내고 유저 정보를 화면에 띄워준다.
      })
      .catch((err) => console.log(err));
  }, []);
}

---

𝟯. 시연화면