Customer Satisfaction
고객만족센터
친절하고 빠른 응대와 실시간 정보공유로
최적화된 의사 소통의 공간과 정보제공의 장을 제공해 드립니다.

FAQ

FAQ

솔루션을 이용하는 회원님들이 가장 많이 문의하시는 내용.

게시글 검색
[외부 API] 카카오 아이디 로그인을 연동하는 방법 
조회수:1841
2020-08-26 11:05:48

 

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

 

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

 

 

 

3. 좌측메뉴에서 [앱만들기]를 클릭 합니다.

 

 

4. 앱이름과 회사명을 적당한걸로 입력하세요. 아이콘은 선택사항입니다. (상호 또는 홈페이지 이름)

 

 

4-1. 아이콘을 등록하지 않으면 아래와 같은 메시지가 나타나는데 계속 진행을 하시면 다음단계로 진행 할 수 있습니다.

 

5. 앱이름을 입력하고 나면 아래와 같인 API 키가 4개가 발급됩니다.

 

 

6. 키발급 후 좌측메뉴에서 일반을 클릭하고 플랫폼 추가를 클릭 합니다.

 

7. 아래와 같이 도메인주소를 등록 해주세요.

여기서 매우 중요한 부분 집고 넘어 가도록 하겠습니다. 카카오톡은 사이트 도메인주소가 정확한지 매번 검사하고 있습니다. 만약 카카오 톡에 http://내도메인.com 이라고 입력 하고, 실제 서비스 되는 홈페이지가 http://www.내도메인.com 인경우 카카오 API은 비인증 사이트로 보고 차단하게 됩니다.

 

이유는 간단합니다. 내 도메인.com 와 www.내도메인.com은 엄연히 다른 도메인 주소로 간주하기 때문입니다. 이런경우 www가 있는 도메인과 없는 도메인 모두 다 등록 해줘야 합니다.

 

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

 

[예시]

 

8. 웹플랫폼을 추가했다면 사용자관리에 가서 활성화를 해주시기 바랍니다.

 

 

8-1. 사용자 관리를 활성화 하면 아래와 같이 나오는데요  수집목적에는 "단순 로그인으로 이용" 이라고 기재를 하시고 저장을 하시면 됩니다.

 

 

 

8-2. 그리고 하단에 로그인 Redirect URI를 수정을 하시면 되는데요 현재는 http://www.도메인주소/oauth라고 되어있는데 /oauth를 /API/kakao/redirect.php로 변경을 해주시면 됩니다.

 

 

8-3. 아래와 같이 변경을 하시고 저장을 클릭해주시면 됩니다.

도메인을 여러개 등록을 하셨으면 등록하신 모든 도메인을 위와 같은 방법으로 동일하게 처리를 해주시기 바랍니다.  /API/kakao/redirect.php (띄어쓰기가 포함되지 않도록 정확하게 복사해서 붙여주세요.)

 

9. 켈리컴퍼니 솔루션 관리자 모드에서 "외부 API 연동" 모듈을 설치 합니다.

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

 

 

 

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

 

 

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

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

 

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

 

 

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

 

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

 

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