티스토리 뷰
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로 전달
- 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
이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.
'개발공부 > 🟩 Node.js' 카테고리의 다른 글
[NodeJS] Express와 MongoDB로 웹서비스 만들기 - 3 (1) (0) | 2022.08.05 |
---|---|
[NodeJS] Express와 MongoDB로 웹서비스 만들기 - 2 (2) (0) | 2022.08.05 |
[NodeJS] Express와 MongoDB로 웹서비스 만들기 - 2 (1) (0) | 2022.08.04 |
[NodeJS] Express와 MongoDB로 웹서비스 만들기 - 1 (2) (0) | 2022.08.02 |
[NodeJS] Express와 MongoDB로 웹서비스 만들기 - 1 (1) (0) | 2022.08.02 |
프론트엔드 개발자 삐롱히의 개발 & 공부 기록 블로그