[Express] Passport 모듈로 로그인 구현하기(2) - 카카오 로그인 구현하기

passport 모듈

sns등 서비스에 로그인을 구현할때, 회원가입과 로그인을 직접 구현할수도 있지만, 세션이랑 쿠키처리 등 복잡한 과정들이 있습니다.

이 모듈을 사용해서 더 간단하게 구현 할 수 있습니다.

---

아래에서 passport 모듈을 알고오시면 이해가 더 빠릅니다.

아래 프로젝트에서 이어서 하는 것입니다.

passport 모듈을 연결하는 법은 아래에 있고, 이 포스트에선 passport-kakao 모듈과, 추가해줘야되는 코드만 다루고 있습니다.

https://konkukcodekat.tistory.com/entry/Express-Passport-%EB%AA%A8%EB%93%88%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B01-local

[Express] Passport 모듈로 로그인 구현하기(1) - local

---

패키지 설치

npm i passport passport-kakao

passport 모듈과 카카오 로그인과 연동하는 모듈인 passport-kakao 모듈을 설치합니다.

 

카카오 로그인이라는 것은 인증과정을 카카오에 맡기는 것을 뜻합니다.

sns 로그인의 특징은 별도의 회원가입 절차가 필요 없다는 것입니다.

---

카카오 clientID 발급받기

 

1. 아래 링크타고 Kakao Developers에 로그인 또는 회원가입합니다.

그후, 어피치 위에 있는 내 애플리케이션을 클릭합니다.

https://developers.kakao.com/

Kakao Developers

---

2. 애플리케이션 추가하기

'+' 모양 버튼을 눌러서 애플리케이션을 추가하기 누르고, 폼을 작성합니다.

앱 아이콘은 등록하지 않아도 되고, 나머지는 자율적으로 입력하고 추가해주시면 됩니다.

저는 이름을 node 라고 하겠습니다.

---

3.추가한 앱 클릭 후, REST API 키 복사하기

키 부분은 모자이크 처리했습니다. 여러분 각자의 키를 복사해야됩니다.

이 키가 kakaoStrategy파일의 clientID가 될 값입니다.

---

4. 아래에 플랫폼-플랫폼 설정하기를 누르고, 원하는 플랫폼을 클릭

이번 실습에서는 WEB 플랫폼으로 하겠습니다.

---

5. 플랫폼 URL 등록

자신의 도메인을 입력하시면 됩니다. 예시로 실습하기 좋은 localhost url을 시범으로 보이겠습니다.

---

6. 리디렉트 도메인 설정하기

사이트 도메인을 등록하면 아래 사진 처럼 나옵니다.

여기에서 등록하러 가기 를 클릭합니다

 

리디렉트 링크는 로그인이 완료되면 보내는 주소 입니다.

리디렉트 되는 절차가 

내 도메인 -> 카카오 로그인 서비스 -> 다시 내 도메인 인데,

'다시 내 도메인' 으로 돌아갈때 상세하게 링크를 설정해줄수 있습니다.

당연히 저 요청에대해서 처리를 해야합니다. 로그인 완료 등등

 

---

7. 활성화 후 동의항목 설정

카카오 로그인 부분에서 활성화 설정을 하고, 카카오 로그인 밑에 동의항목을 클릭하고 필요한 정보들을 자신의 웹서비스에 맞게 설정해주시면 끝입니다.

---

passport과 연결하기

 

passport/index.js 파일에 카카오 인증 미들웨어를 추가해줍니다. (곧 kakaoStrategy 파일 작성할 것입니다.)

const passport = require('passport')
const kakao = require('./kakaoStrategy')
const User = require('../models/user')

module.exports = () => {
    passport.serializeUser((user, done)=>{
        done(null, user.id);
    })

    passport.deserializeUser((id, done)=>{
        User.findOne({where : {id}})
        .then(user => {done(null, user); console.log('yes!')})
        .catch(err => done(err))
    })
	// KakaoStrategy 미들웨어 사용
    kakao();
}

passport.serializeUser 함수는 로그인시 실행되며, req.session 객체에 어떤 정보를 저장할지 done콜백함수로 저장합니다.

user의 id를 저장하겠습니다.

passport.deserializeUser는 최초 로그인말고, 매 요청시 실행됩니다. serializeUser에 넣었던 데이터가 이 함수의 인자로 들어옵니다. user의 id를 넣었기 때문에 id를 인자로 받습니다.

id를 받으면 그 id로 db에 검색을 해서 user 객체 전체를 불러올수 있습니다.

콜백함수인 done 함수의 두번째 인자에 넣으면 됩니다.

---

passport/kakaoStrategy.js

카카오 로그인의 인증과정은 카카오가 대신 하기 때문에 적용시켜줄 필요가 없습니다.

카카오로 로그인 했을때, 데이터베이스에 사용자 정보를 추가해주면 됩니다.

 

callbackURL은 카카오개발자 사이트에서 설정한것과 똑같이 입력해야합니다.

 

KakaoStrategy 생성자에는 인자로 옵션과 콜백함수를 받습니다.

로그인할때 profile 인자로 사용자 정보를 받습니다.

id랑 이름은 profile json파일이 있고, 상세정보는 _json  속성에 json 파일로 되어있습니다

const process = require('process');
const passport = require('passport');
const kakaoStrategy = require('passport-kakao').Strategy;
const User = require('../models/user')
module.exports = () => {
    passport.use(new kakaoStrategy({
        clientID : process.env.KAKAO_ID,
        callbackURL : 'http://localhost:8000/auth/kakao/callback',
    }, async (accessToken , refreshToken, profile, done) =>{
        console.log('kakao profile', profile)
        try {
            const exUser = await User.findOne({
                where : {
                    snsId : profile.id,
                    provider : 'kakao',
                }
            });
            if (exUser) {
                done(null, exUser);
            }
            else{
                const newUser = await User.create({
                    email : profile._json.kakao_account.email,
                    nick : profile.displayName,
                    snsId : profile.id,
                    provider : 'kakao',
                });
                done(null, newUser)
            }
        } catch (error) {
            console.error(error);
            done(error)
        }
    }))
}

---

카카오 라우터 추가

 

routes/auth.js

const express = require('express')
const passport = require('passport')

router.get('/kakao', passport.authenticate('kakao'));

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

카카오 인증이 끝나면 나오는 kakao/callback에 라우터를 보시면

authenticate에서 인증Strategy종류(카카오), 실패시 이동할 주소(redirect) 두 인자를 받습니다.

그리고 마지막 미들웨어(req,res)로 콜백함수로 성공시 이동할 주소도 설정할 수 있습니다.

일단 지금은 다 루트패스로 이동하도록 코딩했습니다.