로그인 관련

Question

요즘 자주 질문드리네요~ :) 해당 강좌를 질문을 통해서 무사히~ 로컬 회원가입, 로그인, 로그아웃이 되어서 SNS 로그인으로 넘어가고 있습니다. express passport를 이용한 google 인을 하고 싶어서 만들어봤는데 뭔가 하나가 부족해서 질문 남깁니다. 인터넷 stackoverflow에서 자료가 너무 없어서 passport.org에서도 자료를 최대한 찾아봤는데 해결이 안되네요.. 제 생각에는 1. HTML 에서 Google login 로 트리거 하고 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 관련 너무 자료가 없어요...

제로초(조현영) · Answer

일단 하나씩 해결해보는 게 좋을 것 같습니다. password는 없는 게 맞습니다. 비밀번호 컬럼이 필수로 되어있으신 것 같은데 선택으로 바꾸시면 됩니다.