이번 포스트에서는 워드프레스에서 페이스북(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를 제공해줍니다.

 

위의 이미지는 Nextend Social Login Plugin의 페이스북 화면인데, 붉은색 사각형 박스에 “유효한 redirection URI”를 알려주고 있습니다. 이 부분을 드래그해서 복사(Copy)한 후 페이스북 소셜 로그인 OAuth 설정화면에 “유효한 redirection URI” 필드에 붙여넣기(Paste)합니다.

아래에 “변경내용 저장” 버튼을 클릭합니다.

 

이제 설정이 거의 다 끝나갑니다.

지금까지 설정은 “개발단계”인데, 이 페이스북 로그인 앱이 나 자신의 웹사이트에서 적용되려면 상단의 “개발중(In development)” 스위치 버튼을 클릭합니다. 그러면 이제 “라이브됨(Live)“로 바뀌게 됩니다.

마지막으로 “설정” 메뉴 –  “기본설정”을 클릭하고, “앱ID(AppID)“와 “앱 시크릿 코드(App secret)“를 복사해서 워드프레스 소셜로그인 플러그인의 페이스북 셋팅에 입력합니다. 앱 시크릿 코드는 우측에 “보기(Show)” 버튼을 클릭해야 보이게 됩니다.

이 두 개의 AppID와 시크릿 코드는 절대로 외부에 유출되지 않도록 관리합니다.

 

아래는 Nextend Social Login 플러그인에서 제공해주는 페이스북 소셜로그인 방법에 대한 동영상입니다. 영어로 설명하고 있으나 보시면서 따라하시면 쉽게 하실 수 있습니다.