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

FAQ

FAQ

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

게시글 검색
[외부 API] 페이스북 로그인을 연동하는 방법 
조회수:1751
2020-08-26 11:03:32

 

우선 페이스북 연동하려면 도메인이 정상적으로 세팅되어 있어야 정상작동 되므로 유념하시기 바랍니다.

 

1. https://developers.facebook.com/ 에서 회원가입 후 우측 내앱에 마우스 커서를 가져가면 메뉴가 출력되며 "새 앱 추가"을 클릭 합니다.

 

 

2. 표시 이름(앱의 제목)과 이메일(자신의 이메일) 카테고리를 입력 후 앱 ID 만들기를 클릭합니다.

 

 

 

3. 제품 추가에서 Facebook 로그인 설정 버튼을 클릭합니다.

 

 

 

 

4. 왼쪽 메뉴 설정을 클릭합니다.

 

 

 

5. 앱 ID 와 앱 시크릿 코드 값을 복사해 놓으시고 이 후 솔루션 페이스북 외부 연동 설정에 입력 하시면 됩니다. 각 필요 정보들을 입력하고 앱 도메인에는 연동할 사이트의 도메인을 입력합니다.

 

주의 하실점은 도메인은 반드시 www 를 포함한 전체 주소를 입력하셔야 하며 만약 모바일웹이 따로 있다면 m.domain.com 을 추가 등록하시기 바랍니다. 

 

그리고 반드시 [https 보안 서버] 를 지원하는 도메인만 사용 가능 합니다. (필수)  등록 후 아래 플랫폼 추가를 클릭합니다.

 

 

 

6. 플랫폼 선택에서 웹사이트를 선택합니다.

 

 

7. 도메인 주소를 입력해주세요. www 까지 포함해서 전체 주소를 입력해주셔야 합니다. 입력 후 우측 아래의 변경내용 저장을 클릭합니다.

 

 

 

* 페이스북 API 버전이 업데이트(v2.12) 되면서 OAuth 리디렉션 URL 값이 필수로 들어가야 합니다. 왼쪽메뉴 Facebook 로그인 - 설정에서 유효한 OAuth 리디렉션 URL 값에 https://도메인/ssl/ssl_facebook_redirect.php 를 입력해 주세요.

 

리디렉션 URL값을 홈페이지 도메인 주소만 변경하시고 그대로 넣어주세요.

 

 

8. 왼쪽메뉴 앱 검수를 클릭합니다.

 

 

 

 

9. 앱 공개 여부를 "예"로 변경합니다.

만약 예로 변경할수 없다면 사유를 유심히 읽어보시기 바랍니다. (대부분 도메인 및 이메일주소가 없어서 비활성화 되는 경우가 많습니다.)

 

 

 

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

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

 

 

 

11. 설치 후 [프로그램 SHOP > 프로그램 환경설정 > 외부 API 연동]으로 이동 후 위에서 복사해두었던 앱 ID와 앱 시크릿 코드 정보를 붙여 넣습니다. (Ctrl + V)

 

 

여기까지 작업 했다면 연동 작업은 모두 마무리 되었습니다. 실제 로그인 페이지를 만들어 보겠습니다.

 

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

 

 

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

<a href="javascript:FaceBookLoginAPI()">페이스북 로그인</a>

 

 

페이스북 최신버전인 경우(OAuth 리디렉션 URI 값이 필수버전 - v2.12)  아래 버튼 소스를 추가해주세요.

<a href="javascript:NewFaceBookLoginAPI()">페이스북 로그인</a>

 

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