페이스북 로그인 개발자 계정 생성부터 오류 사항 대응 방법에 대해 알려 드릴게요.
자세한 내용은 아래에서 확인해 주세요.
자세히 알아보기
1. 페이스북 개발자 계정 생성하는 방법
1)
로 이동하여 기존 페이스북 계정으로 로그인 또는 새 계정을 만들어 주세요.
2) 로그인 후, '내 앱 버튼 클릭 > 앱 만들기 > 앱 유형 선택: 소비자'를 선택하여 신규 앱을 생성해 주세요.
2. 페이스북 로그인 연동은 앱마다 달라 각 상태에 맞는 설정으로 진행해 주세요.
2-1. 페이스북 로그인 연동하는 방법
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) '대시보드'로 이동하여 '앱 시크릿 코드' 항목의 '보기' 버튼을 누르면 코드를 확인할 수 있어요.
'앱 시크릿 코드' 항목이 노출되지 않는다면 '설정 > 고급 설정 > 보안에서 '앱 시크릿 코드 요청' 항목을 활성화해 주세요.
2-2. 페이스북 로그인 연동하는 방법
1) 왼쪽 메뉴에서 이용 사례 > 페이스북 로그인 > 인증 및 계정 만들기 '맞춤 설정' 을 눌러 주세요.
2) 아래와 같은 화면이 나오면 왼쪽의 '설정 > 설정 페이지로 이동' 화면으로 이동해 주세요.
3) '클라이언트 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차 도메인: 대표 도메인, 서브 도메인, 모바일 도메인, 멀티샵 도메인 등
4) 저장 후 위쪽의 토글 버튼을 눌러, '개발 중' 상태를 '라이브'로 변경 후 팝업 창에서 모드 전환을 선택해 주세요.
5) '대시보드'로 이동하여 '앱 시크릿 코드' 항목의 '보기' 버튼을 누르면 코드를 확인할 수 있어요.
'앱 시크릿 코드' 항목이 노출되지 않는다면 '설정 > 고급 설정 > 보안'에서 '앱 시크릿 코드 요청' 항목을 활성화해 주세요.
3. 페이스북 로그인 쇼핑몰에 적용하기
1) 를 눌러 주세요.
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) '앱 검수' 메뉴를 눌러 아래와 같이 앱 공개 여부를 '예'로 변경한 후, 새로 표시되는 창에서 '확인'을 눌러 주세요.
디자인 수정하는 방법
페이스북 로그인 기능을 사용하기 위해서는 디자인을 수정해야 해요.
디자인 수정 방법은 아래 내용을 참고해 주세요.