티스토리 뷰

개발공부/🟩 Node.js

[NodeJS] Express와 MongoDB로 웹서비스 만들기 - 3 (2)

2022. 8. 5. 23:14

 

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

 

 

 

 OAuth 

 

▶ OAuth 란?

 

Open Authorization

:  서비스 제공자가 다른 서비스에게 데이터를 제공하기 위해 서비스 사용자에게 제공하는 사용자 인증방식의 표준

 

 

 

▶ OAuth의 동작방식

 

서비스 제공자에게 인증 요청  →  인증 완료 후 사용자 정보를 요청한 서비스로 전달

→  인증 정보를 이용해 서비스 제공자의 데이터 사용

 

ex)  구글 캘린더 연동 서비스를 만든다고 가정하면,

구글 OAuth 인증 요청  →  인증된 OAuth Token을 기록  →  OAuth Token을 사용하여 구글 캘린더 API 사용

 

 

 

 

▶ OAuth와 로그인

 

-  OAuth는 사용자의 인증을 제공하는 표준

-  이를 활용하여 로그인 기능을 간편하게 구성 가능

→  웹 서비스 제공자  :   아이디, 비밀번호 로그인을 구현할 필요 없음

→  웹 서비스 사용자  :  로그인 시 아이디, 비밀번호를 입력할 필요 없음

 

 

 

 

 

 

 구글 로그인 구현하기 

 

▶ 구글 로그인을 구현하려면

 

1)  구글 클라우드 플랫폼 프로젝트 생성

2)  [API 및 서비스] 메뉴에서  OAuth 동의화면 설정

3)  [사용자 인증정보] 에서  OAuth 클라이언트 ID 만들기

4)  passport-google-oauth20 연동

 

 

 

▶ passport-google-oauth20

 

:  passport-strategy 인터페이스의 구글 로그인 구현체

 

OAuth 인증을 구현하기 위해서는 인증 요청, 데이터 수신 등의 복잡한 작업 필요

→  passport-google-oauth20 는 손쉽게 구글 OAuth 2.0을 구현해 주는 패키지

 

 

 

1)  passport-google-oauth20 작성

 

-  구글 로그인이 완료된 후 결과를 전달받는 부분

-  OAuth 클라이언트 설정값 및 완료 결과를 전달받을 callbackURL을 config로 설정

-  accessToken, refreshToken은 다른 구글 API들을 사용하기 위한 토큰 (본 프로젝트에서는 사용하지 않음)

-  profile은 전달받은 유저 정보  →  이를 이용해 유저를 생성하거나 OAuth 정보를 업데이트

const GoogleStrategy = require('passport-google-oauth20').Strategy;

const config = {
    clientID: 'clientID',
    clientSecret: 'clientSecret',
    callbackURL: 'callbackUrl',
};

...
new GoogleStrategy(config, (accessToken, refreshToken, profile, done) => {
	const { email, name } = profile._json;
	..
	// create or update user

 

 

 

2)  passport-google-oauth20 사용

 

-  "/auth/google" 접근 시 자동으로 구글 로그인 페이지로 이동

-  로그인 완료 후 로그인 정보를 "/auth/google/callback"으로 전달 (config에 설정된 주소)

-  전달받은 데이터는 strategy에서 처리 처리가 완료되면 request handler 실행

passport.use(google);

---
router.get('/google', passport.authenticate('google', { 
	scope: ['profile', 'email'] 
}));

router.get('/google/callback', passport.authenticate('google', { 
	failureRedirect: '/login' 
}), (req, res, next) => {
	res.redirect('/');
});

 

"/auth/google"로 link 시 passport가 자동으로 구글 로그인 페이지로 이동 시켜 주고,

로그인 결과를 "/auth/google/callback"으로 전달

...
td: a(href="/auth/google") 구글로 로그인하기

 

 

 

 

 

 

 

 + 추가)  Nginx 사용하기 

 

▶ Nginx 란?

 

-  최근 신규 프로젝트에서 가장 많이 채택되고 있는 웹 서버 소프트웨어

-  웹 서버 소프트웨어  :  HTTP 요청을 받아 파일이나 프로그램 실행 결과를 HTTP 응답으로 보내주는 소프트웨어

 

 

 

▶ Nginx를 사용하는 이유

 

Java - Tomcat, PHP - fastcgi 등 다른 언어가 HTTP 요청을 처리를 위한 의존성이 있는 것에 반해

Node.js 는 기본적으로 HTTP 요청을 수신하고, 응답하는 기능이 이미 구현되어 있음

→  웹 서버 소프트웨어 없이도 스스로 동작 가능

 

하지만,

HTTPS, 도메인 연결, static file caching 등의 기능을 사용하기 위해 Nginx 같은 웹 서버 소프트웨어는 필수

→  Node.js 단독으로 production-level 서비스를 구축할 수는 없음

 

 

 

▶ Nginx + Node.js

 

-  Nginx의 reverse-proxy 기능을 사용해 Node.js와 Nginx를 연결할 수 있음

-  reverse-proxy는  HTTP 요청을 다른 서버에 전달하는 기능

-  Nginx가 HTTP 요청을 받아, 설정된 내용에 해당하는 요청만 Node.js로 전달

 

이미지출처 : 엘리스 Node.js와 MongoDB Ⅱ - 04 Express.js와 MongoDB로 웹서비스 만들기3 강의자료

 

 

 

-  http://www.example.com으로 접속한 모든 요청을 localhost:3000으로 전달하는 설정 파일

-  HTTPS, file caching들의 작업은 Nginx의 설정 방법을 참고하여 추가 가능

server {
    listen 80;
    server_name www.example.com;
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
    }
}

 

참고)  Nginx - Full Example Configuration

 

Full Example Configuration | NGINX

Full Example Configuration nginx.conf user www www; ## Default: nobody worker_processes 5; ## Default: 1 error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096; ## Default: 1024 } http { include conf/mime.

www.nginx.com

 

 

 


 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.

반응형
프로필사진
개발자 삐롱히

프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그