日本語
  • カスタム UI
  • 独自の UI を持ち込む
  • カスタムサインイン
  • カスタム認証フロー

Logto Cloud に独自のサインイン UI を持ち込む

このチュートリアルでは、独自のカスタムサインイン UI を Logto Cloud に作成してデプロイするプロセスをご案内します。

Charles
Charles
Developer

背景

Logto は、サインイン、登録、パスワードリカバリー、シングルサインオン（SSO）など、すべての Logto 機能をカバーする即時使用可能なサインイン体験 UI を提供します。 ユーザーは、"カスタム CSS" 機能を使用して、サインイン体験 UI の外観をカスタマイズすることもできます。

しかし、一部のユーザーは、ブランドや特定のビジネス要件に合わせて、サインイン体験（UI と認証フローの両方）を深くカスタマイズしたいと考えています。 皆さんからの声を聞いており、このたび Logto Cloud にて "独自の UI を持ち込む" 機能が利用可能になったことをお知らせできることを嬉しく思います。

このチュートリアルでは、独自のカスタムサインイン UI を Logto Cloud に作成してデプロイする手順をご案内します。

前提条件

始める前に、以下の項目を確認してください:

簡単のために、以下の手順ではクラシックな "ユーザー名 & パスワード" サインインメソッドを使用します。Logto コンソールでサインインメソッドを変更することを忘れないでください。

Username password sign-in

カスタムサインイン UI の作成

サインイン UI の最小要件は、ユーザー名入力、パスワード入力、送信ボタンを含むサインインフォームを持つ index.html ファイルを用意することです。 ChatGPT を使ってサンプル HTML を生成し、このかわいらしいピンク色のサインインページを作成しました。

Custom sign-in page

シンプルさを保つため、CSS スタイルは省略しましたが、HTML は次のようにシンプルになります:

また、お気に入りのフロントエンドフレームワーク（Create React App、Next.js、Vue CLI など）からボイラープレートを開始してもかまいません。

Logto はオープンソースなので、もう一つの推奨方法は Logto Experience プロジェクト をクローンし、あなたのニーズに合わせてコードを修正することです。これは、React と TypeScript で書かれた完全な機能を備えた Logto 組み込みサインイン体験 UI です。

Logto トンネル CLI のセットアップ

Logto トンネル CLI は、HTML ページをサーブするだけでなく、ローカル開発環境から HTML ページと Logto の Experience API を連携させることもできるツールです。

index.html ページが /path/to/your/custom-ui にあり、Logto テナント ID が foobar であると仮定すると、次のようにコマンドを実行できます:

または、ビルトインの開発サーバーを持つ UI フレームワークを使用し、ページが http://localhost:4000 でサーブされている場合、次のようにコマンドを実行できます:

コマンドを実行すると、トンネルサービスがローカルマシン http://localhost:9000/ で開始されます。

アプリケーションからサインインをトリガーする

先ほど作成したアプリケーションに移動し、Logto エンドポイントを Logto SDK 構成の中で https://foobar.logto.app/ から http://localhost:9000/ に変更します。

React サンプルプロジェクトを例にしてみましょう:

アプリケーションで "サインイン" ボタンをクリックします。組み込みの Logto サインイン UI の代わりに、カスタムサインインページにリダイレクトされるはずです。

Logto Experience API と連携する

このステップでは、カスタム UI で Logto Experience API と連携します。まず、script.js ファイルを作成し、index.html 内に参照を追加しましょう。

script.js ファイルには次のコードを入れてください。

このスクリプトは、次の API を利用して、ユーザー名とパスワードのサインインフローを完了します:

  • PUT /api/experience - サインインインタラクションの開始
  • POST /api/experience/verification/password - ユーザー名とパスワードの検証
  • POST /api/experience/identification - 現在のインタラクションにおけるユーザーの識別
  • POST /api/experience/submit - サインインインタラクションの送信

詳細については、Logto Experience API docs を参照してください。

カスタムサインインページをテストする

  1. アプリケーションに移動して、"サインイン" ボタンをクリックします。
  2. カスタムサインインページ http://localhost:9000/ にリダイレクトされるはずです。
  3. ユーザー名とパスワードを入力し、"送信" ボタンをクリックします。
  4. すべてが正しく設定されている場合、認証されたユーザー情報を持ってアプリケーションに戻されます。

カスタムサインイン UI を Logto Cloud にデプロイする

カスタムサインイン UI のローカルでの開発とテストが完了したら、Logto Cloud にデプロイできます。 単にカスタム UI フォルダを zip ファイルに圧縮し、Logto コンソールの "カスタム UI" セクションにアップロードするだけです。

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

アップロードが完了したら、変更を保存し、カスタムサインイン UI が Logto Cloud テナントでライブになります。これにより、組み込みの Logto サインイン体験が置き換えられます。

カスタム UI が有効になった

最後に、アプリケーションに戻り、エンドポイント URI を自分の Logto Cloud エンドポイント https://foobar.logto.app/ に戻します。 今回は、Logto トンネルサービスを停止することができ、アプリケーションはオンラインにホストされたカスタム UI で直接動作するはずです。

結論

このチュートリアルでは、独自のカスタムサインイン UI を Logto Cloud に実装してデプロイするプロセスをご案内しました。

この機能により、ブランドや特定のビジネス要件に合わせて、サインイン UI と認証フローを深くカスタマイズできるようになりました。

コーディングを楽しんでください！ 🚀

Logto Cloud を無料で試してみてください