[Node.js 교과서] #35. 익스프레스로 SNS 서비스 만들기 - Passport 모듈로 로그인 구현하기

Passport 모듈로 로그인 구현하기

SNS 서비스이므로 로그인이 필요하다. 회원가입과 로그인은 직접 구현할 수도 있지만, 세션과 쿠키 처리 등 복잡한 작업이 많으므로 검증된 모듈을 사용하는 것이 좋다. 바로 Passport를 사용하는 것이다. 이름처럼 우리의 서비스를 사용할 수 있게 해주는 여권 역할을 한다.

요즘에는 서비스에 로그인을 할 때 아이디와 비밀번호를 입력해서 하지 않고 구글, 페이스북, 카카오톡 같은 기존의 SNS 서비스 계정으로 로그인하기도 한다. 이 또한 Passport를 사용해서 해결할 수 있다. 

1. Passport 관련 패키지 세팅하기

1-1. Passport 관련 패키지들을 설치한다.

 

npm i passport passport-local passport-kakao bcrypt

 

1-2. Passport 모듈을 미리 app.js와 연결하기

 

app.js

 

• require('./passport') : require('./passport/index.js')와 같다. 폴더 내의 index.js 파일은 require 시 이름을 생략할 수 있다.

 

app.js

 

• passport.initialize() : 요청(req 객체)에 passport 설정을 심는다.
• passport.session() : req.session 객체에 passport 정보를 저장한다.
  • req.session 객체는 express-session에서 생성하는 것이므로 passport 미들웨어는 express-session 미들웨어보다 뒤에 연결해야 한다.

 

1-3. Passport 모듈 작성하기

 

passport\index.js

 

• localStrategy와 kakaoStrategy : 로컬 로그인과 카카오 로그인 전략에 대한 파일이다. Passport는 로그인 시의 동작을 전략(strategy)이라는 용어로 표현하고 있다.
• passport.serializeUser() : req.session 객체에 어떤 데이터를 저장할지 선택한다. 매개변수로 user를 받아 done 함수에 두 번째 인자로 user.id를 넘기고 있다. done 함수의 첫 번째 인자는 에러 발생 시 사용하는 것이므로 두 번째 인자가 중요하다. 
  • 세션에 사용자 정보를 모두 저장하면 세션의 용량이 커지고 데이터 일관성에 문제가 발생하므로 사용자의 아이디만 저장하라고 명령한 것이다.
• passport.deserializeUser() : 매 요청 시 실행된다. passport.session() 미들웨어가 이 메서드를 호출한다. 좀 전에 serializeUser에서 세션에 저장했던 아이디를 받아 데이터베이스에서 사용자 정보를 조회한다. 조회한 정보를 req.user에 저장하므로 앞으로 req.user를 통해 로그인한 사용자의 정보를 가져올 수 있다.

 

 

즉, serializeUser는 사용자의 정보 객체를 세션 아이디로 저장하는 것이고, deserializeUser는 세션에 저장한 아이디를 통해 사용자 정보 객체를 불러오는 것이다. 세션에 불필요한 데이터를 담아두지 않기 위한 과정이다.

 

전체 과정은 다음과 같다.

1. 로그인 요청이 들어옴
2. passport.authenticate 메서드 호출
3. 로그인 전략 수행
4. 로그인 성공 시 사용자 정보 객체와 함께 req.login 호출
5. req.login 메서드가 passport.serializeUser 호출
6. req.session에 사용자 아이디만 저장
7. 로그인 완료

 

다음은 로그인 이후의 과정이다.

1. 모든 요청에 passport.session() 미들웨어가 passport.deserializeUser 메서드 호출
2. req.session에 저장된 아이디로 데이터베이스에서 사용자 조회
3. 조회된 사용자 정보를 req.user에 저장
4. 라우터에서 req.user 객체 사용 가능

2. 로컬 로그인 구현하기

로컬 로그인이란 다른 SNS 서비스를 통해 로그인하지 않고, 자체적으로 회원가입 후 로그인하는 것을 의미한다. 즉, 아이디/비밀번호 또는 이메일/비밀번호를 통해 로그인하는 것이다. Passport에서 이를 구현하려면 passport-local 모듈이 필요하다. 이미 설치했으므로 로컬 로그인 전략만 세우면 된다. 로그인에만 해당하는 전략이므로 회원가입은 따로 만들어야 한다.

회원가입, 로그인, 로그아웃 라우터를 먼저 만들어보자. 이러한 라우터는 접근 조건이 있다. 로그인한 사용자는 회원가입과 로그인 라우터에 접근하면 안 된다. (이미 로그인을 했기 때문에) 마찬가지로 로그인하지 안흔 사용자는 로그아웃 라우터에 접근하면 안 된다. 따라서 라우터에 접근 권한을 제어하는 미들웨어가 필요하다.

 

 

