반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Vue.js
- input
- event
- 리액트
- Wecode
- storybook
- TypeScript
- vuex
- jsx
- react
- Vue
- sass
- 쉬운설명
- scss
- 자료구조
- 자바스크립트
- mapGetters
- State
- v-html
- nodejs
- express
- MySQL
- ES6
- JavaScript
- 댓글달기
- CSS
- Vue transition
- HOC
- App.vue
- webpack
Archives
- Today
- Total
익명의 개발노트
12.[소셜로그인] passport를 이용한 kakao login 기능구현 본문
반응형
1. passport관련 패키지 설치
npm i passport passport-local passport-kakao bcrypt
2. app.js와 미리 연결
//app.js
(다른 모듈 import)
const passport = require('passport');
const passportConfig = require('./passport'); //passport 폴더 안에 index.js
//express-session 설정 하단부에 passport session 설정해준다.
app.use(session({
resave: false,
saveUninitialized:false,
secret: process.env.COOKIE_SECRET,
cookie:{
httpOnly: true,
secure: false,
},
}));
app.use(passport.initialize());
app.use(passport.session());
passport.initialize 미들웨어는 요청(req객체) 에 passport 설정을 저장하고,
passport.session 미들웨어는 req.session(express-session) 객체에 passport 정보를 저장한다.
따라서, express-session미들웨어보다 passport session을 뒤에 연결해야 함.
3. passport폴더 안에 index.js 파일 만들기
const local = require('./localStrategy'); //로컬로그인
const kakao = require('./kakaoStrategy'); //카카오로그인
const { User } = require('../models');
module.exports = (passport) => {
passport.serializeUser((user, done) => {
done(null, user.id);
});
passport.deserializeUser((id, done) => {
User.findOne({ where: { id }})
.then(user => done(null, user))
.catch(err => done(err));
});
local(passport);
kakao(passport);
}
passport는 세션에 불필요한 데이터를 담아두지 않기 위해 사용하며,
serializeUser, deserializeUser가 핵심이다.
serializeUser는 세션에 사용자 정보를 저장하는 것이며,
deserializeUser는 매 요청시마다 실행되며, serializeUser에서 세션에 저장했던 아이디를 받아 DB에서 사용자 정보를 조회한다.
조회된 사용자 아이디를 req.user 객체에 저장하면, 라우터에서 req.user 객체를 사용 가능하다.
4. passport폴더 밑에 KakaoStrategy.js 작성
const KakaoStrategy = require('passport-kakao').Strategy;
const passport = require('passport');
const { User } = require('../models');
module.exports = (passport) => {
passport.use(new KakaoStrategy({
clientID: process.env.KAKAO_ID,
callbackURL: '/auth/kakao/callback',
}, async (accessToken, refreshToken, profile, done) => {
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 && profile._json.kaccount_email,
nick: profile.displayName,
snsId: profile.id,
provider: 'kakao',
})
done(null, newUser);
}
} catch (error) {
console.error(error);
done(error);
}
}))
}
KAKAO_ID는 developers.kakao.com에서 내 애플리케이션을 생성 후 REST API키를 가져와서 .env 파일에 작성해주면 된다.
5. routes 폴더 밑에 auth.js에 kakao 컨트롤러 작성
//회원가입 라우터
const express = require('express');
const passport = require('passport');
const bcrypt = require('bcrypt');
const { isLoggedIn, isNotLoggedIn } = require('./middlewares');
const { User } = require('../models');
const router = express.Router();
(...로컬 로그인 관련부분 생략)
router.get('/kakao', passport.authenticate('kakao'));
router.get('/kakao/callback', passport.authenticate('kakao', {
failureRedirect: '/',
}), (req, res) => {
res.redirect('/');
});
module.exports = router;
6. app.js에서 routes 연결
(...생략)
const passport = require('passport');
require('dotenv').config();
const pageRouter = require('./routes/page');
const authRouter = require('./routes/auth');
(...생략)
app.use(passport.initialize());
app.use(passport.session());
app.use('/', pageRouter);
app.use('/auth', authRouter);
(...생략)
7. nodemon 실행 후 카카오 로그인하면 끝.
반응형
'프로그래밍 > NodeJS' 카테고리의 다른 글
13.[사용량 제한] express-rate-limit 라이브러리로 사용량 제한걸기 (0) | 2020.10.21 |
---|---|
11. 패키지 배포하기 (0) | 2020.06.17 |
10.[인증모듈] 로그인, 회원가입, 로그아웃 구현(Passport.js) (2) | 2019.06.29 |
9.[암호화처리] 회원가입시 비밀번호 암호화처리 (0) | 2019.06.28 |
8.[CORS이슈] 해결하기. (0) | 2019.06.28 |
Comments