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

ライブプレビューでユーザー体験をテストする

ライブプレビュー 機能を利用すると、サインイン体験の設定を手軽にテストできます。

ライブプレビュー​

コンソール > サインイン体験 に移動し、右上の「ライブプレビュー」ボタンをクリックすると、Logto の機能をフルに体験できるデモが新しいブラウザタブで開きます。このデモでは、サインインおよびサインアップフローにおける Logto の体験設計アプローチを確認できます。高いカスタマイズ性があり、アプリケーションへシームレスに統合できます。

注記:

このプレビューでは、まずアカウントを作成して体験をテストしてください。作成したアカウントは後で コンソール > ユーザー管理 で管理できます。

作成したユーザーアカウントでサインインを試み、問題なく成功した場合は、識別子や ID が表示されるサクセスページへリダイレクトされます。

開発者パネル​

Logto のライブプレビューでサインインに成功すると、ダッシュボードに遷移し、主に次の 2 つの操作が可能です：

  • ライブプレビューボタンでサインアウト：現在のセッションを終了します。
  • 開発者パネルを開くボタン：認証 (Authentication) フローを分析するためのデバッグツールを起動します。

開発者パネルでは、OIDC 統合のトラブルシューティング、トークンやクレームの確認、高度なアイデンティティシナリオのテストなど、リアルタイムのインサイトを提供します。

Logto 設定​

ライブプレビューは、デフォルトで統一されたサインイン体験を持つ隠れたデモアプリに依存しています。Logto 設定 セクションでは、認証 (Authentication) リクエストに含める認証 (Authentication) パラメーターを設定し、Logto OIDC エンドポイントに認証 (Authentication) プロセスの処理方法を指示できます。これには、アプリ ID の定義、組織 ID の割り当て、特定のスコープのリクエストなどが含まれます。このセットアップは、LogtoProvider で LogtoClient を初期化し、アプリケーションに Logto コンテキストを確立するのと同様です。

注記:

設定変更を保存することを忘れないでください。次回ライブプレビューでサインインする際に反映されます。

  • アプリ ID：一意のアプリ ID を指定します。アプリごとのサインイン体験 やリソース保護ポリシーのテストに必須です。
  • サインイン追加パラメーター：カスタムサインインプロセスをテストするために追加の 認証 (Authentication) パラメーター を指定します。例：
  • Prompt：OIDC プロンプト値（スペース区切り）を追加し、認可 (Authorization) サーバーがエンドユーザーに再認証や同意を求めるかどうかを指定します。定義済みの値は：
    • login：エンドユーザーに再認証を強制します。
    • consent：クライアントと情報を共有する前にユーザーの同意を要求します。
    • none：UI を表示しないことを示します。既存の認証 (Authentication) や同意があるかを確認する際に使用します。
  • スコープ：クレームリクエスト用のスコープ（スペース区切り）を指定します。例：
    • ユーザーの組織情報をリクエストする場合は、urn:logto:scope:organizations urn:logto:scope:organization_roles の 2 つのスコープを使用します。
    • API 権限をリクエストする場合は、スコープ名 を スコープ フィールドに、対応する API 識別子 を下の リソース フィールドに入力します。
  • リソース：アプリケーションがアクセスする必要のある API リソース識別子（スペース区切り）を入力します。このフィールドにより、必要なリソースアクセス トークンをリクエストできます。

リフレッシュトークングラント​

このセクションでは、さまざまなアクセス種別で リフレッシュ トークン を更新する方法を説明します。

  • リソース：API リソース アクセス トークンをリフレッシュする必要がある場合は、特定の API 識別子（スペース区切り）を入力します。
  • 組織 ID：組織トークンをリフレッシュする必要がある場合は、組織 ID（スペース区切り）を入力します。

リフレッシュ トークングラントの使い方については 認可 (Authorization) を参照してください。

注記:

offline_access の場合は prompt パラメーターに consent を含めてください。consent が含まれている場合のみ リフレッシュ トークン が発行されます。

ユーザー情報​

認証 (Authentication) フローで取得したユーザーデータを確認できます：

  • ID トークンのクレーム取得：ID トークン に含まれるすべてのクレーム（at_hash、aud、auth_time、exp、iat、issu など）や追加のユーザープロファイルを取得します。トークンの検証や必要なユーザー情報の抽出に役立ちます。
  • ユーザー情報の取得：userinfo エンドポイントに問い合わせてユーザープロファイル情報のみを取得します。
注記:

Chrome の開発者ツール（F12 → Console）を使ってネットワークリクエストやトークン、クレームを確認できます。