Google 소셜 로그인 (passport-google-oauth2 vs. passport-google-oauth20 vs. passport-google-plus-token vs. Firebase vs. google-auth-library)
소셜 로그인 (Social Login)
소셜 로그인은 소셜 미디어 계정을 통해, 웹 사이트 혹은 애플리케이션에서 로그인을 도와주는 인증 방식입니다.
이는 보안, 편리함, 데이터 수집면에서 장점이 있고 구글, 카카오, 네이버 등이 대표적으로 소셜 로그인을 제공하는 사이트입니다.
소셜 로그인을 제공하는 다양한 방법은 다음과 같이 있습니다.
이 중 Google 소셜 로그인에 대해서 설명하겠습니다.
알아보기전 OAuth 2.0과 OIDC에 대해 알고 싶다면, 해당 문서를 참고하시면 됩니다.
passport-google-oauth2
passport-google-oauth2는 Google 유일 OAuth2.0 프로토콜을 사용하는 Passport.js 전략입니다.
설치
$ npm i passport-google-oauth2사용
// 출처 : https://github.com/mstade/passport-google-oauth2
var GoogleStrategy = require( 'passport-google-oauth2' ).Strategy;
passport.use(new GoogleStrategy({
clientID: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
callbackURL: "http://yourdomain:3000/auth/google/callback",
passReqToCallback: true
},
function(request, accessToken, refreshToken, profile, done) {
User.findOrCreate({ googleId: profile.id }, function (err, user) {
return done(err, user);
});
}
));공식 GitHub에 따르면 다음과 같이 구성할 수 있습니다.
- clientID, clientSecret : 구글 클라우드(API) 콘솔에서 발급받은 값 사용
- callbackURL : 인증 완료 후 리디렉션될 URL
- passReqToCallback : true일 때, 요청 객체를 콜백 함수에 전달하여 더 많은 정보 사용
// 출처 : https://github.com/mstade/passport-google-oauth2
app.get('/auth/google',
passport.authenticate('google', { scope:
[ 'email', 'profile' ] }
));
app.get( '/auth/google/callback',
passport.authenticate( 'google', {
successRedirect: '/auth/google/success',
failureRedirect: '/auth/google/failure'
}));공식 GitHub에 따르면 다음과 같이 로그인과 콜백이 가능합니다.
- scope : 요청할 사용자 정보 범위 설정
passport-google-oauth20
passport-google-oauth20은 Google을 OAuth 2.0 API를 사용한 Passport.js 전략입니다.
설치
$ npm i passport-google-oauth20TypeScript의 경우
$npm i @types/passport-google-oauth20사용
// 출처 : https://github.com/jaredhanson/passport-google-oauth2
var GoogleStrategy = require('passport-google-oauth20');
passport.use(new GoogleStrategy({
clientID: process.env['GOOGLE_CLIENT_ID'],
clientSecret: process.env['GOOGLE_CLIENT_SECRET'],
callbackURL: 'https://www.example.com/oauth2/redirect/google',
scope: [ 'profile' ],
state: true
},
function verify(accessToken, refreshToken, profile, cb) {
db.get('SELECT * FROM federated_credentials WHERE provider = ? AND subject = ?', [
'https://accounts.google.com',
profile.id
], function(err, cred) {
if (err) { return cb(err); }
if (!cred) {
// The account at Google has not logged in to this app before. Create a
// new user record and associate it with the Google account.
db.run('INSERT INTO users (name) VALUES (?)', [
profile.displayName
], function(err) {
if (err) { return cb(err); }
var id = this.lastID;
db.run('INSERT INTO federated_credentials (user_id, provider, subject) VALUES (?, ?, ?)', [
id,
'https://accounts.google.com',
profile.id
], function(err) {
if (err) { return cb(err); }
var user = {
id: id,
name: profile.displayName
};
return cb(null, user);
});
});
} else {
// The account at Google has previously logged in to the app. Get the
// user record associated with the Google account and log the user in.
db.get('SELECT * FROM users WHERE id = ?', [ cred.user_id ], function(err, user) {
if (err) { return cb(err); }
if (!user) { return cb(null, false); }
return cb(null, user);
});
}
});
}
));공식 GitHub 문서에 경우 다음과 같이 구성할 수 있습니다.
- clientID, clientSecret : 구글 클라우드(API) 콘솔에서 발급받은 값 사용
- callbackURL : 인증 완료 후 리디렉션될 URL
- passReqToCallback : true일 때, 요청 객체를 콜백 함수에 전달하여 더 많은 정보 사용
- scope : 요청할 사용자 정보 범위 설정
// 출처 : https://github.com/jaredhanson/passport-google-oauth2
app.get('/login/google', passport.authenticate('google'));공식 문서에 따라 다음과 같이 로그인을 한 후,
// 출처 : https://github.com/jaredhanson/passport-google-oauth2
app.get('/oauth2/redirect/google',
passport.authenticate('google', { failureRedirect: '/login', failureMessage: true }),
function(req, res) {
res.redirect('/');
});다음과 같이 redirect이 후 인증을 진행합니다.
passport-google-oauth2 vs. passport-google-oauth20
passport-google-oauth20는 passport-google-oauth2에 비해 더 많은 기능과 유연성을 제공합니다.
passport-google-oauth2가 먼저 만들어졌긴 하지만 npmtrends 기준 passport-google-oauth20가 6배 넘게 다운로드 수가 많습니다.
다만, passport-google-oauth2가 install size가 더 작기 때문에, 간단한 프로젝트에 활용하기 좋을 수는 있다.
passport-google-plus-token
passport-google-plus-token은 구글 플러스 API를 사용합니다.
하지만, 구글 플러스 API가 2019년 이후로 종류되었으므로 현재는 사용하지 않는 것이 권고됩니다.
Firebase 구글 로그인
Firebase 구글 로그인은 Firebase Authentication을 사용하여 구글 계정을 통해 사용자 인증을 간편하게 구현합니다.
사용 및 설치
- Firebase 콘솔을 통해 도메인을 추가합니다.
- Firebase SDK를 웹 애플리케이션에 설치합니다.
- 공식 문서에 안내된 방법을 통해 로그인 과정을 구현합니다.
특징
다양한 플랫폼을 지원하고, OAuth2.0으로 인해 안전한 인증을 제공하며
간편한 설정을 통해 많은 사람들이 사용하고 있습니다.
google-auth-library
google-auth-library는 구글 API를 접근하기 위해 권한을 부여하는 Node.js 라이브러리로,
OAuth 2.0 및 JWT를 통해 구글 서비스에 대한 인증을 지원합니다.
설치
$npm i google-auth-library공식 문서에 예시에 따라 사용이 가능합니다.
특징
OAuth2.0과 JWT (Json Web Token) 인증을 지원합니다.
또한 구글 드라이브, 구글 캘린더 등 다양한 구글 서비스에 접근 가능합니다.
결론
현재 google-auth-library가 firebase-admin과 passport-google-oauth20에 비해 압도적으로 많은 다운로드 수와 Stars를 기록하고 있습니다.
또한, google-auth-library API 접근을 위한 고급 인증 및 권한 부여에 적합하지만,
간편한 설정과 확장성을 위해서는 Firebase가 선호되기도 합니다.
또한 Node.js 세션 기반 인증 처리에 경우 passport-google-oauth20이 유리하기도 합니다.
다양한 방법을 비교하고 자신에게 맞는 방법을 사용하자!🎉
