[Kakao] 카카오 로그인 API - 1. 설정

 

목차
1. 카카오 디벨로퍼스 로그인
2. 애플리케이션 추가하기
3. Web 플랫폼 등록
4. Redirect URI 등록
5. 동의 항목 설정
6. Logout Redirect URI 등록
7. 카카오 로그인 버튼 준비

 

 

이런저런 홈페이지들 돌아다니시면서
로그인 창에서 다른 SNS로 로그인하는 버튼 많이 보셨을 겁니다.
오늘은 그중 카카오 로그인을 구현해보겠습니다.
(Web 구현, Javascript 사용)

일단은 코드 짜기에 앞서 필요한 항목들 설정부터 하겠습니다.

 

---

 

1. 카카오 디벨로퍼스 로그인

Kakao Developers

먼저 카카오 디벨로퍼스 로그인이 필요합니다.
이후 '애플리케이션 추가하기'를 하겠습니다.

 

 

2. 애플리케이션 추가하기

앱 아이콘은 넣지 마시고, 앱 이름은 임의로 작성하시면 됩니다.
앱 아이콘을 넣을 경우 사업자로 간주되어 검수 시간이 길어진다고 하네요.

저의 경우엔 그냥 'LoginAPI'라고 했습니다.
사업자명도 대충 쓰시면 됩니다. 저는 'personal'이라고 했습니다.

 

앱 키가 생성되었습니다.
저희는 이중 세 번째 'Javascript 키'를 사용할 겁니다.
귀찮은 일을 줄이려면 따로 메모장에 저장해주셔야 합니다.

 

 

3. Web 플랫폼 등록

왼쪽 메뉴에서 '앱 설정' > '플랫폼'을 선택합니다.

Javascript SDK로 카카오 API를 사용하기 위해서는 도메인 등록이 필요합니다.

'어어 난 배포 안 했는데?' 하시는 분들은 저처럼 'http://localhost:서버포트' 사용해주시면 됩니다.
'난 했는데?' 하시는 분들은 그 주소 등록해주시면 됩니다.

 

 

4. Redirect URI 등록

왼쪽 메뉴에서 '카카오 로그인'을 선택합니다.

상태를 'On'으로 바꿔서 활성화시켜준 뒤 Redirect URI 등록하겠습니다.

Redirect URI는 카카오 로그인이 완료된 후 리다이렉트될 페이지입니다.
리다이렉트 될 페이지의 경로를 작성해주시면 됩니다.

'http://localhost:서버포트/프로젝트명/경로' 이런 식입니다.

 

 

5. 동의 항목 설정

이제 왼쪽 메뉴에서 '카카오 로그인' > '동의 항목' 으로 들어가서 동의 항목 설정해주겠습니다.

필요하신 항목이 있으시다면 옆에 '설정' 들어가셔서 '필수 동의' 혹은 '선택 동의' 선택해주시면 됩니다.
저의 경우에는 닉네임, 프로필 사진, 카카오 계정(이메일) 정도만 사용할 것이기 때문에 이 세 가지만 설정해줬습니다.

이때 선택하신 항목의 ID를 따로 적어두시기 바랍니다. (ex. profile_nickname, profile_image, account_email)
나중에 사용할 겁니다.

 

이메일의 경우에는 사업자 등록이 되어있지 않아 선택 동의까지만 가능합니다.
동의 목적은 간단하게 '서비스 사용'이라고 적어줬습니다.

 

 

6. Logout Redirect URI 등록

저희는 로그아웃까지 구현해볼 겁니다.
옆의 메뉴에서 '카카오 로그인' > '고급' 으로 들어갑니다.

Logout Redirect URI를 등록합니다.
로그아웃 후 리다이렉트될 페이지 경로를 등록해주시면 됩니다.

아까 등록했던 Redirect URI처럼 'http://localhost:서버포트/프로젝트명/경로' 이렇게 등록해주시면 됩니다.

 

 

7. 카카오 로그인 버튼 준비

카카오 로그인 버튼을 카카오 디벨로퍼스에서 다운받겠습니다.
임의로 로그인 버튼 만드시기보단 카카오 디자인 규정 따라주시는 것이 좋습니다.

Kakao Developers

 

원하는 형태 선택하시고 아래 '다운로드(.png)'나 '전체 다운로드(.zip)'를 클릭하시면 됩니다.
이미지 미리보기를 우클릭해서 '이미지 주소 복사' 해도 됩니다.
저는 이미지 주소 복사해서 사용하겠습니다.
이렇게 하실 거면 메모장에 또 적어주시면 됩니다.

 

 

---

 

본격적으로 코딩에 들어가기에 앞서 준비는 다 끝났습니다.
여기까지 잘 따라오셨다면 메모장에는

1. Javascript 키
2. 동의 항목 ID
3. 카카오 로그인 버튼 이미지 주소(선택)

가 적혀있어야 합니다.

 

이어서 다음 게시물에서는 카카오 로그인 구현해보겠습니다.

수고하셨습니다.