WordPress 통합하기

이 가이드는 OIDC 플러그인을 사용하여 Logto 와 WordPress 를 통합하는 과정을 안내합니다. 먼저, 통합이 완료된 후의 사용자 경험을 살펴보겠습니다.

Logto 통합을 통한 로그인 과정#

1. 사용자가 WordPress 사이트의 로그인 페이지(기본적으로 [SITE URL]/wp-login.php)에 액세스하면 OIDC 버튼이 나타납니다.
2. 사용자가 버튼을 클릭하면 Logto 의 사용자 지정 로그인 경험을 가진 페이지로 리디렉션됩니다.
3. 사용자가 로그인 방법을 선택하면 Logto 에서 사용자를 인증합니다.
4. 사용자가 인증되면, Logto 는 사용자를 WordPress 사이트로 다시 리디렉션합니다.
5. WordPress 는 새로운 사용자 계정을 생성하거나 기존 사용자 계정으로 로그인하고, 사용자를 이전 페이지로 리디렉션합니다.

이제 Logto 와 WordPress 를 통합한 최종 결과를 확인했으니, 실제 통합 작업을 시작해보겠습니다.

전제 조건#

시작하기 전에 다음이 준비되어 있는지 확인하세요:

1. WordPress 사이트: 완전히 작동하는 WordPress 사이트가 필요합니다. 플러그인을 관리하고 설정을 구성할 관리자 접근 권한을 확인하세요.
2. Logto 인스턴스: Logto 콘솔을 방문하여 새 Logto 인스턴스를 생성하거나, 설치 가이드를 따라 자가 호스팅 인스턴스를 설정하세요.

통합 단계#

1단계: Logto 애플리케이션 만들기#

1. Logto 콘솔을 방문하세요.
2. "애플리케이션"으로 이동한 후, "애플리케이션 만들기"를 클릭하세요.
3. "프레임워크 없이 애플리케이션 만들기"를 클릭하세요.
4. 애플리케이션 유형으로 "전통적인 웹"을 선택하세요.
5. 애플리케이션 이름을 지정한 후 "애플리케이션 만들기"를 클릭하세요.

2단계: 플러그인 설치하기#

1. WordPress 사이트에 로그인하세요.
2. "플러그인"으로 이동하여 "새로 추가"를 클릭하세요.
3. "OpenID Connect Generic"을 검색하고 daggerhart 플러그인을 설치하세요.
4. 플러그인을 활성화하세요.

3단계: 플러그인 구성하기#

1. "설정" > "OpenID Connect Generic"으로 이동하여 플러그인 설정을 엽니다.
2. 다음 필드를 채우세요:
   • 클라이언트 ID: Logto 애플리케이션의 앱 ID
   • 클라이언트 비밀: Logto 애플리케이션의 앱 비밀.
   • OpenID 범위: email profile openid offline_access를 입력하세요.
   • 로그인 엔드포인트 URL: Logto 애플리케이션의 인증 엔드포인트 URL 입니다. https://[tenant-id].logto.app/oidc/auth, Logto 애플리케이션 페이지에서 "엔드포인트 세부 정보 보기"를 클릭하여 URL 을 확인할 수 있습니다.
   • 사용자 정보 엔드포인트 URL: Logto 애플리케이션의 사용자 정보 엔드포인트 URL, https://[tenant-id].logto.app/oidc/me.
   • 토큰 검증 엔드포인트 URL: Logto 애플리케이션의 토큰 검증 엔드포인트 URL, https://[tenant-id].logto.app/oidc/token.
   • 세션 종료 엔드포인트 URL: Logto 애플리케이션의 세션 종료 엔드포인트 URL, https://[tenant-id].logto.app/oidc/session/end.
   • 식별 키: 사용자의 신원을 포함하는 ID 토큰의 고유 키, 구성에 따라 email 또는 sub 를 사용할 수 있습니다.
   • 닉네임 키: 사용자의 닉네임을 포함하는 ID 토큰의 키, sub 으로 설정하고 나중에 변경할 수 있습니다.

4단계: 애플리케이션 구성하기#

1. 플러그인 설정에서 "노트" 섹션까지 스크롤을 내려 "리디렉션 URI" 값을 복사하세요.
2. Logto 콘솔에서 애플리케이션의 설정으로 이동하세요.
3. 복사한 "리디렉션 URI" 값을 "리디렉션 URI" 필드에 추가하세요.

5단계: 통합 테스트#

1. WordPress 사이트에서 로그아웃하세요.
2. WordPress 로그인 페이지로 이동하여 "Logto 로 로그인" 버튼을 클릭하세요.
3. Logto 로그인 페이지로 리디렉션됩니다.
4. Logto 계정으로 로그인하세요.
5. WordPress 사이트로 자동 리디렉션되며 로그인된 상태가 됩니다.

최종 단계#

축하합니다! Logto 와 WordPress 를 성공적으로 통합했습니다.

통합을 더욱 맞춤화하려면, 플러그인 설정 페이지에서 기존 사용자 연결, 로그인 버튼 맞춤화, SSO 모드 사용 등 추가 기능을 탐색해보세요.