브랜드에 맞추기

콘솔 > 로그인 경험 > 브랜딩으로 이동하여 로그인 페이지의 외관을 사용자 정의하세요. 이 섹션에서는 주요 브랜딩 요소를 쉽게 조정할 수 있습니다.

브랜드 색상

로그인 경험 전반에 걸쳐 사용되는 기본 색상을 정의하세요. 기본 버튼, 링크 및 기타 구성 요소에 사용됩니다. 기본 Logto 보라색을 브랜드의 색상으로 교체하세요. 다크 모드의 경우 별도의 브랜드 색상을 지정할 수 있습니다.

회사 로고

로고는 로그인 홈페이지, 회원가입 홈, 로딩 페이지 및 기타 인터페이스에 표시됩니다.

파비콘

파비콘은 웹사이트를 나타내는 작은 아이콘으로, 브라우저 탭, 북마크 및 브라우저 인터페이스의 다른 영역에 표시됩니다.

이미지는 500KB 이하이어야 하며 SVG, PNG, JPG, JPEG 또는 ICO 형식이어야 합니다. 좋은 표현 효과를 위해 정사각형 이미지를 업로드하는 것이 좋습니다.
다크 모드 버전의 파비콘도 업로드할 수 있습니다.
또한, 이제는 사용자 정의 제목 대신 다른 흐름 (로그인 / 회원가입 / 비밀번호 찾기 등)에 대한 브라우저 제목이 사용됩니다.

다크 모드

사용자의 시스템 환경 설정에 따라 로그인 페이지의 외관을 자동으로 조정하려면 다크 모드를 활성화하세요.

앱별 브랜딩

다중 앱 비즈니스가 앱 수준의 로그인 경험을 필요로 하는 경우, 애플리케이션 세부 정보 페이지에서 이를 구성할 수 있습니다. 콘솔 > 애플리케이션으로 이동하세요.

"앱 수준 로그인 경험"을 켜면 각 앱에 대한 특정 브랜딩과 색상을 설정할 수 있습니다. 앱 수준 브랜딩이 활성화된 앱에서 로그인이 시작되면, 로그인 경험은 앱 수준 브랜딩 설정에 따라 사용자 정의됩니다. 그렇지 않으면 옴니 로그인 경험 설정이 기본값으로 사용됩니다.

앱 수준 브랜딩에는 라이트 및 다크 모드 설정이 모두 가능합니다. 다크 모드 설정은 옴니 로그인 경험 설정에서 다크 모드가 활성화된 경우에만 적용됩니다.

로그인 경험에서 클라이언트의 조직 로고를 동적으로 표시하려면 조직 설정 페이지에서 조직 로고를 업로드할 수 있습니다. 콘솔 > 조직으로 이동하세요.

그런 다음, 로그인을 트리거할 때 organization_id 매개변수에 조직 ID를 전달하여 Logto에 어떤 조직 로고를 표시할지 알릴 수 있습니다. 예를 들어, 조직 ID 123456의 조직 로고를 표시하려면:

Logto SDK를 사용하는 경우, signIn 메서드의 extraParams 객체에 organization_id 매개변수를 전달할 수 있습니다.
OIDC 클라이언트를 사용하는 경우, 인가 엔드포인트를 요청할 때 organization_id 매개변수를 전달할 수 있습니다.

조직 수준 브랜딩에는 라이트 및 다크 모드 설정이 모두 가능합니다. 다크 모드 설정은 옴니 로그인 경험 설정에서 다크 모드가 활성화된 경우에만 적용됩니다.

다음은 Logto 브라우저 SDK를 사용하여 signIn 메서드에서 organization_id 매개변수를 전달하는 예입니다:

index.ts

logtoClient.signIn({
  // ...다른 매개변수
  redirectUri: 'https://your-redirect-uri',
  extraParams: {
    organization_id: '123456',
  },
});

노트:

extraParams 기능을 모든 Logto SDK에 점진적으로 배포하고 있습니다. 아직 SDK에서 보이지 않는 경우, 저희에게 연락해 주세요.

각 앱 또는 조직에 대한 로그인 경험을 사용자 정의하는 방법?