1. https://developers.kakao.com/ 으로 접속해서 회원가입 후 로그인 합니다.

2. 위 화면에서 [앱]을 클릭 합니다.

그리고 [앱 생성]을 클릭 합니다.

 

3. [앱 생성]을 클릭하면 위와 같은 창이 뜹니다.

여기서 앱 아이콘, 앱 이름, 회삼경, 카테고리를 입력하시고 저장 버튼을 눌러주세요.

 

4. 저장을 하면 위와 같은 화면이 나옵니다.

여기서 생성된 앱을 클릭합니다.

 

5. 플랫폼 키, 어드민 키에서 REST API키, JavaScript 키, 네이티브 앱 키,어드민 키를 조회할 수 있습니다.

위 키는 나중에 관리자 페이지에 연동을 해야되는 키값이기 때문에 해당 위치를 기억해 놓으시기 바랍니다.

좌측에 제품 링크 관리를 클릭합니다.

 

 

6. 제품 링크 관리에서 웹 도메인 등록을 클릭합니다.

 

 

7. 도메인 주소를 등록을 해주시기 바랍니다. 우측 + 버튼으로 여러 도메인을 등록할 수 있습니다.

www나 m으로 시작하는 도메인을 등록을 하시면 됩니다.

보안서버를 설치를 하신경우 https로 시작하는 도메인도 같이 등록을 해주세요.

예)

http://www.domain.com

https://www.domain.com

http://m.doamin.com

https://m.domain.com

(※ 디자인팜 2.0인 경우는 반응형이긴 하지만 반드시 모바일쪽 주소도 등록을 해주셔야 됩니다.)

 

 

7. 다음은 좌측에 카카오 로그인 일반을 클릭을 합니다.

카카오 로그인을 활성화를 해야됩니다. 상태를 ON으로 변경해 주시기 바랍니다.

 

 

8. 상태값이 ON이 된 것을 확인 후 플랫폼 키로 이동하여 REST API 키와 JavaScript 키를 각각 클릭합니다.

 

 

 

9. Redirect URI을 등록 합니다.

도메인 주소 뒤에 /API/kakao/redirect.php 값을 등록을 해주시면 됩니다.

예)http://www.domain.com/API/kakao/redirect.php

JavaScript SDK 도메인은 도메인 주소만 등록해주시면 됩니다.

예)http://www.domain.com

 

여기서 매우 중요한 부분 집고 넘어 가도록 하겠습니다.

카카오톡은 사이트 도메인주소가 정확한지 매번 검사하고 있습니다.

만약 카카오 톡에 http://내도메인.com 이라고 입력 하고, 실제 서비스 되는 홈페이지가 http://www.내도메인.com 인경우 카카오 API은 비인증 사이트로 보고 차단하게 됩니다.

이유는 간단합니다.

내도메인.com 와 www.내도메인.com은 엄연히 다른 도메인 주소로 간주하기 때문입니다.

이런경우 www있는 도메인과 없는 도메인 모두 다 등록 해줘야 합니다.

간혹 한사이트에 www.내도메인.com, www.내도메인.net, www.내도메인.co.kr, www.내도메인.kr 여러개의 도메인을 설치한 경우 모든 도메인을 다 등록 해줘야 합니다.

 

 

10. Redirect URI 등록 후 좌측에 동의항목을 클릭 후 개인정보 쪽에 닉네임 우측에 설정을 클릭합니다.

동의 단계에 필수동의를 체크를 하시고 동의 목적에는 카카오 로그인이라고 기재 후 하단에 저장을 눌러주세요.

 

카카오계정(이메일)도 설정을 클릭해 주시면 되는데 버튼이 비활성화되어 있을 수 있습니다.

 

 

 

11. 앱 > 일반 클릭 후 사업자 정보 등록을 클릭하여 사업자 정보를 입력 후 비즈 앱으로 전환하실 수 있습니다.

 

 

12. 비즈 앱으로 전환 후 동의항목에서 카카오계정(이메일)을 설정할 수 있습니다.

 

카카오 이메일 부분은 선택 동의를 체크해 주시고 동의 목적에는 카카오 로그인이라고 등록 후 저장을 하시면 됩니다.

 

 

13. 앱 > 플랫폼 키에서 "REST API 키" 를 클릭하셔서 클라이언트 시크릿이 비활성화 해주셔야 합니다.

만약 활성화되어 있다면 비활성화로 변경 후 저장하시면 됩니다.

 

 

14. 관리자 모드에서 "외부 API 연동" 모듈을 설치 합니다.

설치 방법은 [프로그램 SHOP > 프로그램 추가설치] 에서 찾아보시면 아래와 같이 설치 할수 있습니다. (자세한 설치방법은 본사로 별도 문의 바랍니다.)

 

 

15. 설치 후 [프로그램 SHOP > 프로그램 환경설정 > 외부 API 연동]으로 이동 후 카카오에서 발급되었던 key 4개를 모두 복사해서 붙여 넣습니다. (Ctrl + c , Ctrl + v)

그리고 SNS 가입 유형에 체크합니다.

간편 로그인은 로그인 목적으로 기본 정보만 회원 DB에 저장하여 로그인하는 형태입니다.

간편 회원가입은 실제 회원가입과 동일한 가입 절차를 거쳐 회원가입하는 형태입니다.

여기까지 작업 했다면 API 연동 작업은 모두 마무리 되었습니다.

 

 

 

16. [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 으로 이동하고 아래와 같이 "로그인" 페이지를 선택 합니다.

소스 수정 모드에서 아래와 같이 카카오 로그인 버튼을 추가 합니다.

 

<a href="javascript :kakao_login_form()" cond="!$app_conn_yn">[PC 및 모바일웹 전용] 카카오로그인</a>

<a href="javascript :app_kakao_login()" cond="$app_conn_yn">[APP 전용] 카카오로그인</a>

 

 

이렇게 해서 카카오 로그인 연동 작업이 마무리 되었습니다.

 

수고하셨습니다.