IM-SPRINT-AUTH-OAUTH, server 쪽 구현하기

 

OAuth 2.0이란? OAuth는 언제 왜 사용할까?

지난 블로그에도 정리해두었던 것 처럼 Oauth는 웹이나 앱에서 흔히 찾아볼 수 있는 소셜 로그인 인증방식이다. 이번에는 깃허브에서 제공하는 OAuth를 이용해 스프린트를 진행해보았다. 이 스프린트도 한줄한줄 정리해보면서 개념을 정리해 보았다.

 

💡server-oauth/controller/callback.js

 

✓ 다시 한 번 정리해보는 axios

: Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

HTTP요청 취소 및 요청과 응답을 JSON 형태로 자동으로 변경해주며, 브라우저 호환성이 뛰어나다.

 

Axios의 기본 형태

axios
        .post(
            {
                name: 'user'
            },
        )
        .then((response) => {
            console.log(response.data);
        });
        .catch((err) => {
            console.log(err);
        });

 

// dotenv는 환경변수를 .env 파일에 저장하고 process.env로 로드하는 의존성 모듈이다.
require("dotenv").config();

// 환경설정에 저장해둔 CLIENT_ID와 CLIENT_SECRET 정보 가져옴.
const clientID = process.env.GITHUB_CLIENT_ID;
const clientSecret = process.env.GITHUB_CLIENT_SECRET;

// axios란 node.js와 브라우저를 위한 Promise 기반 HTTP client 라이브러리이다.
// HTTP 비동기 통신 라이브러리
const axios = require("axios");

module.exports = (req, res) => {
    // req의 body로 authorization code가 들어옵니다. console.log를 통해 서버의 터미널창에서 확인해보세요!
    console.log(req.body);

    // TODO : 이제 authorization code를 이용해 access token을 발급받기 위한 post 요청을 보냅니다. 다음 링크를 참고하세요.
    // https://docs.github.com/en/free-pro-team@latest/developers/apps/identifying-and-authorizing-users-for-github-apps#2-users-are-redirected-back-to-your-site-by-github
    // HTTP 비동기 통신 라이브러리 사용.
    axios
        .post("https://github.com/login/oauth/access_token", {
            client_id: clientID,
            client_secret: clientSecret,
            code: req.body.authorizationCode,
        })
        .then((response) => {
            console.log(response.data);
            res.status(200).json({
                accessToken: response.data.access_token,
            });
        })
        .catch((err) => {
            console.log(err);
        });
};

 

💡server-oauth/controller/image.js

 

// 이미지 블러오기
const images = require("../resources/resources");

module.exports = (req, res) => {
    // TODO : Mypage로부터 access token을 제대로 받아온 것이 맞다면, resource server의 images를 클라이언트로 보내주세요.
    const accessToken = req.headers.authorization;
    //토큰은 클라이언트의 요청 내 헤더에 담겨서 옴.
    if (!accessToken) {
      // 토큰 없으면 에러 전달
        res.status(403).send({
            message: "no permission to access resources",
        });
    } else {
      //토큰 있으면 이미지 전달.
        res.status(200).json({
            images,
        });
    }
};