📝 오늘 한 것

1. github 로그인 구현하기

2. scope / URLSearchParams / node-fetch / access token

📚 배운 것

user authentication - 로그인

1. github 로그인 구현하기

Authorizing OAuth Apps 참고

💡 web application flow

📌 user가 GitHub 신원을 요청하도록 리디렉션된다.
📌 user가 앱을 승인하면 GitHub에 의해 다시 웹 사이트로 리디렉션된다.
📌 앱이 user의 access token을 이용해 API에 액세스한다.

먼저, github - developer settings 中 OAuth apps에서 Wetub라는 이름의 OAuth 앱을 만들어야 한다.
그 중에서 Authorization callback URL이란 user가 앱을 승인했을 때 github가 user를 redirect 시키는 url을 말한다.

앱을 만든 후 client ID를 확인할 수 있다.

1) github로 user를 redirect

(1) 앱 승인 링크 만들기

GET https://github.com/login/oauth/authorize

Authorizing OAuth Apps의 안내를 참고해 login.pug 파일에서 github에서 주는 url로 연결되는 링크를 만든다.
그러나 아래 링크만으로는 클릭 시 404 에러가 뜬다.

//- login.pug

li
  a(href="https://github.com/login/oauth/authorize") Continue with Github →

(2) 파라미터 추가

client_id (필수)

url 끝에 Wetube 웹 사이트의 client_id 파라미터를 추가한 후 다시 링크를 클릭하면 (이미 github에 로그인 되어 있는 user의 경우) Wetube 웹 사이트를 승인할 것인지 묻는 페이지가 나온다.
승인하기를 클릭하면 Wetube는 해당 user의 신원과 프로필 등의 public 데이터를 얻을 수 있다.

li
  a(href="https://github.com/login/oauth/authorize?client_id=79a813159e30dd338d2b") Continue with Github →

scope

Scopes for OAuth Apps - Available scopes 참고

user의 private 데이터까지 얻어오기 위해서는 scope 파라미터를 이용해야 한다.
이를 이용해 user로부터 얼마나 많은 정보를 가져올 것인지 설정할 수 있다.
scope 목록은 공백으로 구분하여 적을 수 있다.

li
  a(href="https://github.com/login/oauth/authorize?client_id=79a813159e30dd338d2b&scope=read:user user:email") Continue with Github →

allow_signup

기본값은 true이므로 user가 github 계정이 없다면 gihub 계정을 생성할 수 있는 링크가 표시된다.
false 값을 주면 표시되지 않는다.

li
  a(href="https://github.com/login/oauth/authorize?client_id=79a813159e30dd338d2b&scope=read:user user:email&allow_signup=false") Continue with Github →

💡 user의 github 신원 요청하기

url에 기반한다

📌 소셜 앱에 주는 url을 받아 링크를 만든다
📌 그 url에 소셜 앱이 주는 id를 적는다 (필수)
📌 그 외 scope(permission) 등의 파라미터를 추가한다

(3) URLSearchParams

그러나, 이렇게 작성하면 해당 링크가 필요한 곳에 매번 긴 url을 복붙해야 하고 추후 수정도 어렵다.
코드를 개선하기 위해 링크의 url을 바꿔준 후 해당 route와 startGithubLogin 컨트롤러를 추가했다.

//- login.pug

a(href="/users/github/start") Continue with Github →

// userRouter.js
import { startGithubLogin } from "../controllers/userController";

userRouter.get("/github/start", startGithubLogin);

config object에 파라마터 이름과 값들을 담는다.
new URLSearchParams(config).toString()를 이용해 config object를 파라미터 형태로 바꿀 수 있다.

export const startGithubLogin = (req, res) => {
  const baseUrl = "https://github.com/login/oauth/authorize";
  const config = {
    client_id: "79a813159e30dd338d2b",
    allow_signup: false,
    scope: "read:user user:email"
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  return res.redirect(finalUrl);
};

2) user를 웹 사이트로 다시 redirect

user가 github의 앱 승인 페이지에서 승인하기를 클릭하면, github는 Authorization callback URL로 user를 redirect 시킨다.
이때 그 url에 code를 함께 보내는데 이를 access token으로 바꿔 github API에 접근함으로써 user에 대한 정보를 가져올 수 있다.
먼저 github가 준 code를 access token으로 바꿔야 한다.

일단은 Authorization callback URL을 route에 추가하고 finishGithubLogin 컨트롤러도 추가한다.
아직은 아무 응답도 해주지 않은 상태이다.

// userRouter.js
userRouter.get("/github/finish", finishGithubLogin);

// userController.js
export const finishGithubLogin = (req, res) => {};

(1) .env 파일에 파라미터 추가

아래의 url로 client_id, client_secret, code와 함께 POST request를 보내야 한다.

POST https://github.com/login/oauth/access_token

client_id는 중복하여 사용되기 때문에 어디서든 쓸 수 있도록 .env 파일에 추가해 사용하도록 한다.
client_secret은 코드에 포함되어서는 안되기 때문에 .env 파일에 추가해 사용하도록 한다.
code는 github가 주는 code로서 url에 표시된다. req.query.code를 통해 얻을 수 있다.

GH_CLIENT=sf2ls315ddwg2gj38d2a
GH_SECRET=fdfd2f325dfdfdf1dfdfd

(2) fetch()를 이용해 POST request 보내기

finishGithubLogin 컨트롤러를 수정

