매뉴얼

외부 API 카카오 아이디 로그인 연동하는 방법

 

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


2. 위의 화면에서 [내 애플리케이션]을 클릭 합니다.

그런 뒤 애플리케이션 추가하기를 클릭 합니다.

 


3. 애플리케이션 추가하기를 하면 아래와 같은 창이 뜨는데요 

여기서 앱아이콘, 앱이름, 사업자명을 입력하시고 저장버튼을 눌러주세요

(※ 앱아이콘은 선택사항입니다.)

 


 

4. 앱이름과 회사명을 넣고 저장을 하면 아래와 같은 화면이 나옵니다.

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

 


5. 앱을 클릭하면 요약정보가 나옵니다. 

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

좌측에 플랫폼을 클릭합니다.

 

6. 플랫폼에서 Web 플랫폼 등록을 클릭합니다.

 

 

7. 사이트 도메인 부분에 도메인 주소를 등록을 해주시기 바랍니다.

예시부분의 내용은 무시를 하시고 www나 m으로 시작하는 도메인을 등록을 하시면 됩니다.

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

예)

http://www.domain.com

https://www.domain.com

http://m.doamin.com

https://m.domain.com

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

 

 

7. 도메인을 등록한 화면 입니다.

다음은 좌측에 카카오 로그인을 클릭을 하십니다.

 

 

8. 카카오 로그인을 활성화를 해야됩니다. 상태를 클릭을 해주시기 바랍니다.

 

 

9. 그리고 활성화를 클릭을 해주세요

 

9. 상태값이 ON이 된 것을 확인 후 Redirect URI 등록 버튼을 클릭 합니다.

 

10. Redirect URI을 등록 합니다.

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

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

 

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

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

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

이유는 간단합니다.

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

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

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

 

 

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

 

 

 

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

 

 

 

11. 카카오 이메일 부분도 설정을 클릭을 해주시기 바랍니다.

 

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

 

 

 

(만약 카카오 로그인은 필요 없고, 카카오 링크만 사용하려는 경우 여기까지만 작업하시면 됩니다.)

 

 

12. 마지막으로 요약 정보에 가셔서 앱기에 등록된 네이티브 앱키, REST API키, JavaScript 키, Admin키를 확인 합니다.

 

 

 

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

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

 

 

 

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

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

 

 

 

 

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

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

 


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

 

 

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

 

수고하셨습니다.

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top