한국어
  • oidc
  • wordpress

WordPress 통합하기

Logto 와 WordPress 를 통합하는 실습 가이드 및 예제.

Sijie
Sijie
Developer

이 가이드는 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. 플러그인을 활성화하세요.

OpenID Connect Generic

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 으로 설정하고 나중에 변경할 수 있습니다.

OpenID Connect Generic Settings

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

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

Logto Application Settings

5단계: 통합 테스트

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

최종 단계

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

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

오늘 Logto 를 시도해보세요