Express - Github Log In

아 잠을 못자서 그런가 키보드 타이핑이 잘 안된다. ㅡㅡ;;

이제 소셜 로그인에 대해서 다뤄보자

 

passport site에 가서 strategy중 github을 살펴보자 (이제 감이 온다 strategy는 전략이다 passport가 만들어놓은.. local일지 github일지

인스타그램일지 어떤 사이트일지 모르지만 각 passport에서 각사이트마다 인증 전략을 새워놓은 것이다.)

 

우선 npm install passport-github으로 설치를 한다.

 

음 이모듈은 깃헙을 이용해서 너의 node.js 앱의 인증을한다. passport 에 견결해서 깃헙 인증은 express를 포함한~~~어쩌고

 

자 다음 섹션을 보면 passport-github을 이용하기 전에 깃헙에 앱을 등록해야 한다~

깃헙에서 setting -> developer setting을 가보면 Oauth apps가 있다.

Oauth가 뭐지?

위키피디아를 보면~ OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해

웹사이트나 애플리케이션의 접근 권한을 부여 할 수 있는 공통적인 수단으로 사용되는, 접근 위임을 위한 개방형 표준이다.

여러 기업들에 의해 사용되는데 이를테면 아마존, 구글, 페이스북, 마이크로소프트, 트위터가 있으며 사용자들이

타사 애플리캐이션이나 웹사이트의 계정에 관한 정보를 공유할 수 있게 허용한다~!

 

음 예를 들어 이런건가? 내가 만든 웹앱에 접속하는 유저가 깃헙 아이디가 있으면 또한 내 웹앱이 깃헙아이디로 로그인을 허용하면

별도의 회원 가입 없이 로그인을 제공하는 그런 서비스?

 

자 일단 등록하자.

이게 어떻게 돌ㅇ가느냐~!

먼저 깃헙을 이용해 로그인 하려는 사용자를  특별한 URL의 깃헙 페이지로 보낸다.

그곳에 도달하면 깃헙은 이 앱에 사용자의 정보를 괜찮은지 물어보고 사용자가 승인하면 깃헙은 사용자를 다시 나의

웹앱에 돌려보내는데 이때 사용자의 정보도 함께 보내준다.

등록할때 다른건 별 문제 없는데 callback Url을 정의 해줘야한다.

http://localhost:4000/auth/github/callback 로 적어주자

auth는 그냥 아무거나 적어주면 되는거고 뒤에 사이트명이랑 콜백만 제대로 적어주자.

 

등록읠 하고나면 Client ID와 Cilent secrets이 보인다.

passport-github의 설명을 들여다 보면.

클라이언트 아이디 및 암호는 전략을 만들때 옵션으로 제공되고, 이전략에는 엑세스 토큰과 선택적 새로고침 토큰을 수신하는 콜백과

인증된 사용자의 github 프로필이 들어있는 프로필이 필요하다. callback은 인증을 완료하기 위해 사용자가 제공하는 cb를 호출해야 한다.

자.. 그냥 전략을 만들때 필요하다고 한다.

 

중요 정보이니 환경변수에 넣어주자

환경변수 설정을 했으면 이제 passport.js에서 strategy를 만들어주자

참조

passport-github을 임포트하고 github strategy를 생성한다. passport 사이트를 참조해서 한다.

 

이렇게 끝이 아니고 참조사진 처럼 요청이 들어오면 callback 함수를 실행해 줘야한다.

사용자가 깃헙에 갔다 오면서 사용자 정보를 가지고 오면 callback함수를 실행 해주는 것.

이 함수를 여기서는 usercontroller에 만들어준다.

이렇게 만들어주고 인자에 대한 설명은 차후 알아보자. 아 그리고 이 컨트롤러는 로그인까지는 아지 구현하지 않고 우선 깃헙이 주는 정보를

출력하기만 하게 만들었다.

다시 passport에 돌아와 함수를 적어주고 자동 임포트

(- 로그아웃에 req.logout();을 추가했다 passport를 사용하면 이렇게 해주면  로그아웃이 된다고 한다)

 

자 여기가 끝이아니다 현재는 깃헙에서 정보를 가져오는 일을 했다.

근데 아직 사용자를 깃헙으로 보내질 않았다.

역시 유저컨트롤러에 컨트롤러 하나를 더 만들어주자.

사용자 인증 방식을 이용해 로그인한 local 로그인 처럼 passport.authenticate를 이용  github방식을 사용한다.

 

 

예제를 보고 만들어주자.

누군가 /auth/github으로 오게 되면 깃헙 passport인증을 해준다

그리고 그 누군가가가 /auth/github/callback으로 오면 이미 했었던 실패와 성공에 따른 redirect를 지정해준다.

 

그런데 이에 앞서 이것에 반응할 라우트를 먼저 설정해줘야 한다. 당연한 것

routes.js로 가서 깃헙의 url라우트를 만들어 주자

 

이렇게 만들었으니 이제 passport로 가서 routes를 임포트하고 callbackUrl을 변경~ 뭐 안해도 되지만 라우트를 썼으니 써주자

이제 전역으로 globalRouter로 가서  라우터 설정을 해준다.

사용자가 /auth/github으로 들어가면 githubLogin 컨트롤러를 써서 인증을 하게 된다.

그러면 인증이 진행되고 그게 완료 되면 callbackURL로 돌아오게 된다

이제 인증이 완료되고 정보를 가져왔을때 제대로 된 process가 이루어졌다면 웹에 로그인을 시켜줘야 하는데

컨트롤러를 만들어주자 

다시 userController로 가서

컨트롤러를 만들고 globalRouter에 가서  라우터 설정도 해준다.

 

사용자는 소셜로그인 버튼을 누르고 /auth/github에 접속을 하게 되면  githubLogin 컨트롤러를 이용하고 github strategy

( passport에 정의된 GithubStrategy )를 이용한다. 이렇게 github으로 이동하고 로그인을 정상적으로 수락을 하면

callbackURL로 돌아오면서 사용자 정보를 가지고 온다.

돌아와서 callbackURL에 접근하게 되면  passport.authenticate("github", {failureRedirect: routes.login})을 사용한다.

즉 여기서 passport에 정의된 GithubStrategy의  githubLoginCallback함수를 실행한다(usercontroller에 정의된 함수임)

로그인 과정이 성공적이고, 이 함수가 문제없이 결과를 리턴하면 PostGithubLogin 컨트롤러를 실행해 홈화면으로 보내준다.

 

현재까지는 이렇게 프로세스가 정의 되어있다

 

수정사항 

 

콜백 함수의 위치가 잘못 되어있었다. 소괄호 안에 있어야 하는데 바깥에 있어서 함수 인식을 못하고 오류가 났었다.

 

 

자 이제 실제로 소셜 로그인을 통해 실행을 하게 되면

실제 github 페이지로 이동하게되고 authorized하게 되면 이제 callback함수가 실행되고 정보(토큰과 프로필, cb(콜백))

를 보내주는데 현재는 이정보를 console.log로 보기만 했기때문에 깃헙은 계속 기다리고만 있고

정보만 출력이 된다. accesToken, refreshToken, profile, cb등등을 출력한 사진이다..

자 이제 console.log 대신 user를 생성해보자

 

상당히 길었다.. 다행히 이해가 된다..ㅋㅋ 좀 복잡하긴 하지만.. 실제 업무에서는 얼마나 복잡할까..ㅋㅋㅋ