노마드 코더/유튜브 클론

[JavaScript, Node.js] 유튜브 클론 정리 7장 (10) - Github Login3

LooanCheong 2023. 5. 24. 11:01
반응형

머리글

깃허브 로그인을 계속 진행해 보자.

Github Login

지난 시간 액세스 토큰을 통해 gtihub api url에 fetch를 진행했다.

하지만 user의 정보가 private 상태라면 정보를 얻을 수 없는 문제가 있었는데 이를 해결해 보자.

const apiUrl = "https://api.github.com";
    const userData = await (
      await fetch(`${apiUrl}/user`, {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    const emailData = await (
          await fetch(`${apiUrl}/user/emails`, {
            headers: {
              Authorization: `token ${access_token}`,
            },
          })
        ).json();
        const email = emailData.find(
          (email) => email.primary === true && email.verified === true
        );
        if (!email) {
          return res.redirect("/login");
        }

유저의 데이터를 얻은 방식과 동일하게 api 요청 주소를 살짝 수정해 주어 문제를 해결할 수 있었다.

얻은 이메일 정보중 primary와 verified가 전부 해당되는 이메일만을 계정으로 허용할 예정이라
해당 조건이 아닌 이메일은 다시 로그인 페이지로 돌려보냈다.

우리가 여기서 이메일에 접근이 가능한 이유는 토큰 발급 당시 이메일에 대한 정보를 scope에 요청했기 때문이다.
토큰 발급 당시 요청하지 않은 정보에 대해서는 접근이 불가능하다.

이제 최종적으로 유저의 계정을 생성해 주어 마무리해 보자.

계정 생성

찾은 정보를 바탕으로 만약 유저의 이메일 정보가 이미 존재한다면 해당 아이디로 로그인을 하고
그렇지 않다면 계정을 생성해 주어 로그인이 가능하게 만들 것이다.

...
    const existingUser = await User.findOne({ email: emailObj.email });
    if (existingUser) {
      req.session.loggedIn = true;
      req.session.user = existingUser;
      return res.redirect("/");
    } else {
      const user = await User.create({
        name: userData.name,
        username: userData.login,
        email: emailObj.email,
        password: "",
        socialOnly: true,
        location: userData.location,
      });
      req.session.loggedIn = true;
      req.session.user = user;
      return res.redirect("/");
    }

이메일 정보로 유저의 정보를 조회하고 만약 존재하는 유저라면 로그인 처리를,
그렇지 않은 유저라면 얻은 정보를 바탕으로 로그인이 가능하게 만들었다.

마무리

이번 시간에는 깃허브를 통한 로그인 과정을 마무리해보았다.

다음 시간에는 로그아웃에 대해 알아보자.

반응형