WordPress에 Facebook Login 추가하기(NextEnd Social Login plugin)

WordPress에 Facebook Login 추가하기(NextEnd Social Login plugin)

WordPress를 설치하고 Facebook Login을 설정하면서 겪은 내용을 정리합니다. 설정 완료할 경우 로그인 화면에 Continue with Facebook이라고 버튼이 생기고 Facebook으로 로그인이 가능하게 됩니다.

0. 선결 과제

페이스북 로그인을 설치하려면 다음 2가지 내용이 선결되어야 합니다.

워드프레스 사이트의 https 접속 지원
페이스북은 보안 이슈로 https를 지원하지 않는 사이트에 로그인 기능을 붙일 수 없도록 하고 있습니다.
만약 워드프레스 사이트를 http형식으로 사용하고 있다면 letsencrypt에서 무료 인증서를 다운로드하여 설치하는 것을 추천드립니다.

인증서 설치 내용은 아래 링크에 자세히 나와있으니 참고하시면 됩니다.
nginx 서버에 HTTPS 사용을 위한 SSL 인증서 발급받기 (Let’s Encrypt)
https://swiftcoding.org/nginx-lets-encrypt
nginx 웹서버의 SSL 보안설정과 HTTPS 라우팅 설정 방법(www 도메인 리다이렉팅)
https://swiftcoding.org/nginx-routing-conf

외부 접근가능한 개인정보 취급방침 URL
페이스북 로그인 설정 시 다음과 같은 형식의 개인정보 취급방침 URL을 요구합니다.
https://워드프레스주소/privacy.html 꼭! privacy.html으로 파일명을 해야 합니다.

개인정보 취급방침은 다음 사이트에서 만들 수 있습니다.
https://www.privacy.go.kr
자주 찾는 서비스 – 개인정보 취급방침 만들기를 클릭하여 관련된 내용을 작성한 후 최종 완료하면 해당 내용을 html 파일로 다운로드할 수 있습니다.

작성 내용은 사업자가 아닌 비영리적 목적 사용이므로 적당히 작성해주면 됩니다.
다운로드한 html 파일명을 privacy.html로 변경한 후 워드프레스의 www 최상위 경로에(/var/www/html) ftp로 업로드하여 html 주소에 접근 가능하도록 만들어줍니다.

1. NextEnd Social Login Plugin 설치.

Social 로그인을 위한 많은 Plugin이 있지만 여기서는 NextEnd의 플러그인을 설치합니다.

3. Facebook developer 가입 및 앱 생성

로그인을 붙이려면 페이스북 개발자 사이트에 가입하고, 앱을 생성해야 합니다.
https://developers.facebook.com/apps/ 로 이동하여 페이스북 ID로 로그인하고 새 앱 추가를 선택합니다.


앱 이름 및 연락처를 입력하고 보안 확인 후 제출합니다.

4. 대시보드 설정

메뉴 기본 설정에 들어갑니다. 앱 ID와 앱 시크릿 코드는 나중에 플러그인 설정 시 입력해야 하므로 내용을 복사해서 저장해 둡니다.
앱 도메인은 https://워드프레스 주소를 입력합니다. 연락처 이메일은 자동으로 입력되어 있으나 변경이 필요하면 다시 입력하면 됩니다. 개인정보처리 방침 URL에는 위에서 진행한 선결 과제에서 생성한 privacy URL을 입력합니다. 앱 아이콘 및 카테고리는 기호에 맞게 등록 및 선택하면 됩니다.

메뉴의 제품+를 눌러 Facebook 로그인 – 설정을 선택합니다. 플랫폼은 www(웹)를 선택합니다.

이후의 빠른 시작은 진행하지 않고 왼쪽 메뉴의 Facebook 로그인 – 설정을 클릭합니다.
하단의 유효한 Oauth 리디렉션 URI를 다음과 같은 형식으로 입력합니다.
https://워드프레스도메인/wp-login.php?loginSocial=facebook
나머지는 입력할 필요 없고 변경내용 저장을 누르고 나옵니다.

5. NextEnd Social Login 설정

워드 프레스 설정 – NextEnd social Login을 선택합니다.

Facebook Settings를 선택합니다. 저의 경우는 이미 세팅 완료되어있어 Enabled라고 뜨지만 최초 설정 시에는 Not Configured와 Getting Started 버튼이 보이게 됩니다.

Getting Started를 누르고 다음 화면에서 Settings 탭을 선택합니다.
이전에 페이스북 디벨로퍼 사이트에서 적어둔 appID와 appSecret 정보를 입력합니다. 완료되면 아래와 같이 뜨고 Verify Settings를 눌러서 페이스북 로그인을 테스트합니다.

로그인이 성공하면 아래와 같이 나타납니다. Enable을 눌러 워드프레스 사이트에 facebook로그인을 활성화시킵니다.

이제 페이스북 로그인이 가능하게 됩니다. 마지막으로 설정 – 일반에 들어가서 다음과 같이 멤버쉽 – 누구나 가입할 수 있습니다. 를 선택하고 저장합니다. 이것을 설정해야 다른 페북 계정을 가진 회원도 로그인이 가능해지게 됩니다.

공유
Close Menu