로그인 관련

요즘 자주 질문드리네요~ :)

해당 강좌를 질문을 통해서 무사히~ 로컬 회원가입, 로그인, 로그아웃이 되어서 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 관련 너무 자료가 없어요...

인프런 커뮤니티 질문&답변