メインコンテンツまでスキップ

ブランドに合わせる

オムニサインイン体験​

サインインページの外観をカスタマイズするには、コンソール > サインイン体験 > ブランディング に移動します。このセクションでは、主要なブランディング要素を簡単に調整できます。

ブランドカラー

サインイン体験全体で使用される主要な色を定義します。これには、主要なボタン、リンク、その他のコンポーネントが含まれます。デフォルトの Logto パープルをブランドの色に置き換えます。ダークモード用に別のブランドカラーを指定することもできます。

会社のロゴ

ロゴは、サインインホームページ、サインアップホーム、ロードページ、およびその他のインターフェースに表示されます。

  • 画像にはいくつかの制限があります：500KB 以下で、SVG、PNG、JPG、JPEG、または ICO 形式である必要があります。
  • ロゴフィールドを空白のままにすると、インターフェースにロゴは表示されません。
  • ダークモードバージョンのロゴもアップロードできます。

ファビコン

ファビコンはウェブサイトを表す小さなアイコンで、ブラウザのタブ、ブックマーク、およびブラウザインターフェースの他の領域に表示されます。

  • 画像は 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 に表示されない場合は、お問い合わせください。

各アプリまたは組織のサインイン体験をカスタマイズする方法は？