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

独自 UI の持ち込み

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

注記:

この機能を利用するには、カスタム UI がシングルページアプリケーション（SPA）互換である必要があります。また、最適なパフォーマンスのために常に本番ビルドを使用することを推奨します。

Logto Console でカスタム UI 機能を試す​

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

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

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

pnpm install && pnpm build
注記:

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

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

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

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

  • アップロードするアセットは 1 つの zip ファイルとしてパッケージ化してください。
  • zip ファイルのルートディレクトリに index.html ファイルが含まれている必要があります。
  • zip ファイルのサイズは 20MB を超えてはいけません。
  • zip ファイル内のいずれかのファイルが 10MB を超えてはいけません。
  • zip ファイル内のファイル数は合計 200 ファイルを超えてはいけません。

カスタム UI アセットのアップロード​

注記:

本番環境でこの機能を使用する際は注意してください。即座にユーザーのサインイン体験に影響します。

  1. Console / サインイン & アカウント / ブランディング / 独自 UI の持ち込み

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

カスタム UI の開発​

Experience API との連携​

カスタム UI では、 Experience API と連携して、サインイン、サインアップ、パスワードリセット、ソーシャルアカウントの連携、多要素認証 (MFA) の有効化など、さまざまなアクションを実行する必要があります。ユーザーフローや実装の詳細をより深く理解するために、 Experience API 設計 RFC をご覧ください。包括的な技術仕様やサンプルが掲載されています。

また、ブランディングカラー、会社ロゴ、ファビコン、パスワードポリシー、ローカライズされた言語フレーズ、カスタム CSS など、他のサインイン体験設定にも sign-in Experience API endpoint を通じてアクセスする必要があります。

サンプルプロジェクト​

カスタム UI の理解と実装を素早く始められるよう、サンプルプロジェクトを用意しています。詳細は Logto Experience project GitHub リポジトリをご覧ください。

さらに、今後もよりシンプルでシナリオベースのサンプルプロジェクトを追加し、一般的なユースケースをカバーしていく予定です。今後のアップデートにご期待ください！

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

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

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

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

詳細は カスタム UI をローカルでデバッグ・テストする をご参照ください。

CLI を使ったカスタム UI アセットのアップロード​

Console からのアップロードに加え、Logto CLI を使ってカスタム UI アセットをアップロードすることもできます。これは自動デプロイワークフローに特に便利です。

詳細は CLI を使ったカスタム UI アセットのアップロード をご参照ください。

Logto 組み込みサインイン体験への復元​

Logto の組み込みサインイン体験に戻したい場合は、「独自 UI の持ち込み」カードの削除ボタンをクリックしてください。変更を保存すると、サインイン体験 UI が Logto のデフォルトに戻ります。

RFCS: Experience API

 Experience samples

Logto Cloud への独自サインイン UI の持ち込み