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

独自の UI を持ち込む

Logto では、組み込みのサインイン体験インターフェースを完全に置き換えるために、独自の UI を持ち込むことができます。これは、事前に構築された UI カスタマイズオプションに加えて提供される機能です。この機能により、カスタム UI アセット（HTML、CSS、JavaScript、画像など）を含む zip ファイルをアップロードし、それを Logto Cloud サーバーでホストし、テナントユーザーの サインイン体験 として使用することができます。

注記:

この機能を使用するには、カスタム UI がシングルページアプリケーション (SPA) 互換である必要があります。最適なパフォーマンスを得るために、常にプロダクションビルドを使用することをお勧めします。

Logto コンソールでカスタム UI 機能を探る​

公式プロジェクトで始める​

カスタムサインイン UI を開始する最速の方法は、Logto 体験プロジェクト をクローンすることです。これは、すべての機能と Logto のベストプラクティスをカバーする組み込みの Logto サインイン体験 UI です。ニーズに合わせてカスタマイズできます。

コードをチェックアウトした後、次のコマンドを実行してプロジェクトをビルドします：

pnpm install && pnpm build
注記:

Logto プロジェクト全体は pnpm monorepo です。体験パッケージを単独で実行したい場合（pnpm を使用せずに）、package.json の workspace: 依存関係を特定のバージョン番号（例：^1.0.0）に置き換えてください。

ビルドが完了すると、すべてのコンパイル済みアセットが dist ディレクトリにあります。その後、dist ディレクトリの ZIP アーカイブを作成します。このアーカイブは後で Logto Cloud にアップロードするために使用されます。

カスタム UI アセットの要件​

カスタム UI アセットをアップロードする前に、次の要件を満たしていることを確認してください：

  • アップロードするアセットは単一の zip ファイルとしてパックされている必要があります。
  • zip ファイルにはルートディレクトリに index.html ファイルが含まれている必要があります。
  • zip ファイルのサイズは 20MB を超えてはなりません。
  • zip ファイルには 10MB を超えるファイルを含めてはなりません。
  • zip ファイルには合計 200 ファイルを超えるファイルを含めてはなりません。

カスタム UI アセットをアップロードする​

注記:

この機能を本番環境で使用する際は注意が必要です。ユーザーのサインイン体験に即座に影響を与えるためです。

  1. コンソール > サインイン体験 > ブランディング > 独自の UI を持ち込む に移動します。
  2. 前のステップで作成した zip ファイルを選択するか、ドラッグアンドドロップして、アップロードプロセスを自動的に開始します。
  3. アップロードが完了したら、変更を保存し、カスタム UI が即座に提供されます。
  4. カスタムサインイン UI を使用する場合、「サインインプレビュー」ウィンドウは無効になります。ただし、ライブプレビュー ボタンをクリックして、新しく開いたブラウザタブでカスタムサインインページをテストできます。

カスタム UI を開発する​

Experience API と連携する​

カスタム UI は、サインイン、サインアップ、パスワードリセット、ソーシャルアカウントのバインディング、MFA の有効化など、さまざまなアクションを実行するために Experience API と連携する必要があります。ユーザーフローと実装の詳細をよりよく理解するために、包括的な技術仕様と例を提供する Experience API 設計 RFC を確認することをお勧めします。

また、ブランドカラー、会社のロゴ、ファビコン、パスワードポリシー、ローカライズされた言語フレーズ、カスタム CSS など、他のサインイン体験設定にアクセスする必要があります。これらは サインイン体験 API エンドポイント を通じて行います。

サンプルプロジェクト​

カスタム UI を迅速に理解し実装を開始するためのサンプルプロジェクトのコレクションを提供しています。詳細については、Logto Experience プロジェクト GitHub リポジトリを確認してください。

さらに、最も一般的なユースケースをカバーするために、より簡略化されたシナリオベースのサンプルプロジェクトを提供するために作業を続けています。今後の更新をお楽しみに！

ローカル開発とデバッグ​

ローカル開発とデバッグのために、Logto Tunnel CLI ツールを提供しています：

  • ローカルマシンから Logto Cloud エンドポイントへの Experience API リクエストをプロキシします。
  • カスタム UI 実装をローカルでテストします。

これにより、Logto Cloud にアップロードする前にカスタム UI をローカルでテストおよびデバッグすることができます。

詳細については、カスタム UI をローカルでデバッグおよびテストする を参照してください。

CLI を使用してカスタム UI アセットをアップロードする​

コンソールを通じてアップロードすることに加えて、Logto CLI を使用してカスタム UI アセットをアップロードすることもできます。これは、自動化されたデプロイメントワークフローに特に便利です。

詳細については、CLI を使用してカスタム UI アセットをアップロードする を参照してください。

Logto の組み込みサインイン体験に戻す​

Logto の組み込みサインイン体験に戻したい場合は、Bring your UI カードの削除ボタンをクリックするだけです。変更を保存すると、サインイン体験 UI は Logto のデフォルトに戻ります。

RFCS: Experience API

 Experience samples Bring your own sign-in UI to Logto Cloud