각 앱 또는 조직의 로그인 경험을 어떻게 맞춤화할 수 있나요?

앱에 대한 로그인 흐름을 설정하는 것은 매우 일반적이지만 때때로 다소 복잡한 시나리오를 만나게 될 것입니다.

1. 다중 앱 비즈니스를 운영합니다.
2. 다양한 워크스페이스를 지원하는 다중 테넌트 앱을 보유하고 있습니다.

가장 쉬운 접근법은 모든 앱과 조직에 대한 보편적인 로그인 환경을 유지하는 것입니다. 예를 들어, HubSpot은 다양한 제품을 제공하지만, 그들의 로그인 경험은 모든 제품에서 일관성을 갖습니다. 이는 HubSpot과 같은 모 브랜드를 강조하는 데 도움이 되며, Marketing Hub과 같은 개별 제품보다는 모 브랜드를 강조합니다.

앱 수준의 로그인#

일부 기업은 다중 제품 전략을 따르지만 단일 사용자 풀을 유지하는 것을 선호합니다. 예를 들어, 잘 알려진 SaaS 기업인 Atlassian은 Jira와 Confluence 같은 여러 소프트웨어 제품을 제공합니다. 여기 그들의 로그인 화면이 있습니다.

로그인 URL에는 ?bundle=jira-software 매개변수가 포함되어 있어 Jira 제품에 대한 로그인 인터페이스임을 나타냅니다.

로그인 URL에는 ?bundle=confluence 매개변수가 포함되어 있어 Confluence 제품에 대한 로그인 인터페이스임을 나타냅니다.

앱 간의 로그인 UI 차이점:

1. 특정 제품을 나타내기 위해 서로 다른 로고를 사용합니다.
2. 폰트 및 버튼 스타일 등 서로 다른 외관을 가집니다.

그러나 주요 인증 방법은 모든 앱에서 일관성을 유지합니다. 이것은 사용자들이 더 효과적인 아이덴티티 관리를 위해 식별자(이메일, 소셜 계정) 및 인증 요소(예: 비밀번호)를 포함한 통합된 프로파일을 가질 수 있게 보장합니다.

조직 수준의 로그인#

또 다른 예로는 서로 다른 클라이언트가 별도의 워크스페이스를 호스팅할 수 있는 다중 테넌트 앱인 Notion이 있습니다. 예를 들어,

"Silverhand"가 워크스페이스 이름이라면 Notion은 조직별 로그인 UI를 표시할 것입니다. 유일한 차이점은 로고이며, 나머지는 동일합니다.

각 앱 또는 조직의 로그인 경험을 어떻게 맞춤화할 수 있을까요?#

먼저, 구축할 기반으로서의 아이덴티티 및 인증 솔루션이 필요합니다. Logto를 예로 들어 솔루션을 설명하겠습니다. Logto는 이를 달성하기 위한 다양한 옵션을 제공합니다:

Logto Cloud에서 직접 설정하기#

로고와 버튼 색상만 사용자 정의하고 싶을 경우에 가장 빠르고 쉬운 솔루션입니다.

앱 수준에서 구성하기#

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

앱 수준 브랜딩은 밝은 모드와 어두운 모드 설정 모두 가능합니다. 어두운 모드 설정은 범용 로그인 경험 설정에서 어두운 모드가 활성화된 경우에만 적용됩니다.

조직 수준에서 구성하기#

그런 다음 로그인을 트리거할 때, organization_id 매개변수를 사용하여 Logto에 표시할 조직 로고를 지정할 수 있습니다. 예를 들어, 조직 ID 123456에 대한 조직 로고를 표시하려면:

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

여기 Logto 브라우저 SDK를 사용하여 signIn 메서드에 organization_id 매개변수를 전달하는 방법의 예가 있습니다:

더 세부적인 사용자 정의가 필요한 경우 나만의 UI 사용하기#

로고 및 색상 사용자 정의로 충분하지 않은 경우—예를 들어, 특정 소셜 로그인 옵션을 숨기거나 외관을 완전히 바꾸고 싶은 경우—Logto Cloud에 나만의 UI를 업로드할 수 있습니다.

앱 또는 조직을 기반으로 다른 UI를 표시하려면 검색 매개변수에서 organization_id 및 app_id를 사용하세요. 그런 다음 이러한 매개변수를 기반으로 UI를 제어하는 스크립트를 작성하세요. 자세한 내용은 "나만의 UI 사용하기" 튜토리얼을 참조하세요.