-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
로그인 관련
20.11.30 22:22 작성 조회수 147
0
요즘 자주 질문드리네요~ :)
해당 강좌를 질문을 통해서 무사히~ 로컬 회원가입, 로그인, 로그아웃이 되어서 SNS 로그인으로 넘어가고 있습니다.
express passport를 이용한 google 인을 하고 싶어서 만들어봤는데 뭔가 하나가 부족해서 질문 남깁니다.
인터넷 stackoverflow에서 자료가 너무 없어서 passport.org에서도 자료를 최대한 찾아봤는데 해결이 안되네요..
제 생각에는
1. HTML 에서 <a href=''> Google login </a> 로 트리거 하고
2. backend에서 get('/google') 로 들어오면 해당 scope를 가지고 패스포트로 strategy로 보낸 후
3. 인증 처리 이후 관련 user 정보를 google에서 받고
4. user 정보를 내 database에 저장한 후
5. 콜백 처리후 redirect로 프론트로 보내서
6. nuxtServerInit 함수로 db에 저장된 것을 불러와 store에 다시 저장후 로그인 인증을 유지한다.
여기까지 인데~ 문제점이 많습니다.
4번에 database 저장하는 것이 패스워드가 없어서 기존에 있던 User Model이 (nickname, email, password)인데
password를 넣을수가 없어서 에러가 납니다. 그래서 임의로 1111을 넣었는데 작동은 잘되는데 이건 아닌 것 같아서~ 어떻게 해야 하는지 모르겠네요. 관련 자료에 대해서 zerocho.com의 facebook을 봤는데 조금 달라서 잘 되지 않고 있습니다. Facebook 도 해보고 싶은데 제가 하는 방식과는 조금 달라서 난감한 상황이라 문의 드립니다.
1. backend/routes/auth.js
const express = require('express');
const bcrypt = require('bcrypt');
const passport = require('passport');
const db = require('../models');
const { isLoggedIn, isNotLoggedIn } = require('./middlewares');
const router = express.Router();
router.get('/', (req, res)=>{res.send('logout')})
router.get('/failed', (req, res)=>{res.send('failed to log in')})
router.get('/good', isLoggedIn, (req, res)=>{
res.redirect('http://localhost:3000/setup')
res.send(`welcome to ${req.user.displayName}`)
})
//1. a tag 를 통해서 '/google' 로 오면 passport-setup.js 로 profile 정보를 가지고 감(id, password, email)
router.get('/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
//6 req.user 정보가 안생기면 '/auth/failed', 정보가 생기면 '/auth/good' 으로 redirect 됨
router.get('/google/callback', passport.authenticate('google', { failureRedirect: '/auth/failed' }),
function(req, res) {
console.log(req.user)
res.redirect('/auth/good')
});
router.get('/google/logout', (req, res)=>{
req.session = null
req.logout()
res.redirect('/')
})
2. backend/passport/passport-setup.js
const passport = require('passport');
const User = require('../models/User');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const db = require('../models/')
const bcrypt = require('bcrypt')
//4 구글 아이디를 들고 쿠키를 싦음
passport.serializeUser(function(user, done){
done(null, user)
})
// 5 user 정보를 보내줌 req.user
passport.deserializeUser(async (user, done)=>{
try{
const newUser = await db.User.findOrCreate({
where:{
email: user.emails[0].value,
username: user.displayName,
password: '1111'
}
})
return done(null, user)
}catch(error){
console.log(error)
return done(error)
}
})
// passport.deserializeUser(function(user, done){
// console.log('google-user', user)
// done(null, user) // req.user
// })
//2 '/google'에서 넘어옴 아이디 패스워드 체크 후 인증이 되면 callback URL로 보내줌
passport.use(new GoogleStrategy({
clientID: "28194224462-job5pv0aswefef3s2hjqlf57tsdfsdflv956ko2r5hr.apps.googleusercontent.com",
clientSecret: "lfj_aYTi6zgXe4nwefBHF1dpwefewfewfYyq",
callbackURL: "http://localhost:3085/auth/google/callback"
},
//3 구글 인증이 되면 해당 프로필로 구글 아이디를 User Db에서 받아옴 그리고 done으로 user 값을 받거나 err 나면 error를 보내줌
function(accessToken, refreshToken, profile, done) {
return done(null, profile);
}
));
backend/app.js
//------------------------------------------------//
// BACKEND/FRONT PORT
//------------------------------------------------//
const backPort = '3085'
const frontPort = '3000'
const express = require('express')
const db = require('./models')
const cors = require('cors')
const morgan = require('morgan')
//------------------------------------------------//
// ROUTER REQUIRE
//------------------------------------------------//
const userRouter = require('./routes/user')
const authRouter = require('./routes/auth')
// const widgetRouter= require('./routes/widget')
// const imageRouter = require('./routes/image')
// const databaseRouter = require('./routes/database')
// const postRouter = require('./routes/post')
// const loadPostRouter = require('./routes/loadPost')
//------------------------------------------------//
// PASSPORT MODULE
//------------------------------------------------//
const passport = require('passport')
const passportConfig = require('./passport')
const session = require('express-session')
const cookie = require('cookie-parser')
require('./passport/passport-setup')
require('./passport/passport-facebook')
const app = express()
app.use(morgan('dev'))
db.sequelize.sync({force:true} ) // db 실행 {force:true}
app.use(express.json()) // express 가 json을 받기 위함
app.use(express.urlencoded( {extended: false}))
// passport
app.use(session({
resave: false,
saveUninitialized: false,
secret: 'ns747800',
cookie: {
httpOnly: true,
secure: false,
}
}))
app.use(cookie('ns747800'))
app.use(passport.initialize())
app.use(passport.session())
passportConfig()
//------------------------------------------------//
// CORS FRONTEND PORT
//------------------------------------------------//
app.use(cors({
origin: `http://localhost:${frontPort}`,
credentials: true
}))
//------------------------------------------------//
// IMAGE STATIC FILES
//------------------------------------------------//
app.use('/', express.static('uploads'));
//------------------------------------------------//
// ROUTER API
//------------------------------------------------//
app.get('/', (req,res)=>{ res.send('hello wizeto') })
app.use('/user', userRouter)
app.use('/auth', authRouter)
// app.use('/image', imageRouter)
// app.use('/widget', widgetRouter)
// app.use('/database', databaseRouter)
// app.use('/post', postRouter)
// app.use('/loadpost', loadPostRouter)
//------------------------------------------------//
// LISTEN
//------------------------------------------------//
app.listen(backPort,()=>{ console.log(`YES backend server is ${backPort}`) })
조금 자세히 설명해주시면 감사하겠습니다.~~~ vue - express - passport - google 관련 너무 자료가 없어요...
답변을 작성해보세요.
0
조현영
지식공유자2020.11.30
일단 하나씩 해결해보는 게 좋을 것 같습니다. password는 없는 게 맞습니다. 비밀번호 컬럼이 필수로 되어있으신 것 같은데 선택으로 바꾸시면 됩니다.
답변 1