Passport 모듈로 로그인 구현하기[카카오]

카카오 로그인이란 로그인 인증 과정을 카오에 맡기는 것을 뜻합니다.

 

 

clientID는 카카오에서 발급해주는 아이디입니다. 

callbackURL은 카카오로부터 인증 결과를 받을 라우터 주소입니다. 

 

먼저 기존에 카카오를 통해 회원가입한 사용자가 있는지 조회합니다. 

있다면 이미 회원가입되어 있는 경우이므로 사용자 정보와 함께 done 함수를 호출하고 전략을 종료합니다.

카카오를 통해 회원가입한 사용자가 없다면 회원가입을 진행합니다. 

카카오에서는 인증 후 callbackURL에 적힌 주소로 access Token, refreshToken과 profile(사용자 정보)을 보냅니다. 

 

profile 객체에서 원하는 정보를 꺼내와 회원가입을 하면 됩니다. 

사용자를 생성한 뒤 done 함수를 호출합니다.

 

이제 카카오 로그인 라우터를 만들어봅시다. 

로그아웃 라우터 아래에 추가하면 됩니다.

 회원가입을 따로 코딩할 필요가 없고, 카카오 로그인 전략의 대부분의 로직을 처리하는 라우터가 상당히 간단합니다.

GET /auth/kakao로 접근하면 카카오 로그인 과정이 시작됩니다.

 

GET /auth/kakao에서 로그인 전략을 수행하는데, 처음에는 카카오 로그인 창으로 리다이렉트합니다.

그 창에서 로그인 후 성공 여부 결과를 GET /auth/kakao/callback으로 받습니다.

이 라우터에서는 카카오 로그인 전략을 다시 수행합니다.

로컬 로그인과 다른 점은 passport.authenticate 메서드에 콜백 함수를 제공하지 않는다는 점입니다. 

카카오 로그인은 로그인 성공 시 내부적으로 req.login을 호출하므로 우리가 직접 호출할 필요가 없습니다. 

콜백 함수 대신 로그인에 실패했을 때 어디로 이동할지를 failureRedirect 속성에 적고, 

성공 시에도 어디로 이동할지를 다음 미들웨어에 적습니다.

 

 

 추가한 auth 라우터를 app.js에 연결합니다.

 

 

 

아직 끝난 것이 아닙니다. kakaoStrategy.js에서 사용하는 clientID를 발급받아야 합니다.

 카카오 로그인을 위해서는 카카오 개발자 계정과 카카오 로그인용 애플리케이션 등록이 필요합니다.

 https://developers.kakao.com에 접속하여 카카오 회원가입 또는 로그인을 해야합니다.

 

 

 

로그인 후 내 애플리케이션 메뉴에가서 애플리케이션 추가하기 버튼을 누릅니다

 

 

카카오용 NodeMocaBird앱을 만듭니다.

앱 아이콘은 등록하지 않아도 되고, 앱 이름과 회사이름은 아무거나 해도 됩니다.

생성한 NodeMocaBird앱으로 들어가면 앱 키가 보입니다.

RestAPI를 복사해서 .env 파일에 넣습니다.

앱 설정 > 플랫폼에서 Web 플랫폼 등록 메뉴를 선택합니다.

사이트 도메인에는 http://localhost:8001을 입력합니다. (여러개의 주소를 입력할 수도 있습니다)

 

 

 

제품 설정 > 카카오 로그인 메뉴에서 활성화 설정 상태 스위치를 ON으로 설정한 후 Redirect URL을 수정합니다.

http://localhost:8001/oauth를 지우고 http://localhost:8001/auth/kakao/callback을 입력한 후 저장합니다. /auth/kakao/callback 부분은 kakaoStrategy.js의 callbackURL과 일치해야합니다.

 

 

 

제품 설정 > 카카오 로그인 > 동의 항목 메뉴로 가서 로그인 동의 항목을 작성합니다.

 원하는 정보가 있다면 설정 버튼을 누르고 동의 단계와 동의 목적을 입력하면 됩니다.

 

예제에서는 닉네임과 이메일이 반드시 필요합니다. 

닉네임 동의 단계에서는 필수 동의를 선택하고 동의 목적을 입력한 후 저장 버튼을 누릅니다.

 

이메일 동의 단계에서는 선택 동의를 선택하고, 혹시나 값이 없는 경우를 대비해 카카오 계정으로 정보 수집 후

제공 체크박스에 체크 표시 한 후 동의 목적을 입력합니다.

 

이제 NodeMocaBird 서비스에서 카카오톡 버튼을 눌러 GET /auth/kakao 라우터로 요청을 보내면 카카오 인증이 시작됩니다.

 

 

GET /auth/kakao 라우터의 passport.authenticate('kakao')에서 카카오 로그인 창으로 리다이렉트합니다.

이미 카카오에 로그인이 되어 있다면 로그인 화면이 뜨지 않습니다.

 

 

카카오 계정으로 로그인하면 NodeMocaBird 애플리케이션에 카카오 닉네임과 이메일을 제공할 지 묻는 화면으로 넘어갑니다.

전체 동의하기에 체크하고 동의하고 계속하기 버튼을 누릅니다.

 

 

 

 

나는 mysql workbench가 아닌 datagrip을 주러 쓰므로 로컬, 카카오 로그인 각각 진행 후 

데이터베이스를 확인하니 잘 되는거을 확인

 

 

Note: 카카오 로그아웃

로그아웃 버튼을 누르면 NodeBird 서비스에서 로그아웃됩니다.

다만, 카카오에서 로그아웃되는 것은 아니므로 다음 번에 카카오를 통해 NodeBird에 로그인할 때는 

카카오 로그인 없이 바로 서비스에 로그인됩니다.

카카오에서도 로그아웃 하고 싶으면 https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#logout

를 참조하면 됩니다.