워드프레스 소셜 로그인 기능을 추가하면 사용자가 간편하게 로그인할 수 있어 사용자 경험을 크게 향상시킬 수 있다.
카카오톡, 구글, 페이스북, 애플, 네이버 계정으로 워드프레스에 로그인하는 기능을 추가하는 방법을 알아보자.
소셜 로그인이 필요한 이유
- 사용자 편의성
- 사용자는 별도의 회원가입 없이 소셜 계정으로 간편하게 로그인할 수 있다.
- 전환율 향상
- 복잡한 회원가입 절차를 줄여 전환율을 높일 수 있다.
- 사용자 정보 수집
- 소셜 로그인을 통해 사용자의 기본 정보(이메일, 프로필 사진 등)를 제공받을 수 있다.
플러그인 사용
워드프레스에서 소셜 로그인을 추가하는 가장 쉬운 방법은 플러그인을 사용하는 방법이다.
대표적인 플러그인은 다음과 같다.
추천 플러그인
- Super Socializer
- 카카오톡, 구글, 페이스북, 애플, 네이버 등 다양한 소셜 로그인을 지원한다.
- Nextend Social Login and Register
- 사용하기 쉬운 인터페이스와 다양한 소셜 로그인 옵션을 제공한다.
- Social Login, Social Sharing by miniOrange
- 30개 이상의 소셜 로그인을 지원하고 무료 버전도 제공된다.
플러그인 설치 방법
- 워드프레스 관리자 페이지로 이동
- [플러그인] » [새로 추가]
- 검색창에 원하는 플러그인 이름(예: Super Socializer) 검색
- [설치] » [활성화]
카카오톡 소셜 로그인 추가
카카오톡 소셜 로그인을 추가하려면 카카오 개발자 플랫폼에서 앱 키를 발급받아야 한다.
설정 방법
- 카카오 개발자 플랫폼에서 앱 등록
- 카카오 개발자 플랫폼에 접속하여 앱을 등록한다.
- 앱 키 발급
- “앱 키”를 발급받는다.
- Redirect URI 설정
- 워드프레스 사이트의 로그인 콜백 URL을 Redirect URI로 등록한다.
- https://yourwebsite.com/kakao-login-callback
- 플러그인 설정
- Super Socializer 또는 Nextend Social Login과 같은 플러그인에서 카카오톡 로그인을 활성화하고 발급받은 앱 키를 입력한다.
네이버 소셜 로그인 추가
네이버 소셜 로그인은 한국 사용자에게 매우 유용한 기능이다.
네이버 개발자 센터에서 앱 키를 발급받아 설정할 수 있습니다.
설정 방법
- 네이버 개발자 센터 접속
- 네이버 개발자 센터에 접속한다.
- 새 앱 등록
- [애플리케이션 등록] » 새 앱 등록
- 앱 키 발급
- “Client ID”와 “Client Secret”을 발급받는다.
- Callback URL 설정
- 워드프레스 사이트의 로그인 콜백 URL을 등록한다.
- https://yourwebsite.com/naver-login-callback
- 플러그인 설정
- Super Socializer 또는 Nextend Social Login과 같은 플러그인에서 네이버 로그인을 활성화하고 발급받은 Client ID와 Client Secret을 입력한다.
구글 소셜 로그인 추가
구글 소셜 로그인을 추가하려면 Google Cloud Platform에서 OAuth 2.0 클라이언트 ID를 발급받아야 한다.
설정 방법
- Google Cloud Platform 접속
- Google Cloud Platform에 접속한다.
- 프로젝트 생성
- 새 프로젝트를 생성한다.
- OAuth 동의 화면 설정
- 사용자에게 표시될 동의 화면을 설정한다.
- OAuth 클라이언트 ID 발급
- [API 및 서비스] » [사용자 인증 정보] » OAuth 클라이언트 ID를 발급받는다.
- Redirect URI 설정
- 워드프레스 사이트의 로그인 콜백 URL을 Redirect URI로 등록한다.
- https://yourwebsite.com/google-login-callback
- 플러그인 설정
- Super Socializer 또는 Nextend Social Login과 같은 플러그인에서 구글 로그인을 활성화하고 발급받은 클라이언트 ID와 비밀키를 입력한다.
페이스북 소셜 로그인 추가
페이스북 소셜 로그인을 추가하려면 Facebook for Developers에서 앱 ID를 발급받아야 한다.
설정 방법
- Facebook for Developers 접속
- Facebook for Developers에 접속한다.
- 새 앱 생성
- 새 앱을 생성하고 앱 ID를 발급받는다.
- OAuth 설정
- [Facebook 로그인] 제품을 추가하고 워드프레스 사이트의 로그인 콜백 URL을 Valid OAuth Redirect URIs로 등록한다.
- https://yourwebsite.com/facebook-login-callback
- 플러그인 설정
- Super Socializer 또는 Nextend Social Login과 같은 플러그인에서 페이스북 로그인을 활성화하고 발급받은 앱 ID와 비밀키를 입력합니다.
애플 소셜 로그인 추가
애플 소셜 로그인은 iOS 및 macOS 사용자에게 유용한 기능이다.
Apple Developer 계정이 필요하며 아래 단계를 따라 설정할 수 있다.
설정 방법
- Apple Developer 계정 생성
- Apple Developer에 접속하여 계정을 생성한다.
- 새 앱 등록
- [Certificates, Identifiers & Profiles] 메뉴에서 새 앱을 등록한다.
- 서비스 ID 생성
- [Identifiers] » [Services IDs]를 선택하고 새 서비스 ID를 생성한다.
- 이때, 웹사이트 도메인을 Bundle ID로 등록한다.
- 키 생성
- [Keys] » 새 키 생성 » Sign in with Apple을 활성화한다.
- 생성된 키 파일(.p8)을 다운로드한다.
- Redirect URI 설정
- Website URLs에 워드프레스 사이트의 로그인 콜백 URL을 등록한다.
- https://yourwebsite.com/apple-login-callback
- 플러그인 설정
- Super Socializer 또는 Nextend Social Login과 같은 플러그인에서 애플 로그인을 활성화하고 발급받은 키와 서비스 ID를 입력한다.
소셜 로그인 버튼 디자인 커스터마이징
플러그인을 사용하면 기본적으로 제공되는 소셜 로그인 버튼을 커스터마이징할 수 있다.
CSS를 사용하여 버튼의 색상, 크기, 위치 등을 변경할 수 있다.
/* 예시: 카카오톡 로그인 버튼 스타일 */
.social-login-button.kakao {
background-color: #ffcd00;
color: #000;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
}
/* 예시: 네이버 로그인 버튼 스타일 */
.social-login-button.naver {
background-color: #03c75a;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
}
/* 예시: 애플 로그인 버튼 스타일 */
.social-login-button.apple {
background-color: #000;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-align: center;
}각 플랫폼에서 앱 키를 발급받고 플러그인을 사용하여 설정하면 된다.
공부 목적 블로그