카카오 로그인 구현하기 (2)

아직 끝난 것이 아닙니다. kakaoStrategy.js에서 사용하는 clientID를 발급받아야 합니다. 카카오 로그인을 위해서는 카카오 개발자 계정과 카카오 로그인용 애플리케이션 등록이 필요합니다.

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

https://developers.kakao.com 접속

 

로그인 후 앱 메뉴에 앱 생성 버튼을 누릅니다.

애플리케이션 추가하기 버튼 클릭

 

다음 그림과 같이 카카오용 Norebird 앱을 만듭니다. 앱 아이콘은 등록하지 않아도 되고, 앱 이름과 회사명은 여러분이 원하는 대로 입력하면 됩니다.

앱 정보 작성 화면

앱 생성 후 화면

 

REST API 키를 복사하여 .env 파일에 넣습니다. 여러분의 키는 이 책의 키와 다르므로 이 책의 키 대신 여러분의 키를 넣어야 합니다.

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

플랫폼 등록 버튼 클릭

 

사이트 도메인에는 http://localhost:8001을 입력합니다. 만약 8001 외의 다른 포트를 사용하고 있다면 해당 포트를 적어야 합니다.

Enter를 눌러 여러 개의 주소를 입력할 수도 있습니다. 입력 후 저장 버튼을 누릅니다.

사이트 도메인 추가

 

제품 설정 > 카카오 로그인 메뉴에서 Redirect URI를 수정합니다. http://localhost:8001/oauth를 지우고 http://localhost:8001/auth/kakao/callback를 입력한 후 저장합니다. /auth/kakao/callback 부분은 kakaoStrategy.js의 callbaclURL과 일치해야 합니다.

Redirect URI

 

제품 설정 > 카카오 로그인 > 동의항목 메뉴로 가서 로그인 동의 항목을 작성합니다. 원하는 정보가 있디면 설정 버튼을 누르고 수집 목적을 입력하면 됩니다.

예제에서는 이메일이 반드시 필요합니다. 혹시나 값이 없는 경우를 대비해 카카오 계정으로 정보 수집 후 제공 체크박스에 체크한 후 저장 버튼을 누릅니다.

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

GET /auth/kako 라우터의 passport.authenticate('kakao')에서 카카오 로그인 창으로 리다이렉트합니다. 이미 카카오에 로그인되어 있다면 로그인 화먄이 뜨지 않습니다.