[javascript] Express.js에서의 소셜 로그인 구현 방법
소셜 로그인이란?
소셜 로그인은 사용자가 소셜 미디어 플랫폼(예: Facebook, Google, Twitter)의 계정을 사용하여 웹 애플리케이션에 로그인하는 기능을 말합니다. 이를 통해 사용자는 추가적인 회원가입 절차 없이 웹 애플리케이션에 손쉽게 접속할 수 있습니다.
Express.js에서의 구현 방법
Express.js는 Node.js를 위한 웹 프레임워크로, 소셜 로그인 구현을 쉽게 할 수 있도록 다양한 패키지와 미들웨어를 제공합니다.
패키지 설치
먼저, Express.js 프로젝트에 소셜 로그인을 구현하기 위해 다음과 같은 패키지를 설치해야 합니다.
npm install passport passport-google-oauth passport-facebook
위 명령어를 실행하여 passport, passport-google-oauth, passport-facebook 패키지를 설치합니다.
구현 단계
- Express.js 애플리케이션에
passport와 관련된 설정을 추가합니다.
const passport = require('passport');
const session = require('express-session');
app.use(session({ secret: 'your_secret_key' })); // 세션 설정
app.use(passport.initialize()); // passport 초기화
app.use(passport.session()); // 세션 사용
-
각 소셜 로그인 플랫폼마다 필요한 인증 정보를 가져옵니다. 예를 들어, Google 로그인을 구현하려면 Google Developers Console에서 클라이언트 ID와 클라이언트 비밀번호를 발급받아야 합니다.
-
passport의 Strategy 객체를 생성하여 로그인 방식을 정의합니다.
const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
const FacebookStrategy = require('passport-facebook').Strategy;
passport.use(new GoogleStrategy({
clientID: 'your_client_id',
clientSecret: 'your_client_secret',
callbackURL: 'your_callback_url'
}, (accessToken, refreshToken, profile, done) => {
// 로그인 처리
}));
passport.use(new FacebookStrategy({
clientID: 'your_client_id',
clientSecret: 'your_client_secret',
callbackURL: 'your_callback_url'
}, (accessToken, refreshToken, profile, done) => {
// 로그인 처리
}));
- 사용자가 소셜 로그인을 하려고 할 때, 해당하는 라우트 핸들러에서 passport.authenticate() 함수를 호출하여 로그인 요청을 처리합니다.
app.get('/auth/google', passport.authenticate('google', { scope: ['profile'] }));
app.get('/auth/google/callback', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
// 로그인 성공 시 처리
});
app.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email'] }));
app.get('/auth/facebook/callback', passport.authenticate('facebook', { failureRedirect: '/login' }), (req, res) => {
// 로그인 성공 시 처리
});
- 로그인 성공 시, passport.serializeUser() 함수를 통해 사용자 정보를 세션에 저장합니다.
passport.serializeUser((user, done) => {
done(null, user);
});
passport.deserializeUser((user, done) => {
done(null, user);
});
마무리
위의 단계를 따라 Express.js에서 소셜 로그인을 구현할 수 있습니다. 소셜 로그인을 통해 웹 애플리케이션의 사용자 경험을 개선하고 보안을 높일 수 있으므로, 적절한 소셜 로그인 구현을 고려하는 것이 좋습니다.