Passport는 req 객체에 isAuthenticated 메서드를 추가한다. 로그인 중이면 re.isAuthenticated()가 true이고, 아니면 false이다. 따라서 로그인 여부를 이 메서드로 파악할 수 있다. 라우터 중에 로그아웃 라우터나 이미지 업로드 라우터 등은 로그인한 사람만 접근할 수 있게 해야 하고, 회원가입 라우터나 로그인 라우터는 로그인하지 않은 사람만 접근할 수 있게 해야 한다. 이럴 때 라우터에 로그인 여부를 검사하는 미들웨어를 넣어 걸러낼 수 있다.

isLoggedIn과 isNotLoggedIn 미들웨어를 만들었다. 이 미들웨어가 page 라우터에 어떻게 사용되는지 보자.

 

routes\page.js

 

router.get('/profile', isLoggedIn ··· : 자신의 프로필은 로그인을 해야 볼 수 있으므로 isLoggedIn 미들웨어를 사용한다. req.isAuthenticated()가 true여야 next()가 호출되어 res.render가 있는 미들웨어로 넘어갈 수 있다. false라면 로그인 창이 있는 메인 페이지로 리다이렉트 된다.

router.get('/join', isNotLoggedIn ··· :  회원가입 페이지는 로그인을 하지 않은 사람에게만 보여야 한다. 따라서 isNotLoggedIn 미들웨어로 req.isAuthenticated()가 false일 땜낭 next()를 호출하도록 하였다. 

 

로그인 여부로만 미들웨어를 만들 수 있는 것이 아니라 팔로잉 여부, 관리자 여부 등의 미들웨어를 만들 수 있으므로 다양하게 활용할 수 있다. res.render 메서드에서 user 속성에 req.user를 넣은 것을 주목하자. pug에서 user 객체를 통해 사용자 정보에 접근할 수 있게 되었다.

 

이제 회원가입, 로그인, 로그아웃 라우터를 작성해보자.

 

routes\auth.js

 

• 나중에 app.js와 연결할 떄 /auth 접두사를 붙일 것이므로 라우터의 주소는 각각 /auth/join, /auth/login, /auth/logout이 된다.
• router.post('./join', isNotLoggedIn, ··· : 회원가입 라우터이다. 기존에 같은 이메일로 가입한 사용자가 있는지 조회한 뒤, 있다면 flash 메시지를 설정하고 회원가입 페이지로 되돌려보낸다. 없다면 비밀번호를 암호화하고 사용자 정보를 생성한다. 회원가입 시 비밀번호는 암호화해서 저장해야 한다. 이번에는 bcrypt 모듈을 사용했다. 
• router.post('/login', isLoggedIn, ··· : 로그인 라우터이다. passport.authenticate('local') 미들웨어가 로컬 로그인 전략을 수행한다. 미들웨어인데 라우터 미들웨어 안에 들어 있다. 미들웨어에 사용자 정의 기능을 추가하고 싶을 때 보통 이렇게 한다. 이럴 때는 내부 미들웨어에 (req, res, next)를 인자로 제공해서 호출하면 된다.
• router.get('/logout', isLoggedIn, ··· : 로그아웃 라우터이다. req.logout 메서드는 req.user 객체를 제거하고, req.session.destroy는 req.session 객체의 내용을 제거한다. 세션 정보를 지운 후 메인 페이지로 되돌아 간다.

 

passport\loginStrategy.js

 

• new LocalStrategy() 첫 번째 인자 : 전략에 관한 설정을 하는 곳이다. usernameField와 passwordField에 일치하는 req.body의 속성명을 적어주면 된다. req.body.email에 이메일이, req.body.password에 비밀번호가 담겨 들어오므로 email과 password를 각각 넣어주었다.
• new LocalStrategy() 두 번째 인자 : 실제 전략을 수행하는 async 함수이다. 위에서 넣어준 email과ㅏ password는 async 함수의 첫 번째와 두 번째 매개변수가 된다. 세 번째 매개변수인 done 함수는 passport.authenticate의 콜백 함수이다.

 

먼저 사용자 데이터베이스에서 일치하는 이메일이 있는지 찾은 후, 있다면 bcrypt의 compare 함수로 비밀번호를 비교한다. 비밀번호까지 일치했다면 done 함수의 두 번째 인자로 사용자 정보를 넣어 보낸다. 두 번째 인자를 사용하지 않는 경우는 로그인에 실패했을 때뿐이다. done 함수의 첫 번째 인자를 사용하는 경우는 서버쪽에서 에러가 발생하였을 때고, 세 번째 인자를 사용하는 경우는 로그인 처리 과정에서 비밀번호가 일치하지 않거나 존재하지 않는 회원일 때와 같은 사용자 정의 에러가 발생하였을 때이다.

 

 

done이 호출된 후에는 다시 passport.authenticate의 콜백 함수에서 나머지 로직이 실행된다. 로그인에 성공하였다면 메인 페이지로 리다이렉트 되면서 로그인 폼 대신 회원 정보가 뜰 것이다. 아직 auth 라우터를 연결하지 않았으므로 코드가 동작하지 않는다. 카카오 로그인까지 구현한 후 연결해보자.

3. 카카오 로그인 구현하기

카카오 로그인이란 로그인 인증 과정을 카카오에게 맡기는 것을 뜻한다. 사용자들은 번거롭게 새로운 사이트에 회원가입하지 않아도 되서 좋고, 서비스 제공자들은 로그인 과정을 안심하고 검증된 SNS에 맡길 수 있어서 좋다.

이러한 SNS 로그인의 특징은 회원가입 절차가 따로 없다. 처음 로그인할 때는 회원가입 처리를 해주어야 하고, 두 번째 로그인부터는 로그인 처리를 해주어야 한다. 따라서 SNS 로그인 전략은 로컬 로그인 전략보다 다소 복잡하다.

 

passport\kakaoStrategy.js

 

• 로컬 로그인과 마찬가지로 카카오 로그인에 대한 설정을 한다. clientID는 카카오에서 발급해주는 아이디이다. 노출되지 않아야 하므로 process.env.KAKAO_ID로 설정하였다. 나중에 아이디를 발급받아 .env 파일에 넣을 것이다. callbackURL은 카카오로부터 인증 결과를 받을 라우터 주소이다. 
• 먼저 기존에 카카오로 로그인한 사용자가 있는지 조회한다. 있다면 done 함수를 호출한다.
• 없다면 회원가입을 진행한다. 카카오에서는 인증 후 callbackURL에 적힌 주소로 accessToken, refreshToken과 profile을 보내준다. profile에 사용자 정보들이 들어 있다. 카카오에서 보내주는 것이므로 데이터는 console.log 메서드로 확인하보는 것이 좋다. profile 객체에서 원하는 정보를 꺼내와 회원가입을 하면 된다. 사용자를 생성한 뒤 done 함수를 호출한다.

 

이제 카카로 로그인 라우터를 만들어보자. 로그아웃 라우터 아래에 추가하면 된다. 회원가입을 따로 짤 필요가 없고, 카카오 로그인 전략이 대부분의 로직을 처리하므로 라우터가 상대적으로 간단하다.

 

routes\auth.js

 

GET /auth/kakao로 접근하면 카카오 로그인 과정이 시작된다. layout.pug의 카카오톡 버튼에 /auth/kakao 링크가 붙어 있다.

 

views\layout.pug

 

GET /auth/kakao에서 카카오 로그인 창으로 리다이렉트를 하고, 결과를 GET /auth/kakao/callback으로 받는다. 이 라우터에서는 캌오 로그인 전략을 수행한다. 로컬 로그인과 다른 점은 passport.authenticate 메서드에 콜백 함수를 제공하지 않는다는 점이다. 콜백 함수 대신에 로그인에 실패했을 때 어디로 이동할지를 객체 안 failurlRedirect 속성에 적어주고, 성공 시에도 어디로 이동할지를 다음 미들웨어에 적어준다.

 

추가한 auth 라우터를 app.js에 연결한다.

 

app.js

 

app.js

 

이제 kakaoStrategy.js의 clientID 부분을 발급받아야 한다. 카카오 로그인을 위해서는 카카오 개발자 계정과 카카오용 앱이 필요하다. https://developers.kakao.com에 접속하여 회원가입을 한다. 로그인 후 다음과 같이 카카오용 NodeBird 앱을 만든다.

 

 

 

 

 

REST API 키를 복사하여 .env 파일에 붙여넣어준다. 

 

 

플랫폼 추가를 선택한 뒤 웹 플랫폼을 추가한다. 사이트 도메인에는 localhost:8001을 입력한다. 만약 8001 외의 다른 포트를 사용하고 있다면 해당 포트를 적어주어야 한다.

 

 

 

 

마지막으로 Redirect Path에 /auth/kakao/callback을 입력하고 저장한다. 이 부분은 kakaoStrategy.js의 callbackURL과 일치해야 한다.

 

 

 

 

프로필 정보와 이메일을 수집하도록 하고 수집 목적을 입력한다 .입력 후에는 저장 버튼을 눌러 변경사항을 저장한다.

 

 

실행해서 로그인 확인해보기

 

 

 

...

 

 

 

 

 

User.find → User.findOne으로 변경 시 실행되는 것 확인