https://developers.facebook.com/apps
로그인 또는 가입하여 보기
Facebook에서 게시물, 사진 등을 확인하세요.
www.facebook.com
페이스북 소셜 로그인 AppID와 Secret Key 설정 방법
페이스북에서 제공하는 소셜 간편 로그인을 이용하기 위해 페이스북 개발 페이지로 들어가서 AppID와 Secret Key를 발급받는 과정을 설명합니다.
medipress.co.kr
이번 포스트에서는 워드프레스에서 페이스북(Facebook)의 소셜로그인(간편로그인)을 이용할 수 있도록 개발자 환경에서 AppID와 Secret Key를 얻는 방법에 대해 살펴봅니다.
페이스북이나 구글, 트위터 등 소셜네트워크 회사에서는 자체적으로 여러 종류의 개발서비스환경을 구축하고 홈페이지 관리자들이 그 서비스들을 유료 또는 무료로 이용할 수 있도록 하고 있습니다. 다만 이 서비스를 이용하려면 소셜 네트워크 회사에 인증을 통과해야 하는데, 그 방법이 API(Application programming interface key)를 발급받아야 합니다.
그 첫번째로 먼저 페이스북의 API key를 발급받아 보도록 합니다.
주의:
1. 다만 각 소셜 네트워크 회사에서 제공하는 개발자 페이지 디자인이나 절차는 가끔씩 업데이트가 되므로, 이 글을 보는 시기에 따라 아래 이미지와 달라질 수 있습니다.
2. 페이스북에서 제공하는 앱 개발을 위해서는 자신의 웹사이트에 SSL(보안인증서버)의 설치가 필수적입니다. 즉 도메인이 https:// 로 시작하는 웹사이트에서만 아래의 과정을 거쳐 페이스북 소셜 로그인을 이용할 수 있다는 뜻입니다.
우선 페이스북의 앱 개발자 페이지( https://developers.facebook.com/apps/ )로 접속합니다.
페이스북 게정으로 로그인을 하면 아래 웹페이지로 들어옵니다.
페이스북에서 아무런 앱 개발을 하지 않았다면 관리자 앱이 하나도 없을 겁니다.
우측 상단에 초록색 “앱만들기” 버튼을 클릭합니다.
기타를 선택합니다.
표시할 앱이름과 앱 연락처 이메일을 입력하고 “앱 만들기” 버튼을 클릭합니다.
제품 추가에 Facebook 로그인을 선택하세요. 설정 버튼을 클릭합니다.
이 단계는 애플리케이션 코드의 개발자에게 필요한 단계로 우측 화면의 동그라미 중에 선택할 필요는 없고, 좌측에 “설정” 메뉴 – 그리고 “기본설정“을 클릭합니다.
앱도메인 필드에 자신의 사이트 주소를 https:// 또는 http://까지 포함해서 입력합니다.
그 아래 개인정보처리방침 url을 적어주세요. 만약 아직까지 없다면 워드프레스 관리자 페이지에서 privacy 페이지를 “공개”하면 됩니다. (내용은 추후에 수정해도 됩니다)
앱 아이콘이 있다면 이미지 파일을 규격에 맞게 업로드해도 됩니다.
“앱 목적” 부분에 “회원님 또는 소유한 비즈니스(Business Use)“를 선택합니다.
그 오른쪽에 카테고리 선택을 클릭하고 원하는 것을 선택해주세요.
그 아래쪽에 주소 등도 입력할 수 있는데, 선택사항이므로 넘어가고 “변경 내용 저장” 버튼을 클릭합니다.
이제 좌측에 “페이스북 로그인” 메뉴를 클릭하고 다시 “설정”을 선택합니다.
위 이미지에서 화살표 부분에 선택되어 있는지를 확인하고, 유효한 OAuth 리디렉션 URI에 웹사이트의 유효 리디렉션 URI를 입력합니다. 보통 워드프레스에서는 소셜 로그인 플러그인에서 그 URI를 제공해줍니다.
( 어플리케이션 개발 시 페이스북에서는 localhost 리디렉션에 대해 개발모드시 자동으로 허용되므로 리디렉션 URI정보에 따로 적지 않아도 됩니다.>>원래 안됐는데 나중에 다시 시도하니까 돼서 리디렉션 URI를 http://localhost:3000/facebook/login로 설정했다. 밑에 사이트 URL은 http://localhost:3000)
(이건 안함)
위의 이미지는 Nextend Social Login Plugin의 페이스북 화면인데, 붉은색 사각형 박스에 “유효한 redirection URI”를 알려주고 있습니다. 이 부분을 드래그해서 복사(Copy)한 후 페이스북 소셜 로그인 OAuth 설정화면에 “유효한 redirection URI” 필드에 붙여넣기(Paste)합니다.
아래에 “변경내용 저장” 버튼을 클릭합니다.
이제 설정이 거의 다 끝나갑니다.
지금까지 설정은 “개발단계”인데, 이 페이스북 로그인 앱이 나 자신의 웹사이트에서 적용되려면 상단의 “개발중(In development)” 스위치 버튼을 클릭합니다. 그러면 이제 “라이브됨(Live)“로 바뀌게 됩니다.
마지막으로 “설정” 메뉴 – “기본설정”을 클릭하고, “앱ID(AppID)“와 “앱 시크릿 코드(App secret)“를 복사해서 워드프레스 소셜로그인 플러그인의 페이스북 셋팅에 입력합니다. 앱 시크릿 코드는 우측에 “보기(Show)” 버튼을 클릭해야 보이게 됩니다.