各アプリまたは組織のサインインエクスペリエンスをどのようにカスタマイズできますか？

アプリのサインインフローを設定することは非常に一般的ですが、時には少し複雑なシナリオに出くわすことがあります。

1. マルチアプリ事業を運営しています。
2. 異なるワークスペースをサポートするマルチテナントアプリを持っています。

最も簡単なアプローチは、すべてのアプリと組織に共通のサインインエクスペリエンスを維持することです。例えば、HubSpotは幅広い製品を提供していますが、彼らのサインインエクスペリエンスは一貫しています。これにより、HubSpotのような親ブランドを強調することができ、Marketing Hubのような個々の製品よりも強調されます。

アプリレベルのサインイン#

一部の企業はマルチプロダクト戦略を採用していますが、単一のユーザープールを保持することを好みます。例えば、有名なSaaS企業であるAtlassianは、JiraやConfluenceのような複数のソフトウェア製品を提供しています。以下は彼らのサインイン画面です。

サインインURLには、このインターフェースがJira製品向けであることを示すパラメータ?bundle=jira-softwareが含まれています。

サインインURLには、このインターフェースがConfluence製品向けであることを示すパラメータ?bundle=confluenceが含まれています。

アプリ間のサインインUIの違い:

1. 特定の製品を示すために異なるロゴを使用しています。
2. フォントやボタンのスタイルが異なるなど、外観が異なります。

ただし、主要な認証方法はすべてのアプリで一貫しています。これにより、ユーザーは識別子（メール、ソーシャルアカウント）や認証要素（例：パスワード）を含む統一されたプロファイルを持ち、より効果的なアイデンティティ管理が可能になります。

組織レベルのサインイン#

別の例として、Notionというマルチテナントアプリがあります。これは異なるクライアントに別々のワークスペースをホストすることを可能にします。例えば、以下にアクセスすると

"Silverhand"がワークスペース名である場合、Notionは組織固有のサインインUIを表示します。唯一の違いはロゴであり、それ以外は同じです。

各アプリまたは組織のサインインエクスペリエンスをどのようにカスタマイズできますか？#

まず、基盤としてのアイデンティティと認証ソリューションが必要です。Logtoを例にとって、このソリューションを説明します。Logtoはこれを実現するためのさまざまなオプションを提供しています。

Logtoクラウドで直接設定する#

これは、ロゴやボタンの色だけをカスタムする場合の最も簡単で迅速なソリューションです。

アプリレベルで構成する#

「アプリレベルサインインエクスペリエンス」をオンにすると、各アプリに特定のブランディングやカラーを設定できます。アプリからアプリレベルブランディングが有効な状態でサインインすると、そのサインインエクスペリエンスはアプリレベルブランディング設定に基づいてカスタマイズされます。それ以外の場合は、オムニサインインエクスペリエンス設定のデフォルトに戻ります。

アプリレベルのブランディングには、ライトモードとダークモードの設定が用意されています。ダークモードは、オムニサインインエクスペリエンス設定でダークモードが有効になっているときのみ効果があります。

組織レベルで構成する#

その後、サインインをトリガーするときにorganization_idパラメータを渡し、Logtoにどの組織のロゴを表示するかを伝えることができます。例えば、組織ID123456の組織ロゴを表示するには:

• Logto SDKを使用している場合、signInメソッドのextraParamsオブジェクトにorganization_idパラメータを渡すことができます。
• OIDCクライアントを使用している場合、authorization endpointを要求する際にorganization_idパラメータを渡すことができます。

以下は、Logto browser SDKを使用してsignInメソッドでorganization_idパラメータを渡す例です。

より詳細なカスタマイズが必要な場合は、自分のUIを持ち込む#

ロゴや色のカスタマイズだけでは十分でない場合、例えば特定のソーシャルサインインオプションを非表示にしたり、外観を完全に変更したい場合、Logto Cloudに自分のUIをアップロードできます。

アプリや組織に基づいて異なるUIを表示するには、検索パラメータからorganization_idやapp_idを使用します。それから、これらのパラメータに基づいてUIを制御するスクリプトを書くことができます。詳細については、「Bring Your Own UI」チュートリアルを参照してください。