주 콘텐츠로 건너뛰기

[페이스북] 로그인 설정 및 오류 해결 방법

페이스북 로그인 개발자 계정 생성부터 오류 사항 대응 방법에 대해 알려 드릴게요.
자세한 내용은 아래에서 확인해 주세요.

자세히 알아보기

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

입력 예시

 

 

5) 저장 후 위쪽의 토글 버튼을 눌러, '개발 중' 상태를 '라이브'로 변경 후 팝업 창에서 모드 전환을 선택해 주세요.

 

6) '대시보드'로 이동하여 '앱 시크릿 코드' 항목의 '보기' 버튼을 누르면 코드를 확인할 수 있어요.    
'앱 시크릿 코드' 항목이 노출되지 않는다면 '설정 > 고급 설정 > 보안에서 '앱 시크릿 코드 요청' 항목을 활성화해 주세요.

 

2-2. 페이스북 로그인 연동하는 방법

1) 왼쪽 메뉴에서 이용 사례 > 페이스북 로그인 > 인증 및 계정 만들기 '맞춤 설정' 을 눌러 주세요.

2번.png

 

2) 아래와 같은 화면이 나오면 왼쪽의 '설정 > 설정 페이지로 이동' 화면으로 이동해 주세요.

3번.png

3) '클라이언트 OAuth 설정' 중, '유효한 OAuth 리디렉션 URI(Valid OAuth Redirect URIs)' 항목에 아래와 같이 입력 후 저장해 주세요. 
※ http 형태의 주소는 입력할 수 없어요.

 

Info

입력 예시

 

 

4) 저장 후 위쪽의 토글 버튼을 눌러, '개발 중' 상태를 '라이브'로 변경 후 팝업 창에서 모드 전환을 선택해 주세요.

 

5) '대시보드'로 이동하여 '앱 시크릿 코드' 항목의 '보기' 버튼을 누르면 코드를 확인할 수 있어요.    
'앱 시크릿 코드' 항목이 노출되지 않는다면 '설정 > 고급 설정 > 보안'에서 '앱 시크릿 코드 요청' 항목을 활성화해 주세요.

 

3. 페이스북 로그인 쇼핑몰에 적용하기

1) [관리자] 쇼핑몰 설정 > 고객 설정 > 회원 가입 · 로그인 > SNS 로그인 연동 관리 를 눌러 주세요.   

 

 

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:// 형태의 주소는 입력할 수 없어요.
예시.

 입력 예시 외에 페이스북 로그인을 사용하는 2차 도메인이 존재한다면, 모든 도메인을 다중으로 입력해야 해요.

 ※ 2차 도메인: 대표 도메인, 서브 도메인, 모바일 도메인, 멀티샵 도메인 등

 

 

3-2) 입력 완료 후 '변경 내용 저장'을 눌러 주세요.

3-3) '앱 검수' 메뉴를 눌러 아래와 같이 앱 공개 여부를 '예'로 변경한 후, 새로 표시되는 창에서 '확인'을 눌러 주세요. 

  

디자인 수정하는 방법

페이스북 로그인 기능을 사용하기 위해서는 디자인을 수정해야 해요.

디자인 수정 방법은 아래 내용을 참고해 주세요.

[공지/소식] 페이스북 SNS 계정 연동 관련 공 지사항

 

연관 콘텐츠

이 페이지가 도움이 되었나요?
현재 콘텐츠