fetch를 이용하면 실제로 url에 방문하지 않고도 그로부터 데이터를 가져올 수 있다. [TIL] 211108 참고

// userController.js
export const finishGithubLogin = async (req, res) => {
  // finalUrl을 만듦 ❗
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };
  const params = new URLSearchParmas(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  // finalUrl로부터 데이터를 가져옴 ❗ (finalUrl에 POST request를 보냄)
  const data = await fetch(finalUrl, {
    method: "POST",
    headers: { // github로부터 json을 return 받기 위해 추가해야 함
      Accept: "application/json",
    },
  });
  // 그 데이터를 json 형식으로 바꿈 ❗
  const json = await data.json();
  return res.send(JSON.stringify(json)); // 브라우저에서 확인하기 위해 임시로 작성한 코드
};

그런데 fetch는 기본적으로 프론트엔드에서 사용이 가능한 함수이므로 백엔드에서 fetch를 사용할 수 있도록 추가로 설정을 해야 한다.

node-fetch 설치

fetch를 설치한 후 userController.js 파일에서 fetch 라는 이름으로 import 한다.
최신 버전으로 설치하면 에러가 뜬다. 2.6.1 버전으로 설치할 것.

$ npm i node-fetch@2.6.1

// userController.js
import fetch from "node-fetch";

이제 login 페이지에서 'Continue with Github →'를 클릭하면, 화면에 아래와 같이 뜬다.
github 백엔드로 POST 요청을 보내 access_token을 얻게 된 것이다.

{
access_token: "sho_sdfwdBJhosd7kgIp5Usfl30swRUsHEwpJ9df",
token_type: "bearer",
scope: "read:user,user:email"
}

3) access token으로 github API에서 user 정보 가져오기

access token으로 github API를 사용해 user에 대한 정보를 가져올 수 있다.

github API url에 GET request를 보내면서 인증을 위해 access_token을 보내면, url로부터 user에 대한 정보를 받아올 수 있다.

Authorization: token OAUTH-TOKEN
GET https://api.github.com/user

먼저, json object에 'access_token'이 있을 때와 없을 경우와 없을 경우를 나누어 finishGithubLogin 컨트롤러를 다음과 같이 수정한다.

+await 안에 await을 넣는 형태로 코드를 수정했다.

// userController.js
export const finishGithubLogin = async (req, res) => {
  // finalUrl을 만듦
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.GH_CLIENT,
    client_secret: process.env.GH_SECRET,
    code: req.query.code,
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  // finalUrl로부터 데이터를 가져옴 (finalUrl에 POST request를 보냄)
  // 그 데이터를 json 형식으로 바꿈
  const tokenRequest = await (
    await fetch(finalUrl, {
      method: "POST",
      headers: {
        Accept: "application/json",
      },
    })
  ).json();
  // access token을 이용해 github API에 접근해 user에 대한 정보를 가져옴
  if ("access_token" in tokenRequest) {
    const { access_token } = tokenRequest;
    const userData = await (
      await fetch("https://api.github.com/user", {
        headers: {
          Authorization: `token ${access_token}`,
        },
      })
    ).json();
    console.log(userData); // user 정보 확인을 위해 임시로 작성한 코드
  } else {
    return res.redirect("/login");
  }
};

이제 login 페이지에서 'Continue with Github →'를 클릭하면, 콘솔 창에 github가 가지고 있는 user에 대한 정보(public 데이터)가 뜬다.

그런데, 우리가 필요한 email은 값이 null이라고 뜬다.
이를 대비하여 또 다른 request를 만들어야 한다.

💡 github에서 user의 email 정보 가져오기

github - reference - Users - Emails 참고

user의 email을 가져오기 위해 get request를 어떤 url로 보내야 할지는 위 사이트를 참고해 알 수 있다.
당연히 똑같은 access_token을 사용한다.
github API url에서 반복되는 부분은 변수로 만들어주었다.

// access token을 이용해 github API에 접근해 user에 대한 정보를 가져옴
if ("access_token" in tokenRequest) {
  const { access_token } = tokenRequest;
  const apiUrl = "https://api.github.com";
  // public 데이터
  const userData = await (
    await fetch(`${apiUrl}/user`, {
      headers: {
        Authorization: `token ${access_token}`,
      },
    })
  ).json();
  // private 데이터 (中 email)
  const emailData = await (
    await fetch(`${apiUrl}/user/emails`, {
      headers: {
        Authorization: `token ${access_token}`,
      },
    })
  ).json();
  console.log(userData, emailData); // user 정보 확인을 위해 임시로 작성한 코드
} else {
  return res.redirect("/login");
}

이제 login 페이지에서 'Continue with Github →'를 클릭하면, 콘솔 창에 user에 대한 public 데이터와 private email 데이터가 모두 뜬다.

한편, 그 중에서 verified이면서 primary인 email을 찾아야 한다.
이를 모두 만족하는 email이 없다면 user를 login 페이지로 돌려보낸다.

const email = emailData.find(email => email.primary === true && email.verified === true);
if (!email) {
  return res.redirect("/login");
}

이제 email을 가져다 쓸 수 있다.

그러나, 아직도 생각해줘야 할 것들이 남아 있다.
웹 사이트에서 email과 password를 입력해 이미 계정을 생성한 user가 github로 로그인하려고 할 때 어떻게 할 것인가
등의 문제를 해결해야 한다.

✨ 내일 할 것

1. user authentication 파트 마무리

2. user 파트 처음부터 끝까지 다시 구현해보기