日本語
各アプリまたは組織のサインインエクスペリエンスをどのようにカスタマイズできますか？
マルチアプリやマルチテナント事業向けにカスタマイズされたサインインエクスペリエンスの設定方法。
Guamian
Product & Design
Product & Design
マルチアプリやマルチテナント事業向けにカスタマイズされたサインインエクスペリエンスの設定方法。
アプリのサインインフローを設定することは非常に一般的ですが、時には少し複雑なシナリオに出くわすことがあります。
最も簡単なアプローチは、すべてのアプリと組織に共通のサインインエクスペリエンスを維持することです。例えば、HubSpotは幅広い製品を提供していますが、彼らのサインインエクスペリエンスは一貫しています。これにより、HubSpotのような親ブランドを強調することができ、Marketing Hubのような個々の製品よりも強調されます。
一部の企業はマルチプロダクト戦略を採用していますが、単一のユーザープールを保持することを好みます。例えば、有名なSaaS企業であるAtlassianは、JiraやConfluenceのような複数のソフトウェア製品を提供しています。以下は彼らのサインイン画面です。
サインインURLには、このインターフェースがJira製品向けであることを示すパラメータ?bundle=jira-softwareが含まれています。
サインインURLには、このインターフェースがConfluence製品向けであることを示すパラメータ?bundle=confluenceが含まれています。
アプリ間のサインインUIの違い:
ただし、主要な認証方法はすべてのアプリで一貫しています。これにより、ユーザーは識別子（メール、ソーシャルアカウント）や認証要素（例：パスワード）を含む統一されたプロファイルを持ち、より効果的なアイデンティティ管理が可能になります。
別の例として、Notionというマルチテナントアプリがあります。これは異なるクライアントに別々のワークスペースをホストすることを可能にします。例えば、以下にアクセスすると
"Silverhand"がワークスペース名である場合、Notionは組織固有のサインインUIを表示します。唯一の違いはロゴであり、それ以外は同じです。
まず、基盤としてのアイデンティティと認証ソリューションが必要です。Logtoを例にとって、このソリューションを説明します。Logtoはこれを実現するためのさまざまなオプションを提供しています。
これは、ロゴやボタンの色だけをカスタムする場合の最も簡単で迅速なソリューションです。
「アプリレベルサインインエクスペリエンス」をオンにすると、各アプリに特定のブランディングやカラーを設定できます。アプリからアプリレベルブランディングが有効な状態でサインインすると、そのサインインエクスペリエンスはアプリレベルブランディング設定に基づいてカスタマイズされます。それ以外の場合は、オムニサインインエクスペリエンス設定のデフォルトに戻ります。
アプリレベルのブランディングには、ライトモードとダークモードの設定が用意されています。ダークモードは、オムニサインインエクスペリエンス設定でダークモードが有効になっているときのみ効果があります。
その後、サインインをトリガーするときにorganization_idパラメータを渡し、Logtoにどの組織のロゴを表示するかを伝えることができます。例えば、組織ID123456の組織ロゴを表示するには:
signInメソッドのextraParamsオブジェクトにorganization_idパラメータを渡すことができます。organization_idパラメータを渡すことができます。以下は、Logto browser SDKを使用してsignInメソッドでorganization_idパラメータを渡す例です。
ロゴや色のカスタマイズだけでは十分でない場合、例えば特定のソーシャルサインインオプションを非表示にしたり、外観を完全に変更したい場合、Logto Cloudに自分のUIをアップロードできます。
アプリや組織に基づいて異なるUIを表示するには、検索パラメータからorganization_idやapp_idを使用します。それから、これらのパラメータに基づいてUIを制御するスクリプトを書くことができます。詳細については、「Bring Your Own UI」チュートリアルを参照してください。