Dotenv / Github Login / UrlSearchParams

1. Dotenv

 - https://www.npmjs.com/package/dotenv

dotenv

 - dotenv 패키지를 사용하여 .env 파일을 읽게하고, 각 변수들을 process.env안에 넣을거임

 - 중요한 것은 공식문서에도 나와있지만 당신의 앱 안에서 최대한 먼저 라고 되어 있음

 - 즉 우리는 init.js를 통해 초기화하므로 이 파일의 최상단에 넣어줘야함

// init.js에 둘중하나 추가
import "dotenv/config";
require('dotenv').config();

 

2. Github login

- https://docs.github.com/ko/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps

OAuth 앱 권한 부여 - GitHub Docs

 - 웹 애플리케이션 흐름을 꼭 이해해야 함

 - github의 내 프로필 > Settings > Developer Settings > OAuth Apps > New OAuth App

 - 생성이 되면, 본인의 프로젝트명을 가진 application이 생성되고 Client ID와 같은 각종 정보들이 나열되어 있음

 - 공식문서에 나와있는 순서대로 시도해보기 위해 login.pug에 a태그를 만들고 URL을 복붙함

   - parameter가 없으면 404에러가 발생

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

 - 우리는 public보다 더 많은 정보를 받고 싶으므로 scope에 추가하면 됨

   - scope에는 우리가 유저에 대해 어디까지 알 수 있느냐를 명시

 - https://docs.github.com/ko/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes

OAuth 앱에 대한 범위 - GitHub Docs

 - email을 추가하니 public>personal로 바뀜

 - a태그가 너무 불합리하므로 예쁘게 바꿀거임

 - login.pug을 수정하여 userRouter에 github 로그인 경로를 추가하고 controller 수정

export const githubLogin = (req, res) => {
  const config = {
    clientId: "Ov23liUGu6KqvNQg9k3S",
    allow_signup: false,
    scope: "read:user user:email",
  };
  const baseUrl = "https://github.com/login/oauth/authorize";
};

 - 우리가 만든 객체를 URL로 바꿔야 하는데, 인코딩하여 URL상에서도 동작하게 만들 수 있음

 

3. UrlSearchParams

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

  return res.redirect(finalUrl);
};

 - UrlSearchParams를 사용하여 예쁘게 정리한 상태

 - github 로그인을 시도하여 Authorize를 눌러보면 우리가 callback URL에 등록한 그 URL이 나옴

http://localhost:4000/users/github/finish?code=

 - github 로그인을 시도하여 Authorize를 눌러보면 우리가 callback URL에 등록한 그 URL이 나옴

 - userRouter에 /github/finish 경로를 추가하고 이후는 다음글

UrlSearchParams