패스트캠퍼스 챌린지 20일차 - Passport 복습

0. 공부 인증

공부 시작 20:30분 쯤(사진보다 한참 먼저 시작했는데 찍어두는걸 깜빡했다..ㅎ)

공부 종료 22:21

 

 

오늘은 복습 두번째 시간이다. passport 강의가 너무 어려웠어서 한번더 동영상을 보면서 놓친 부분들을 복습했다!

어제 리덕스 복습하면서도 느낀거지만 복습이 정말 정말 중요하긴 한것 같다. 어제 리덕스도 복습하면서 봤던 강의 또 보고 또 보고 했는데 뭐 이번에도 비슷했던것 같다. 그러다보니 그래도 좀 내 눈에 들어왔다. 후..

 

그리고 Naver와 Google 소셜 로그인을 내 방식대로 구현해봤다. 그러고 나니 passport와 많이 친근해진것 같은 느낌이다. (제발 그런거기를..)

 

 

먼저 시작은 express-session과 passport에 관한것들을 설정해 주는것이다. express-session을 설정하지 않고 passport만 설정하면 에러가 난다. 그러니 의존성을 반드시 체크할것!!

const passport = require("passport");
const session = require("express-session");

app.use(
    session({
        secret: "asdfasfasfasfasf", //원래는 숨겨줘야 맞다. 
        resave: true,
        saveUninitialized: true,
    })
);

//이렇게 app.use(session에 대한 정의) 를 위처럼 해준 다음에 app.use(패스포트 정의) 를 해줘야 한다.
//안그럼 오류가 난다.
app.use(passport.initialize());
app.use(passport.session());

위처럼 선언을 해주고 나면 passport를 사용할 준비가 끝났다.

먼저 얘기했던것처럼 네이버와 구글 로그인을 하려면 네이버와 구글의  개발자 홈페이지에 가서 ID와 Secret와 callback URL을 등록해야 한다. 그렇게 각각의 ID Secret, CallbackURL을 받으면 이런식으로 함수를 작성해볼 수 있다.

 

passport.use(
        new NaverStrategy(
            {
                clientID: process.env.PASSPORT_NAVER_CLIENT_ID,
                clientSecret: process.env.PASSPORT_NAVER_CLIENT_SECRET,
                callbackURL: process.env.PASSPORT_NAVER_CALLBACK_URL,
            },
            async function (accessToken, refreshToken, profile, done) {
                try {
                    //const 쓰면 안됨
                    let user = await User.findOne({ naverId: profile.id });
                    if (!user) {
                        user = new User({
                            naverId: profile.id,
                            email: profile.emails[0].value,
                            username: profile.displayName,
                        });
                        await user.save();
                    }
                    return done(null, user);
                } catch (err) {
                    console.log(err);
                }
            }
        )
    );
    
    
    
    passport.use(
        new GoogleStrategy(
            {
                clientID: process.env.PASSPORT_GOOGLE_CLIENT_ID,
                clientSecret: process.env.PASSPORT_GOOGLE_CLIENT_SECRET,
                callbackURL: process.env.PASSPORT_GOOGLE_CALLBACK_URL,
            },
            async function (accessToken, refreshToken, profile, done) {
                console.log(profile);
                try {
                    //const 쓰면 안됨
                    let user = await User.findOne({ googleId: profile.id });
                    if (!user) {
                        user = new User({
                            email: profile.emails[0].value,
                            googleId: profile.id,
                            username: profile._json.name,
                        });
                        await user.save();
                    }
                    return done(null, user);
                } catch (err) {
                    console.log(err);
                }
            }
        )

passport에서 가장 어려웠던 부분은 done 함수를 통해 값들이 어디에서 어디로 전해지는가에 대한 부분이다.  이 부분이 정말 헷갈리고 이해가 안갔는데 보고 보고 또 보다보니까 조금은 알거같다.

 

//위의 Strategy에서 Done(null,user)로 보내진 값은 밑의 serializeUser의 user값으로 보내진다. 
passport.serializeUser(function (user, done) {
        done(null, user._id);
    });
//passport.serializeUser가 하는일은, done(null,user._id)를 통해 user._id값을 session에 저장한다.
//여기서 굳이 user._id를 저장하는건, 만일 세션에 user의 값 전체를 넘겼을때 더욱 위험성이 높아서 그렇다.
// done(null,user._id)로 넘어간 값은 session에도 저장되지만
// 또한 passport.deserializeUser의 id값으로 넘겨진다.

    passport.deserializeUser(function (id, done) {
        User.findById(id, function (err, user) {
        //위에서 받은 id값으로 mongoose에 저장된 동일한 id값을 가진 객체를 가져온다. 
            done(err, user);
        //그렇게 찾은 객체 user를 가지고 done(err,user)를 하면 req.user에 저장된다.
        // 이 req.user은 다른곳에서 언제든지 불러올 수 있다(session에 저장되어 있을 때)
        });
    });

 

그리고 이렇게 req.user가 생성됐을때 req.isAuthenticated() 함수로 지금 로그인이 되었는지 안되었는지 체크해볼 수도 있다.이는 사용자 인증을 하고 로그인한 유저에게만 어떤 페이지를 보여주고 싶을때 유용하게 사용한다.

 

처음에는 passport가 참 많이 어렵다. 하지만 이거 하나 익히고 나면 회원가입에 관한 것들은 웬만큼 알게되는것 같다. 그만큼 종합선물세트 같은 느낌이랄까? kakaotalk 소셜 로그인만 할줄 알아도 naver, google 소셜로그인은 그냥 따라온다. 형식이 되게 비슷하다!

 

passport를 복습하면서 오르기 힘들었던 산 하나를 정복?한것 같다. 패캠 환급챌린지 마무리까지 얼마 안남았는데 무사히 잘 마치고 싶다. 제발!!!

 

 

 

환급 챌린지 (20/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지