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

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

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

ライブプレビュー​

コンソール > サインイン & アカウント > サインアップとサインイン

に移動し、右上の「ライブプレビュー」ボタンをクリックすると、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 → コンソール）を使ってネットワークリクエストやトークン、クレームを確認できます。