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

背景#

Logtoは、サインイン、登録、パスワード回復、シングルサインオン（SSO）など、すべてのLogto機能をカバーする即席のサインイン体験UIを提供します。 ユーザーは、独自の「カスタムCSS」機能を使用して、サインイン体験UIの外観をさらにカスタマイズできます。

しかし、ブランドや特定のビジネス要件に合わせてサインイン体験（UIと認証フローの両方）を深くカスタマイズしたいという要望もあります。 あなたの声をお聞きしました！私たちは、「独自UIの持ち込み」機能がLogto Cloudで利用可能になったことを発表できて嬉しいです。

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

前提条件#

始める前に、以下を確認してください：

• サブスクリプションプラン付きのLogto Cloudアカウント
• Logtoと統合されたアプリケーション（クイックスタート）
• Logto tunnel CLI がインストール済み
• HTML、CSS、JavaScriptの基本知識

簡単のため、以下のステップでは、クラシックな「ユーザー名とパスワード」サインイン方法を使用します。Logto Consoleでサインイン方法を変更することを忘れないでください。

カスタムサインインUIを作成する#

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

シンプルさのためにCSSスタイルを省略し、以下のように簡潔なHTMLが出来上がりました：

また、Create React App、Next.js、Vue CLIなど、お気に入りのフロントエンドフレームワークからボイラープレートを始めることもできます。

Logtoはオープンソースなので、別の推奨事項としてLogto Experienceプロジェクトをクローンして、自分のニーズに合わせてコードを修正することもできます。これはReactとTypeScriptで書かれた、Logto内蔵のフル機能サインイン体験UIです。

Logto tunnel CLI のセットアップ#

Logto tunnel CLI は、HTMLページをサーブするだけでなく、ローカル開発環境でLogtoのExperience APIとやり取りすることも可能にするツールです。

あなたのindex.htmlページが/path/to/your/custom-uiにあり、LogtoのテナントIDがfoobarの場合は、以下のようにコマンドを実行します：

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

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

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

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

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 ドキュメントを参照してください。

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

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

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

ローカルでカスタムサインインUIの開発とテストを終えたら、それをLogto Cloudにデプロイできます。 単にカスタムUIフォルダのzipファイルを作成し、Logto Consoleの「カスタムUI」セクションにアップロードしてください。

アップロード後、変更を保存すると、カスタムサインインUIがLogto Cloudテナントでライブになり、ビルトインのLogtoサインイン体験を置き換えます。

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

結論#

このチュートリアルでは、カスタムサインインUIをLogto Cloudに実装してデプロイする手順を紹介しました。

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

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