Express + passport, 어렵지 않게 사용하기 1

안녕하세요 ❗️

오늘을 passport를 사용해서 로그인 구현을 해볼 예정입니다.

Passport 는 사용해본 적이 없어서 게시글도 쓸겸 만들어봤는데 재밌게 했어요 〰️ 

궁금하지 않으셨나요❓

"소셜로그인 구현은 어떻게 하는 거지?"

 

passport는 서버의 기본적인 지식이 있어야 구현하는데 어려움없을 거에요,

하지만, 반대로 서버와 express 이 조금 어려운 분들은 passport는 아마 도전이지 않을까 싶네요.

오늘 한 번 같이 해봅시다 🔥

코드는 깃 허브에 올려두었으니 참고하셔도 좋습니다 !

 

*****************  INDEX  *****************

 

🚀 passport 사용 설정 만들기

🎯 passport로 local-login 구현하기

🖍 passport로 social-login 구현하기

 

******************************************** 

---

 

🚀 passport 사용 설정 만들기

자 이제부터 사용 설정을 같이 해볼게요 🔥어렵지 않아요 ❗️ 같이 할 수 있습니다. 

먼저 express 프로젝트 만들어 줍니다. 잘모르신다면 'Express, 어렵지 않게 사용하기' 네 번째 섹션에 있으니 참고 해주세요 〰️

 

$ express passport-project
$ cd passport-project
$ npm install

 

위와 같은 명령어를 사용하여 프로젝트를 생성합니다. passport-project 는 제가 정한 프로젝트 이름이기 때문에 자신이 사용하고 싶은 프로젝트 이름을 사용하셔도 됩니다.

 

이번엔, passport 모듈들을 설치해보도록 하겠습니다.

 

$ npm install passport passport-local passport-facebook

 

세 개의 모듈을 설치했습니다.

이름을 보고 느낌이 왔으면 좋겠네요.

local은 기본 로그인을 구현할 때 사용할 것이고, facebook은 소셜로그인을 할 때 사용할 예정입니다.

 

설치가 끝났나요?

이번엔 app.js에서 passport 사용을 제대로 시작해보겠습니다.

 

let passport = require('passport');

// ...

var app = express();

// ...

app.use(passport.initialize());
app.use(passport.session());

// ...

module.exports = app;

 

 

그럼 설정이 끝났네요 😆 간단하죠? 이제부터는 코드를 작성해보도록할게요!

 

 

 

🎯 passport로 local-login 구현하기

 

먼저 api를 정리하면 아래와 같습니다.

Verb	Path	Use for
POST	/auth/login	기본 로그인 기능 구현
POST	/auth/facebook	페이스북 로그인 구현

 

이제부터 할 일이 많으니, 흐름을 정하고 진행해보도록 하겠습니다.

1. routes 설정

2. Strategy 설정

3. app.js에서 passport.js 부르기

 

 

 

1. routes 설정

지금부터 routes를 설정해보겠습니다.

routes/auth.js를 생성하여 그 내부에 routing을 구현할거에요❗️

routes/auth.js

위와 같은 코드를 작성해주었어요. 

6줄 ~ 9줄은 조금 생소할 수도 있는데요. 공식 문서 를 참고하여 주석을 읽으면 금방이해가실거에요 ❗️

 

local strategy란 무엇일까요? 로그인을 하는 로직이 담겨있는 전략법이라는 느낌으로 이해하시면 될 거에요.

소셜로그인을 할 때에도 facebook strategy을 사용하여 로그인을 하게될 건데요. 페이스북에 로그인을 하는 전략이 담겨있다는 의미입니다. 

failureFlash 은, 로그인에 성공하거나 실패했을 때 해당하는 메세지가 나오게끔 만드는 건데, 이 포스팅에서는 따로 담지 않겠습니다 🤣

 

2. Strategy 설정

저는 services/passport.js를 생성해서 Strategy를 설정하려고 합니다.

controller에 둘지 modules에 둘지 service에 넣을지 고민을 많이 했는데 결국 services에 두게 되었는데 아직도 고민이 됩니다🤣

 

기본적으로 username, password를 요청으로 받는데, 이름은 passport가 정해둔 약속입니다 〰️ 

done은 끝났다는 의미인데, 실제로 끝나고 나서의 결과값을 반환할 예정입니다.

이 안에는 username, password를 받은 다음 실행할 로직을 적어주시면 됩니다.

 

이제부터 database에 접근을 해서

✔️ 성공 : user가 존재하면 done을 이용해 user를 반환하고

✔️ 실패 : user가 존재하지 않거나 비밀번호 오류라면 done을 이용해 에러 메세지를 반환할 예정입니다.

 

 

내부에 로그인을 하고 나서 user가 존재하는지, password가 유효한지 검사하는 로직을 구현했습니다. 

내부 로직은 따로 설명하지 않겠습니다. 

 

이 포스팅을 passport 사용법에 대한 내용에 초점을 맞추기 때문에

로그인 로직을 구현할 때 필요한 Database 접근 내용에 대한 설명은 생략하겠습니다.

 

이제 serializeUser, deserializeUser에 대한 설명을 드릴텐데요 ❗️ 

local strategy 내부의 로직을 실행하고 나면, done이 마지막으로 실행되는데요.

done의 두 번째 인자가 false가 아니라면 passport.serializeUser가 실행되게끔 passport에서 약속을 만들어두었습니다.

 

그렇다면 deserializeUser은 어떤 것일까요❓ 

나중에 다시 해당 페이지에 접근하게 되면 serializeUser 내부에서 done 의 두 번째 인자가 

deserializeUser의 첫 번째 인자로 넘어오게 됩니다. 

session을 유지하기 위한 방법이겠죠? 

 

헷갈릴까봐 주석처리로 설명 달아두었습니다. 이해가 가길 바랄게요 🙌🏻

 

3. app.js에서 passport.js 부르기

이제 마지막으로 app.js 에서 passport.js가 만들어져있단 사실을 알아야겠죠❓

 

const passportLocal = require('./services/passport');
passportLocal;

 

app.js에 추가해주세요 〰️

테스트를 해보기 전에 routes/auth.js를 다시 한 번 살펴볼게요.

 

successRedirection에 해당하는 부분이 없어서 17줄 ~ 21줄을 추가해주었습니다.

 

 

postman으로 요청을 해보니 정상적으로 데이터가 잘 넘어오는 것을 확인할 수 있습니다❗️ 

만약, 통신을 하는 과정에서 Error validating client secret 에러가 뜬 다면 깃 허브 Issue 에 올려두었으니 참고하세요❗️

 

그럼, 로컬 로그인을 여기까지 포스팅을 마치도록 하겠습니다.

다음 포스팅에서는 소셜로그인을 하는 법을 알아보도록 해요.