본문으로 건너뛰기

사전 구축된 Account Center UI로 계정 설정하기

사전 구축된 Account Center UI란?​

Logto는 최종 사용자가 계정 설정을 관리할 수 있도록 즉시 사용할 수 있는 페이지를 제공하는 사전 구축된 Account Center UI를 제공합니다. 이 사전 구축 UI는 Logto에서 호스팅되며 다음과 같은 일반적인 계정 관리 작업을 처리합니다:

  • 이메일 주소 업데이트
  • 전화번호 업데이트
  • 사용자 이름 업데이트
  • 비밀번호 설정 또는 업데이트
  • MFA 설정 관리 (TOTP 인증 앱, 패스키, 백업 코드)

사전 구축된 Account Center UI는 애플리케이션과 원활하게 작동하도록 설계되어, 별도의 맞춤 계정 관리 페이지를 구축하지 않아도 일관된 사용자 경험을 제공합니다.

사전 구축 UI 사용의 장점​

  • 개발 필요 없음: 즉시 사용할 수 있는 페이지 제공
  • 일관된 경험: Logto의 로그인 경험과 동일한 스타일 제공
  • 내장된 보안: 모든 인증 흐름과 보안 조치가 자동으로 처리됨
  • 항상 최신 상태: 새로운 기능과 보안 개선 사항이 자동으로 적용됨

제공되는 페이지​

사전 구축된 Account Center UI는 Logto 테넌트 엔드포인트의 /account 경로 아래에서 다음과 같은 페이지를 제공합니다:

경로설명
/account/email기본 이메일 주소 업데이트
/account/phone기본 전화번호 업데이트
/account/username사용자 이름 업데이트
/account/password비밀번호 설정 또는 업데이트
/account/passkey/add새 패스키(WebAuthn) 추가
/account/passkey/manage기존 패스키 보기 및 관리
/account/authenticator-appTOTP 인증 앱 설정
/account/backup-codes/generate새 백업 코드 생성
/account/backup-codes/manage백업 코드 보기 및 관리

예를 들어, 테넌트 엔드포인트가 https://example.logto.app라면, 이메일 업데이트 페이지는 https://example.logto.app/account/email에서 이용할 수 있습니다.

사전 구축 UI 사용 방법​

1단계: Account API 활성화​

사전 구축된 Account Center UI는 Account API에 의존합니다. Console > Sign-in & account > Account center로 이동하여 Account API를 활성화하세요.

필드 권한을 필요에 따라 설정하세요:

  • 사용자가 수정할 수 있도록 하려면 필드를 Edit로 설정
  • 사용자가 보기만 하도록 하려면 ReadOnly로 설정
  • 완전히 숨기려면 Off로 설정

사전 구축된 Account Center UI를 사용하려면, 애플리케이션에서 사용자를 적절한 Logto 페이지로 리디렉션해야 합니다. 두 가지 접근 방식이 있습니다:

접근 방식 A: 리디렉션 파라미터를 이용한 직접 연결​

애플리케이션에 사전 구축 페이지로 사용자를 리디렉션하는 링크를 추가하세요. 작업 완료 후 다시 앱으로 돌아올 수 있도록 redirect 쿼리 파라미터를 포함하세요:

https://[tenant-id].logto.app/account/email?redirect=https://your-app.com/settings

사용자가 이메일 업데이트를 완료하면 https://your-app.com/settings로 다시 리디렉션됩니다.

접근 방식 B: 계정 설정 흐름에 임베딩​

기존 계정 설정 워크플로우에 사전 구축 페이지를 통합할 수 있습니다:

  1. 앱의 계정 설정 페이지에서 사용자의 현재 정보를 표시
  2. 해당 사전 구축 페이지로 연결되는 "수정" 또는 "업데이트" 버튼 제공
  3. 사용자가 작업을 완료하면 다시 앱으로 리디렉션

예시 구현:

function AccountSettings() {
  const tenantEndpoint = 'https://example.logto.app';
  const redirectUrl = encodeURIComponent(window.location.href);

  return (
    <div>
      <h2>계정 설정</h2>

      <div>
        <span>이메일: user@example.com</span>
        <a href={`${tenantEndpoint}/account/email?redirect=${redirectUrl}`}>이메일 업데이트</a>
      </div>

      <div>
        <span>비밀번호: ••••••••</span>
        <a href={`${tenantEndpoint}/account/password?redirect=${redirectUrl}`}>비밀번호 변경</a>
      </div>

      <div>
        <span>MFA: 미설정</span>
        <a href={`${tenantEndpoint}/account/authenticator-app?redirect=${redirectUrl}`}>
          인증 앱 설정
        </a>
      </div>
    </div>
  );
}

3단계: 성공 리디렉션 처리​

사용자가 작업을 완료하면, 선택적으로 show_success 쿼리 파라미터와 함께 지정한 URL로 리디렉션됩니다. 이를 활용해 성공 메시지를 표시할 수 있습니다:

function SettingsPage() {
  const searchParams = new URLSearchParams(window.location.search);
  const showSuccess = searchParams.get('show_success');

  return (
    <div>
      {showSuccess === 'email' && <div>이메일이 성공적으로 업데이트되었습니다!</div>}
      {showSuccess === 'password' && <div>비밀번호가 성공적으로 업데이트되었습니다!</div>}
      {/* ... 나머지 설정 페이지 */}
    </div>
  );
}

보안 고려사항​

사전 구축된 Account Center UI에는 다음과 같은 내장 보안 조치가 포함되어 있습니다:

  • 아이덴티티 검증: 민감한 변경(이메일, 전화번호, 비밀번호, MFA) 전, 사용자는 현재 비밀번호 또는 기존 인증 방법으로 본인 확인을 해야 합니다
  • 인증 코드: 이메일 및 전화번호 업데이트 시, 새 주소/번호로 인증 코드가 전송됩니다
  • 세션 검증: 모든 작업은 사용자의 세션을 검증하여 무단 접근을 방지합니다

커스터마이징 옵션​

사전 구축된 Account Center UI는 로그인 경험 설정에서 지정한 브랜딩(로고, 색상, 다크/라이트 모드, 언어 설정 등)을 그대로 상속받습니다.

사전 구축 UI가 제공하는 것보다 더 많은 커스터마이징이 필요하다면, Account API를 사용하여 맞춤형 계정 관리 페이지를 직접 구축할 수 있습니다.