일반적으로 워드프레스로 사이트를 만들 때 고민하게 되는 중 하나가 사용자 처리를 어떻게 하냐 하는 부분입니다. 물론 워드프레스는 자체로 훌륭한 사용자 인증 시스템을 갖추고 있습니다. 하지만 이런 저런 이유들로 인해 워드프레스 기본 사용자 로그인 시스템 대신 다른 것을 고려하게 되는 경우가 종종 생기는데요. 예를 들면 다음과 같은 경우입니다.
- 로그인/회원가입 페이지를 다르게 가져가고 싶다
- SNS 계정 등을 통한 소셜 로그인을 추가하고 싶다
- 하나의 계정으로 여러 사이트에 동시에 인증하고 싶다
이럴 경우에는 어쩔 수 없이 다른 솔루션들을 찾아보게 되는데요. 워드프레스에서라면 당연히 어디 괜찮은 플러그인 없나부터 살피겠죠.
이 중 워드프레스 회원가입이나 멤버십 관련해서는 이미 여러 좋은 플러그인들이 나와 있고 저희 가이드에서도 여러 차례 소개해 드린 적이 있는 것 같은데요.
오늘은 조금 결이 다른 솔루션을 하나 소개하려 합니다. 외부 사용자 인증 서비스를 통한 사용자 인증 처리 솔루션인데요. Auth0 라는 클라우드 기반 사용자 인증 서비스를 통해 워드프레스에서 사용자를 관리하는 방법을 소개합니다.
Auth0는 웹 애플리케이션과 모바일 앱을 포함한 다양한 사이트와 애플리케이션에 대한 인증을 처리해 주는 클라우드 서비스인데요. 워드프레스 사이트를 위해 별도의 플러그인을 제공하고 있습니다.
Login by Auth0 플러그인 설치
자! 그럼 플러그인부터 한번 설치해 보겠습니다. 워드프레스 플러그인 디렉터리에서 “Auth0”를 검색하여 “Login by Auth0” 플러그인을 찾아 설치하고 활성화 시키면 됩니다.
플러그인을 활성화시키면 아래와 같이 셋업 위저드 페이지가 나옵니다.
Auth0 셋업
여기서 몇 가지 셋업을 해주면 되는데요. 우선 Auth0 서비스에 가입하는 게 가장 먼저겠죠. 아직 Auth0 사이트에 가입하지 않았다면 가입을 하면 되고, 만약 이미 가입한 사용자라면 Auth0에 로그인하세요.
가입은 자체 이메일 또는 GitHub나 Google, Microsoft 계정 중 편한 걸로 하면 되구요. 가입(또는 로그인)이 완료되면 다음과 같이 Auth0 대시보드가 나옵니다.
아직 Auth0에 익숙하지 않은 분들이라면 좌측 사이드바에 있는 메뉴를 이곳저곳 눌러보며 어떤 기능이 있는지 한번 감을 잡아 보세요. 자, 그러면 이제 다시 워드프레스로 돌아 오겠습니다.
Login by Auth0 플러그인에서는 다음과 같이 여러 가지 셋업 방법을 제공하고 있는데요.
- Standard Setup : 사이트를 처음 설치할 때 사용하는 기본 셋업
- User Migration Setup : 이미 사용자 데이터가 있을 때 사용자 데이터 마이그레이션
- Manual Setup : Auth0에 익숙한 경우 직접 애플리케이션과 데이터베이스 설정
- Import Setup : 다른 사이트의 셋업을 불러와 사용
여기서는 표준 방식인 Standard Setup을 사용하기로 하겠습니다. 표준 셋업을 처리하기 위해서는 다음 2가지 정보가 필요한데요. (이 정보는 User Migration Setup 방식에서도 똑같이 필요합니다)
- 테넌트 도메인(Tenant Domain)
- Management API 토큰(token)
이들 정보는 Auth0 대시보드에서 가져와 워드프레스 셋업 화면에 입력하면 됩니다. 여기서 테넌트(tenent)는 Auth0에서 인증을 처리하는 기본 단위인데요. 같은 테넌트 내에 속한 애플리케이션 간에는 싱글사인온(SSO)이 적용됩니다.
그러니 만약 내가 A사이트와 B사이트를 Auth0로 연결하고 같은 테넌트 아래에 둔다면 A사이트로 로그인한 정보를 이용해 B사이트에도 자동으로 로그인할 수 있게 되는 것이죠.
Auth0 대시보드 좌측 상단에 보면 테넌트 명이 보일 텐데요. 알파벳 및 숫자 조합으로 생성된 임의의 문자열입니다. 테넌트 도메인은 이 테넌트 명을 포함하는 도메인 주소이며, “Application > APIs” 메뉴 등 여러 곳에서 확인할 수 있습니다.
테넌트 도메인 명과 API 토큰값을 입력하여 워드프레스 대시보드 셋업에 입력한 후 “Start Standard Setup” 버튼을 클릭하세요.
입력값이 제대로 입력되었다면 다음 단계로 넘어 갑니다.
이 단계에서는 SNS 소셜 로그인을 사용하는 경우 연결 처리를 마이그레이션하는 부분입니다. 일단 여기서는 신규 사이트를 셋업하는 것으로 가정했기 때문에 이 부분은 그냥 “Next”로 넘어 갑니다.
이제 마지막 3단계인데요. 3단계는 관리자 정보를 마이그레이션하는 단계입니다. 워드프레스 상에 현재 로그인한 관리자의 정보를 Auth0로 이전하는 단계인데요. Password를 입력 후 “Submit” 버튼을 누르면 되며, 비밀번호는 기존의 비밀번호를 써도 되고 새로 만들어도 무방합니다.
여기까지 완료되면 아래와 같이 셋업이 끝났다는 메시지가 나옵니다.
Auth0 셋팅
이제 워드프레스 관리자 대시보드 상에 “Auth0”라는 메뉴가 추가된 것을 확인할 수 있을 것입니다. 이 메뉴를 클릭해 보면 Basic / Features / Embedded/ Advanced / Help의 다섯 개 탭을 통해 Auth0 셋팅을 관리할 수 있습니다.
여기서 “Require Verified Email” 옵션을 일단 한번 꺼 보세요. 이 옵션은 말 그대로 사용자가 처음 가입할 때 이메일 인증을 거치도록 하는 옵션인데요. 우선은 끄고 한번 테스트를 해 보겠습니다.
Auth0 로그인
현재 워드프레스 계정에서 로그아웃해 보세요. 다시 로그인 페이지로 가 보세요. 그러면 아마 로그인 화면이 다음과 같이 변한 것을 확인해 볼 수 있을 텐데요. 워드프레스 기본 로그인창이 Auth0 로그인 창으로 교체되었죠?
여기서 다시 좀전에 우리가 셋팅했던 관리자 계정을 사용하여 다시 로그인 해 보세요. 아마 워드프레스 대시보드로 로그인된 것을 확인할 수 있을 거에요.
만약 앞서 셋팅할 때 “Require Verified Email” 옵션을 끄지 않았다면 로그인할 때 다음과 같이 이메일 인증이 필요하다는 메시지를 보게 될 수도 있습니다. 이런 경우라면, 자신의 이메일 계정을 확인하셔서 이메일 인증을 승인한 후 로그인하면 될 것입니다.
사용자 관리하기
이제 셋업은 어느 정도 끝이 났으니 Auth0와 연동된 상태에서의 사용자 관리에 대해 조금 알아 보겠습니다. Auth0를 사용한다는 말은 결국 워드프레스에서 사용자 관리 기능을 떼서 Auth0로 이전한다는 말입니다. Auth0가 설치된 이후의 모든 사용자 관련 작업들은 기본적으로 워드프레스가 아닌 Auth0 서비스에서 처리됩니다.
새로 사용자가 회원 가입을 한다고 해 보죠. 사용자가 회원가입(Sign up)을 완료하면 Auth0 대시보드에서 사용자 목록을 아래와 같이 확인할 수 있습니다.
새 사용자는 기본적으로 워드프레스가 아닌 Auth0에 추가됩니다. 사용자 관리 기능을 Auth0로 아웃소싱 했기 때문에 당연한 말이겠죠. 물론 워드프레스 상에도 사용자 정보가 저장됩니다만, 사용자 인증 시에 기본적으로 사용하는 데이터는 Auth0 상의 사용자 정보라는 말이죠. 사실 이 부분은 조금 복잡합니다. 사용자 정보를 어떻게 관리하고 동기화는 어떻게 시키고 기존 사용자의 마이그레이션 처리는 어떻게 하는지 등등 여러 경우의 수가 있고 다양한 방법들이 존재하지만 그 방법까지 모두 설명하기엔 글 내용이 많이 길어질 듯 해서 다음 번에 기회가 되면 하기로 하구요. 오늘은 여기까지만!^^
로그인 UI 수정하기
지금까지는 디폴트값만을 사용하여 로그인 처리를 했는데요. Auth0 설정값을 조정하면 로그인 UI를 입맛에 맞게 어느 정도 변경이 가능합니다. 이들 중 일부는 워드프레스 대시보드 상에서 가능하고 또 나머지는 Auth0 대시보드 상에서 처리해야 합니다.
워드프레스 대시보드에서 처리
워드프레스 대시보드 상에서는 앞서 소개한 “Login by Auth0 Settings” 메뉴에서 조정하면 됩니다. 예를 들어, 워드프레스의 오리지널 로그인 폼을 어떻게 처리할지를 다음과 같이 지정할 수 있고,
로그인 화면을 워드프레스 사이트 내에 둘지 아니면 별도 창으로 뺄지도 “Universal Login Page” 옵션으로 조정할 수 있습니다.
아래는 로그인 Universal Login Page 기능을 끈 상태인데요. 보다시피 익숙한 워드프레스 사이트 내로 로그인 화면이 들어와 있는 것을 확인할 수 있습니다.
Auth0 대시보드에서 처리
그 밖에 나머지 설정들은 Auth0 대시보드 상에서 처리할 수 있습니다. 예를 들어 로그인 창 상단에 보이는 로고를 변경하고 싶다면, Auth0의 대시보드에서 내 애플리케이션(Application)을 찾아 들어가서 Settings 값을 변경해 주변 됩니다.
마무리
이렇게 외부 인증 서비스인 Auth0를 워드프레스와 연동해 사용자를 관리하는 방법에 대해 소개해 드렸는데요. 사실 모든 워드프레스 사이트를 이 방식으로 관리할 필요는 전혀 없습니다. Auth0 인증을 사용해야 하는 경우는 어떤 경우가 있을까요? 아마 다음과 같은 경우라면 Auth0 인증을 고려해 볼 만 할 것 같습니다.
- 워드프레스를 콘텐츠 사이트가 아닌 웹서비스로 만들어 사용하고자 할 때
- 사내에서 다른 사이트들과 싱글사인온(SSO, Single-Sign On) 처리가 필요할 때
- 구글, 페이스북 등 소셜 로그인 기능을 쉽게 추가하고 싶을 때
물론 세상에 공짜는 없습니다. Auth0 서비스는 무료가 아닙니다. 그러니 사용하시기 전에 반드시 Auth0의 가격이나 정책 등을 꼼꼼히 확인하시고 결정하는 게 좋을 것입니다.
이 글에서는 지면 관계상 워드프레스의 기존 사용자를 Auth0로 마이그레이션하는 방법이나 워드프레스와 Auth0 간에 사용자 데이터를 동기화하는 방법을 다루지 못했습니다. 적고 보니, 제목을 SSO로 붙이고 정작 SSO와 관련된 내용도 많이 다루진 못했네요.^^ 다음에 기회가 되면 다뤄 보기로 하겠습니다. 관심 있으신 분들이 피드백 주세요. 읽어 주셔서 감사합니다! 😊
0 thoughts on “Login by Auth0로 싱글사인온(SSO) 로그인 처리하기”