팁·활용

• 목록
• 스크랩

사용하기 적합한 상황과 적용 범위

그누보드5 사이트에 페이스북 및 카카오 소셜 로그인 플러그인을 연동하여 방문자가 간편하게 회원가입 및 로그인을 할 수 있도록 설정하려는 운영자와 개발자에게 적합합니다.

페이스북 개발자 앱 설정 및 키 발급 방법

페이스북 개발자 센터에 접속하여 개발자 등록을 마친 후 새 앱을 생성합니다. 앱 이름과 이메일 주소를 입력하여 앱 ID를 만들고, 제품 추가에서 Facebook 로그인을 선택한 뒤 플랫폼을 웹으로 지정합니다. 소셜 로그인을 적용할 사이트 URL을 입력하고 저장합니다.

대시보드 메뉴에서 Facebook 로그인 설정으로 이동하여 유효한 OAuth 리디렉션 URI를 입력합니다. SSL 인증서가 적용된 사이트라면 https 주소를 입력하며, 입력 예제는 다음과 같습니다.

http://example.com/plugin/oauth/callback.php

대시보드에서 확인 가능한 앱 ID와 앱 시크릿 코드를 그누보드 설정에 활용합니다. 플러그인 설치 후 기본적인 테스트가 완료되면 앱 검수 메뉴에서 앱 공개 상태를 개발 모드에서 라이브 모드로 변경합니다.

카카오 개발자 앱 설정 및 REST API 키 발급 방법

카카오 개발자 센터에서 새 앱을 생성한 뒤, 좌측 메뉴의 설정 및 일반 메뉴에서 발급된 키를 확인합니다. 플랫폼 추가 버튼을 클릭하여 웹을 선택하고 적용할 사이트 도메인 주소를 입력합니다. 다음 화면에서 Redirect Path 경로를 설정합니다.

/plugin/oauth/callback.php?service=kakao

카카오 로그인 API에서 사용되는 키는 발급된 키 중 REST API 키를 사용합니다. 또한 설정 메뉴의 사용자 관리로 이동하여 상태를 ON으로 변경하고 적절한 수집 목적을 입력합니다. 회원가입 용도로 사용할 경우 이메일은 반드시 필수로 체크해야 합니다.

적용 후 정상 동작 확인 및 백업·복구 안내

소셜 로그인 설정과 플러그인 적용 전에는 기존 설정 및 데이터의 백업 상태를 확인해야 합니다. 설정 완료 후에는 실제로 로그인을 시도하여 정상적으로 계정 연동과 회원가입이 이루어지는지 테스트해야 합니다. 페이스북의 경우 테스트 완료 후 반드시 라이브 모드로 전환해야 일반 사용자가 로그인할 수 있으며, 카카오는 사용자 관리 설정에서 이메일 수집 항목이 올바르게 체크되었는지 확인해야 합니다. 만약 연동 중 오류가 발생할 경우 기존 백업본을 참조하여 이전 상태로 복구할 수 있습니다.

함께 보면 좋은 글

• 그누보드5 소셜 로그인 플러그인 설치 및 설정 방법
• 그누보드 로그인 페이지 소셜 로그인 버튼 가로 100% 레이아웃 수정 방법
• 그누보드5 카카오 우편번호 서비스 CDN 경로 업데이트 및 스크립트 오류 해결 방법