페이스북 로그인 개발자 계정 생성부터 오류사항 대응 방법에 대해 안내해드릴게요.
자세히 알아보기
1. 페이스북 개발자 계정 생성 방법
1) 로 이동하여 기존 페이스북 계정으로 로그인 또는 새 계정을 만들어주세요.
2) 로그인 후, '내 앱 버튼 클릭 > 앱 만들기 > 앱 유형선택 : 소비자'를 선택하여 신규 앱을 생성해 주세요.
2. 페이스북 로그인 연동방법
1) 생성한 앱의 '설정 > 기본설정'으로 이동하여, '개인정보처리방침 URL 항목'에 개인정보처리방침 내용이 들어가 있는 쇼핑몰 페이지 주소를 입력 후 저장해요. (http 형태의 주소는 입력이 불가해요.)
입력 예시) https://도메인/member/privacy.html (카페24에서 기본 제공하는 주소)
2) 좌측 메뉴에서 제품 추가 > Facebook 로그인 설정을 클릭해 주세요.
3) 아래와 같은 화면이 나오면 좌측의 'Facebook 로그인 > 설정' 화면으로 이동해 주세요.
4) '클라이언트 OAuth 설정' 중, '유효한 OAuth 리디렉션 URI(Valid OAuth Redirect URIs)' 항목에 아래와 같이 입력 후 저장해요.
※ http 형태의 주소는 입력이 불가해요.
Info - 입력 예시
-
sample.com 이라는 도메인을 사용하는 경우
https://sample.com/Api/Member/Oauth2ClientCallback/facebook/
https://www.sample.com/Api/Member/Oauth2ClientCallback/facebook/
https://m.sample.com/Api/Member/Oauth2ClientCallback/facebook/
-
입력 예시 외에 페이스북 로그인을 사용하는 2차 도메인이 존재하는 경우, 모든 도메인을 다중으로 입력하시면 돼요.
-
2차 도메인: 대표 도메인, 서브 도메인, 모바일 도메인, 멀티샵 도메인 등
5) 저장 후 상단의 토글 버튼을 클릭하여 '개발 중'상태를 '라이브'로 변경 후 팝업창에서 모드 전환을 선택해요.
6) '대시보드'로 이동하여 '앱 시크릿코드' 항목의 '보기' 버튼을 클릭하시면 코드를 확인할 수 있어요.
'앱시크릿코드' 항목이 노출되지않는경우 '설정 > 고급설정 > 보안에서 '앱 시크릿 코드 요청' 항목을 활성화해 주세요.
3. 페이스북 로그인 쇼핑몰에 적용하기
1) 카페24 관리자의 를 클릭해 주세요.
2) 페이스북 로그인을 '사용함' 체크 후, App ID와 App Secret Code를 입력해요.
(App ID와 시크릿코드는 페이스북 개발자센터에서 확인가능 해요.)
3) 쇼핑몰 사이트에 버튼을 노출하기 위해 디자인 소스 적용이 필요해요. (PC/Mobile)
3-1)
3-2) 페이스북 로그인시 로그인 페이지가 https://로 설정이 되어있어야 하므로, 해당 페이지를 https://로 설정해요.
ㄴ 사이트에 접속 시 무조건 https로 접속되게 하려면 어떻게 해야 하나요?
3-3) 원활한 페이지 이동을 위해 SSL 적용시 디자인변경 을 진행해요.
페이스북 로그인 오류시 대응 방안
1) 페이스북 아이디로 로그인 시 아래 이미지와 같은 내용이 노출될 경우 페이스북 개발자 설정을 확인 및 설정해야 해요.
2) 페이스북 개발자 설정에서 '설정 > 클라이언트 OAuth 설정'에서 '리디렉션 URI에 Strict 모드 사용'
항목을 '예'로 설정해요.
※ 현재 자동으로 '예' 설정이 적용됩니다.
3) 'Facebook 로그인 > 클라이언트 OAuth 설정'의 '유효한 OAuth 리디렉션 URI'항목에 페이스북 로그인을 사용할 모든 도메인에 아래와 같이 입력해요.
3-1) http:// 형태의 주소는 입력이 불가해요.
예시)
- https://sample.com/Api/Member/Oauth2ClientCallback/facebook/
- https://www.sample.com/Api/Member/Oauth2ClientCallback/facebook/
- https://m.sample.com/Api/Member/Oauth2ClientCallback/facebook/
입력 예시 외에 페이스북 로그인을 사용하는 2차 도메인이 존재할 경우 모든 도메인을 다중으로 입력해요.
※ 2차 도메인: 대표 도메인, 서브 도메인, 모바일 도메인, 멀티샵 도메인 등
3-2) 입력 완료 후 '변경 내용 저장'을 클릭합니다.
3-3) '앱 검수'메뉴를 클릭하여 아래와 같이 앱 공개여부를 '예'로 변경한 후 새로 표시되는 창에서 '확인'을 클릭해 주세요.
디자인 수정 방법
페이스북 로그인 기능을 사용하기 위해서는 디자인 수정이 필요해요.
디자인 수정 방법은 아래 내용을 참고해 주세요.