Passport 로 깃헙로그인하기

성팡·2020년 1월 8일
0

Passport 는 미들웨어로써 사용자 인증을 도와주는 아주 훌륭한 미들웨어다. 여기서 인증이란 브라우저 상에 쿠키를 설정해주면 그쿠리를 통해서 사용자 ID등을 확인해서 Passport가 브라우저에서 자동으로 쿠키를 가져와서 사용자의 객체를 넘겨준다.
지금 나는 mongoose + mongoDB를 사용하기 때문에 passpoprt-local-mongoose 를 사용해서 만들것이다.

passpoprt-local-mongoose 는 아주 편하고 간단한 shortcut이다. 인증과정은 거의 똑같기 때문에 그냥 편안하게 쓰면될것이다.

먼저 데이터 모델 유저폴더를 만들어준다


데이터 타입들을 정해주고
플러그인 설정을 해주자
그리로 passport.js 폴더에 아까말한 shortcut
serializeUser , deserializeUser를 불러오자

passport.use(new LocalStrategy(
function(username, password, done) {
User.findOne({ username: username }, function (err, user) {
if (err) { return done(err); }
if (!user) { return done(null, false); }
if (!user.verifyPassword(password)) { return done(null, false); }
return done(null, user);
});
}
));

이렇게 긴 코드를 passport-local-mongoose 덕분에 위에 사진처럼 우리는 간단하게 구현할수있다.
그리고 쿠키를 사용해야 하기 때문에 express-session을 설치해주자.
express-session에는 많은 옵션들이 있는데 이중에서 정말 중요한 옵셥은 Screat 이다 screat은 말처럼 비밀이다. 우리의 session ID를 전송할 때 ID값 그대로 보내는것이 아니라 랜덤한 코드로 암호화해서 보내주기 때문에
이옵션 은 무지 중요하고 그리고 보안 문제 때문에 필이 사용할 것을 권장한다. 그리고 .env 에 꼭 넣어주자!

그리고 우리는 서버에 쿠키가 남아있기를 원한다. 이때 필요한것이 express-session 이다 이것을 사용해야 세션에 쿠키를 저장할수 있다.
설치를한후
app.use(
session({
secret: process.env.COOKIE_SECRET,
resave: true,
saveUninitialized: false
})
);
코드를 작성하자 자세한 문서 :https://www.npmjs.com/package/express-session

그리고 우리는 서버가 끊겨도 로그인을 다시 하는 번거로움 없이 쿠키가 이를 알고 있기를 원한다 이때 필요한것이 connect-mongo 다 npm 혹은 yarn 을 통해서 설치를 하고 임폴트를 해준다.


그리고 위와 같이 변수를 하나 만든다. 그리고 몽구스토어는 세션 오브젝트가 필요하므로 꼭 세션을 할당해주자!
그다음 필요한것이 세션설정으로 가서 스토어를 추가를 해주어야한다.
이때 우리는 쿠키스토어 와 몽고 간의 연결을 만들어줘야한다.


위에 코드는 이 연결을 사용하겠다는 뜻이다.
그리고 몽고와 연결을 해야하니 꼭 몽구스도 임폴트해주자!

이제 부터 본격적으로 git-hub 로그인 연동을 시작할것이다.
먼저 passport-github 을 임폴트해주자 그러고 나서 우리는 github페이지에서 해줘야할 것이 있다.


우측상단에 아이콘을 눌러서 세팅을 클릭해서 이화면에 들어오자 그리고 개발자 세팅을 누른다.


OAuth App을 클릭하면 위와같이 화면이 나온다 여기서 레지스터 뉴 에플리케이션을 클릭해서 새롭게 생성을해준다.


양식에 맞게 작성을 해주면 끝난다.
생성을 해주고 나면 클라이언트 ID와 클라이언트 Secret이 생성이 되는데 이것들을 .env 파일에 변수로 만들어서 저장을 해준다. 연결을 할때 꼭 필요하니 꼭 설정을 해주자!

userController.js


그리고 이제 깃헙에 가는 과정들과 라우터들을 작성을하자.


깃헙을 불러오고 로그인을 시켜주고 실패시 로그인 화면으로 보내주기.


routes 만들기.


이렇게 해주면 이제 깃헙로그인을 클릭하면 깃헙홈페이지로 이동이 되면서 승인 요청하는 페이지가 나온다 승인을해주자!!!

아직은 계속기다리고 있지만 다시보내주도록 코드를 추가하자 그래도 깃헙에 승인은 된것이다 아까 에플리케이션 만든페이지를 가면 User가 1로 되어 있는 것을 알수 있다.

깃헙으로 로그인 완료!!
공식문서:http://www.passportjs.org/packages/passport-github/

profile
비전공 고졸 성팡이 개발자 되기 프로젝트

0개의 댓글